他カテゴリ

ホームページ仮4ページ目ｗｗｗ9

マんタ
2020/06/23 05:22

はい。今回は4ページ目を作成していきます。

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;link rel="stylesheet" type="text/css" href="mystyle.css"&gt;
&lt;script type="text/javascript"src="script2.js"&gt;
&lt;/script&gt;&lt;/div&gt;
&lt;p&gt;画像をクリックするとそれぞれのページ にとびますｗｗｗ&lt;/p&gt;
&lt;p align="center"&gt;&lt;a href="top.html"&gt;&lt;img src="image/Top.jpg " alt="top"/&gt;
&lt;a href="form.html"&gt;&lt;img src="image/おちゃ缶.jpg " alt="おちゃ缶"/&gt;
&lt;a href="sab.html"&gt;&lt;img src="image/プライズ商品.png " alt="プライズ"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;h2&gt;プライズ詳細&lt;/h2&gt;
&lt;p&gt;&lt;br&gt;
&lt;/p&gt;
&lt;p&gt;
&lt;img src="image2/ss3.jpg" alt="figyua写真"  onmouseover="document.hanamaru.src='image2/hanamaru1.jpg'"&gt;
&lt;img src="image2/ss2.jpg"alt="figyua写真"   onmouseover="document.hanamaru.src='image2/hanamaru3.jpg'"&gt;
&lt;img src="image2/ss1.jpg"alt="figyua写真"   onmouseover="document.hanamaru.src='image2/hanamaru2.jpg'"&gt;&lt;br&gt;
&lt;img src="image2/hanamaru1.jpg" alt="figyua写真"  name="hanamaru"&gt;&lt;br&gt;
&lt;span class="hana"&gt;上の小さい画像をポイントすると、下に大きく表示されます。&lt;/span&gt;&lt;/p&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

あっ！そうそうJavaScriptの時に飛ばしてしまった部分があったのでここで解説しておきますが、また後でJavaScriptの記事にも追加しておきますが・・・

下の部分のプログラムですが

&lt;img src="image2/ss3.jpg" alt="figyua写真"  onmouseover="document.hanamaru.src='image2/hanamaru1.jpg'"&gt;
&lt;img src="image2/ss2.jpg"alt="figyua写真"   onmouseover="document.hanamaru.src='image2/hanamaru3.jpg'"&gt;
&lt;img src="image2/ss1.jpg"alt="figyua写真"   onmouseover="document.hanamaru.src='image2/hanamaru2.jpg'"&gt;&lt;br&gt;
&lt;img src="image2/hanamaru1.jpg" alt="figyua写真"  name="hanamaru"&gt;&lt;br&gt;
&gt;

これは小さいサムネイルを大きく表示させるときに使います
<img src="image2/hanamaru1.jpg" alt="figyua写真" name="hanamaru"><br>

プログラムを見ていくと

img要素を使ってimage2/hanamaru1.jpgという画像を挿入しています。

また、name属性で画像にhanamaruという名前を付けています。

表示するとこんな感じに

Content image

それぞれの画像の上にマウスを置くと

Content image

Content image

Content image

非常にわかりにくくて申し訳ないのですが一応マウスポインタを上に乗せると下に拡大画像が表示されるわけですｗｗｗ

ここまでご覧いただきありがとうございました。

4ページ目完成まであと少し・・・・

完成したらまた記事を出すので良かったらご覧ください。

BYマんタ

HTML XML ホームページ作成

0人がサポートしています

獲得ALIS:

61.43 ALIS

0.00 ALIS

マんタ
@25kit6

9月、残り今年もあと4ヶ月まだすこし蒸し暑だけど頑張っていきますかね？

投稿者の人気記事

よくみる花💐

Like token

Tip token

イーブイパック登場！

Like token

Tip token

まさかの　応募者抽選

Like token

Tip token

コメントする

コメントする

こちらもおすすめ！

無料案内所という職業

596.41 ALIS 84.20 ALIS

他カテゴリ

京都のきーひん、神戸のこーへん

175.41 ALIS 12.10 ALIS

バターをつくってみた

906.43 ALIS 127.90 ALIS

他カテゴリ

機械学習を体験してみよう！（難易度低）

454.56 ALIS 124.82 ALIS

ジョークコインとして出発したDogecoin（ドージコイン）の誕生から現在まで。注目される非証券性🐶

1.44k ALIS 38.31 ALIS

海外企業と契約するフリーランス広報になった経緯をセルフインタビューで明かす！

246.34 ALIS 16.10 ALIS

Bitcoin史〜0.00076ドルから6万ドルへの歩み〜

799.98 ALIS 947.13 ALIS

他カテゴリ

SASUKEオーディションに出た時の話

494.64 ALIS 35.87 ALIS

わら人形を釘で打ち呪う丑の刻参りは今も存在するのか？　京都最恐の貴船神社奥宮を調べた

599.04 ALIS 486.35 ALIS

【初心者向け】Splinterlandsの遊び方【BCG】

514.28 ALIS 6.32 ALIS

他カテゴリ

オランダ人が語る大麻大国のオランダ

66.13 ALIS 46.20 ALIS

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

681.47 ALIS 121.79 ALIS