他カテゴリ

ホームページ仮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

11月になりましたねｗｗｗだんだん寒くなって来たしそろそろ本格的な冬モードかな？怪しげな風邪と菌も流行ってるみたいだし予防と消毒はしっかりしないとね！

投稿者の人気記事

ありがとうございます。

Like token

Tip token

今日も暑い（т-т）

Like token

Tip token

雨が辛いｗｗｗ

Like token

Tip token

コメントする

コメントする

こちらもおすすめ！

他カテゴリ

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

454.56 ALIS 124.82 ALIS

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

144.63 ALIS 159.32 ALIS

バターをつくってみた

461.36 ALIS 127.90 ALIS

他カテゴリ

警察官が一人で戦ったらどのくらいの強さなの？『柔道編』　【元警察官が本音で回答】

827.50 ALIS 114.82 ALIS

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

246.34 ALIS 16.10 ALIS

Eye catch

約２年間ブロックチェ－ンゲームをして

1.10k ALIS 61.20 ALIS

他カテゴリ

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

175.41 ALIS 12.10 ALIS

他カテゴリ

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

494.64 ALIS 35.87 ALIS

17万円のPCでTwitterやってるのはもったいないのでETHマイニングを始めた話

1.34k ALIS 46.60 ALIS

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

514.28 ALIS 6.32 ALIS

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

852.58 ALIS 38.31 ALIS

他カテゴリ

警察官が一人で戦ったらどのくらいの強さなの？『柔道編』　【元警察官が本音で回答】

827.50 ALIS 114.82 ALIS