2008年06月15日

画像の重なり順序を変えます。z-index

スポンサード リンク

 マウスの乗った
画像を一番手前に表示します。

サンプルソース

<HTML>
<HEAD>
<TITLE>画像の重なり順序を変えます。 z-index</TITLE>
</HEAD>
<body>
<DIV id="IMG1" style="position:absolute;top : 200px;left : 200px; z-index : 1;"
onmouseover="this.style.zIndex = 4"; onmouseout="this.style.zIndex = 1";>
<IMG src="画像のURL" /></DIV>

<DIV id="IMG2" style="position:absolute;top : 230px;left : 230px; z-index : 2;"
onmouseover="this.style.zIndex = 4"; onmouseout="this.style.zIndex = 2";>
<IMG src="画像のURL" /></DIV>

<DIV id="IMG3" style="position:absolute;top : 260px;left : 260px; z-index : 3;"
onmouseover="this.style.zIndex = 4"; onmouseout="this.style.zIndex = 3";>
<IMG src="画像のURL" /></DIV>
</body></HTML>

ひとこと、二言

画像のURLの所は御自分の画像のURLをいれてください。

position:absolute;top : 200px;left : 200px; //画像の画面の上から、左からの位置です
top : ***px; left : ***px; の数値を変更することで画像の配置を変えることができます。
z-index : 1; //数値が小さいほど奥に大きいほど手前に配置されます。

onmouseover="this.style.zIndex = 4;" // マウスが乗ったら(onmouseover) z-indexを 4 にして一番手前に表示します。
onmouseout="this.style.zIndex = 1;" // マウスが去ったら元に戻します。。

タグ:z-index
posted by javaScript at 20:56 | 大阪 ☁ | 画像 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。