5枚重ね画像(位置指定とz-index)

『CSS事典』を読んでいましたら、【要素を重ねる順番を指定する】z-indexプロパティの記事がありましたので、(面白そうだなぁ)と思い試してみました。
positionプロパティで5枚の画像を位置をずらしながら重ね、マウスが乗った時に最前面に表示しようというものです。コメントも変わるようにしてみました。幾度か試行錯誤を重ねなんとかできたようです。
「こんな使い方でいいのかな?」とちょっぴり疑問ですが暑さボケの頭の体操になりました。後から調べましたらこのサイトに参考になるような記事がありました。
(それぞれの画像にマウスポインターを乗せると最前面に表示されます)


<<<<<

<岡 崎


<DIV style="position:relative; top:0px; left:0px ; height:390px"><font style="font-size:1px;"><<IMG src="画像5"style="border-width:3px;border-style:solid;border-color:#b8860b;position:absolute; top:0px; left:0px; z-index:1"onMouseOver="this.style.zIndex=9"onMouseOut="this.style.zIndex=1"><<IMG src="画像4"style="border-width:3px;border-style:solid;border-color:#b8860b;position:absolute; top:30px; left:30px; z-index:2"onMouseOver="this.style.zIndex=9"onMouseOut="this.style.zIndex=2"><<IMG src="画像3"style="border-width:3px;border-style:solid;border-color:#b8860b;position:absolute; top:60px; left:60px; z-index:3"onMouseOver="this.style.zIndex=9"onMouseOut="this.style.zIndex=3"><<IMG src="画像2"style="border-width:3px;border-style:solid;border-color:#b8860b;position:absolute; top:90px; left:90px; z-index:4"onMouseOver="this.style.zIndex=9"onMouseOut="this.style.zIndex=4"><<IMG src="画像1"style="border-width:3px;border-style:solid;border-color:#b8860b;position:absolute; top:120px; left:120px; z-index:5"onMouseOver="this.style.zIndex=9"onMouseOut="this.style.zIndex=5"></font></DIV>
上はソースですが、コメント表示部分のソースは複雑になりますので省略しています。
【覚え書き】最初に一番手前に表示されているものを画像1とした。最背面の画像をposition:relative;で位置指定し、それを基準に以後の画像をposition:absolute;で位置をずらしながら表示してある。zIndex=値 は数値の多きものが前面に表示される。
スポンサーサイト
プロフィール

ja6ei

Author:ja6ei
FC2ブログへようこそ!

カレンダー
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
最近の記事
最近のコメント
最近のトラックバック
月別アーカイブ
カテゴリー
ブロとも申請フォーム

この人とブロともになる

リンク
ブログ内検索
RSSフィード