【おやじのweb技】 html/javascript/css等
重なりあった複数画像でマウスが重なった画像を一番手前に表示する
◆手順1【複数の画像を重ねて配置】
※複数の画像を<body>〜</body>間に重ねて配置する
※<img src"(画像の相対パス)" width="画像幅(px)" height="画像高(px)" border="画像枠幅(px)"
style="position:absolute; top:(ウィンドウ上からの画像の距離(px));
left:(ウィンドウ左からの画像の距離(px)); z-index:(画像の重なり順)">
※画像の位置(top,left)及び重なり順を調整する
※重なり順(整数)は表面に近い方が番号が大きい
※onmouseover/onmouseoutによりマウスが重なった(離れた)ときのz-index設定を変更する
-----次の行から(copy)-----
<img src="photo/001-s.JPG" width="220" height="165" border="2"
style="position:absolute; top:130px; left:100px; z-index:1;"
onmouseover="this.style.zIndex=10;" onmouseout="this.style.zIndex=1;">
<img src="photo/002-s.JPG" width="220" height="165" border="2"
style="position:absolute; top:140px; left:150px; z-index:2;"
onmouseover="this.style.zIndex=10;" onmouseout="this.style.zIndex=2;">
<img src="photo/003-s.JPG" width="220" height="165" border="2"
style="position:absolute; top:150px; left:200px; z-index:3;"
onmouseover="this.style.zIndex=10;" onmouseout="this.style.zIndex=3;">
-----上の行まで(copy)-----
◆ホームページビルダーの「どこでも 配置モード｣によって画像を重ねて配置することができますが、そのようにして配置した画像に本スクリプトを記述してもうまく動かないかも知れません(確認していません)。
◆zIndexの番号(整数)は手前ほど大きくなりますが、連続した番号である必要はありません。一番手前に表示するときは、画像の枚数より大きい数値を適当に指定します。
【応用技】
表示画像に大きな画像を表示するリンクを記述しておいて、｢クリックしたら大きな画像表示｣させることが可能です。
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----