- ベストアンサー
ロールオーバーで画像拡大、z-index
下記の様にjavascriptとcssで、 サムネイル画像をロールオーバーしたら拡大画像が表示されるように設定しました。 しかしz-indexが効かずに拡大画像がほかのサムネイル画像の下に表示されてしまいます。 z-indexの対処方法などいろいろ調べ試してみたのですが、 うまくいきませんでした。 どのようにすればうまく表示できるか教えていただけないでしょうか。 よろしくお願いします。 <html> <head> <title>テスト</title> <script type="text/javascript"> <!-- function setStyle(thum,vType) { document.getElementById(thum).style.visibility = vType; } //--> </script> </head> <body> <p style="margin-top:50px;"> <div style="position:relative; float:left;"> <div id="thum1" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')" style="border:0px; z-index:2;"> <img src="thum1.png" width="100" height="100"> </div> <div id="thum2" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum2','visible'),setStyle('thum1','hidden')" onMouseout="setStyle('thum2','hidden'),setStyle('thum1','visible')"> <img src="thum2.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト1</center></b> </div> </div> </div> <div style="position:relative; float:left;"> <div id="thum3" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')" style="border:0px; z-index:2;"> <img src="thum3.png" width="100" height="100"> </div> <div id="thum4" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum4','visible'),setStyle('thum3','hidden')" onMouseout="setStyle('thum4','hidden'),setStyle('thum3','visible')"> <img src="thum4.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト2</center></b> </div> </div> </div> <div style="position:relative; float:left;"> <div id="thum5" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')" style="border:0px; z-index:6;"> <img src="thum5.png" width="100" height="100"> </div> <div id="thum6" style="position:absolute; z-index:10; top:-100px; left:-50px; visibility:hidden;" onMouseover="setStyle('thum6','visible'),setStyle('thum5','hidden')" onMouseout="setStyle('thum6','hidden'),setStyle('thum5','visible')"> <img src="thum6.png"" style="border:1px solid #dedede;" width="200" height="200"> <div style="background-color:#dedede; padding:5px; width:192px; line-height:99%;"> <b><center>テスト3</center></b> </div> </div> </div> </p> </body> </html>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ブラウザによって若干挙動が異なるようですが、こちらの環境では一応意図通り（？）に動いているように見えます。 FF、Operaでは拡大画像が上に表示されますが、IE（6）だと御質問の状態になりますね。（IEの他のバージョンは手元にないので未確認） ＞<img src="thum2.png"" style="border:1px solid #dedede;" ～ 「"thum2.png""」の 「""」（タイポか？）が原因かと思い、除いてみましたが効果はないみたい。 ちゃんと確認をしていませんが、どうもIEはposition指定された要素のz-indexが親子関係を超えて反映されないとかそんな感じの原因みたい… とりあえずの対処法として、さらに上位の親のdivのz-indexを動的に変えてあげればいけるみたいです。 あと、余計なことですが、pのトップマージンが50に対して、拡大表示する画像が-100pxなので、このままだと画像の上側が切れるのは良いのでしょうか？（これより上部にスペースがあればOKだけど） 同様に、左側のマージンも取っていないので、thum2を表示するとleft:-50pxのために左側も切れて表示されます。 （bodyのデフォルトマージン分が多少の余裕にはなっていますが…） また、1回のマウスオンでイベントは thum1のmouseover → thm1のmouseout → thum2のmouseover が一連として起きるので、その度に各画像の表示の切替が行なわれていることになり、どうも非効率的のような気が… （結果として、見えるのは最初と最後だけなので問題ないけど） でも、thum1のmouseoverとthum2のmouseoutを拾うだけでも良さそう。 そんなこんなでいじっているうちに、ソースがだいぶ変わってしまいました。 ご質問に挙げられたソースが簡略化してある場合だとうまくいかない可能性がありますが、とりあえず、考え方のご参考までに。 （上と左の空きは、あえてご提示にの形を守っていますので、拡大時に一部切れて表示されます。ulのmagin、paddingなどで調節可能。） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>テスト</title> <style type="text/css"> ul.thumnail { list-style:none; margin-top:50px; margin-left:0px; padding-left:0px; } ul.thumnail li { float:left; position:relative; } ul.thumnail div.default img { width:100px; height:100px; } ul.thumnail div.zoom { display:block; visibility:hidden; position:absolute; top:-100px; left:-50px; } ul.thumnail div.zoom img { width:200px; height:200px; border:1px solid #dedede; } ul.thumnail div.zoom b { width:202px; display:block; padding:5px 0 5px 0; text-align:center; background-color:#dedede; } </style> <script type="text/javascript"><!-- function change(evt) { var t = evt.target || evt.srcElement, tdiv = t.parentNode; if (t.nodeName != 'IMG') return; var divs = tdiv.parentNode.getElementsByTagName('DIV'); var i, e, cls = evt.type == 'mouseover'?'zoom':'default'; if (tdiv.className == cls) return; for (i=0; i<divs.length; i++) if (divs[i].className == cls) {e = divs[i]; break;} if (!e) return; tdiv.style.visibility = 'hidden'; e.style.visibility = 'visible'; e.parentNode.style.zIndex = cls=='zoom'?10:0; } //--></script> </head> <body> <ul class="thumnail" onmouseover="change(event)" onmouseout="change(event)"> <li> <div class="default"> <img src="thum1.png"> </div> <div class="zoom"> <img src="thum2.png"><b>テスト1</b> </div> </li> <li> <div class="default"> <img src="thum3.png"> </div> <div class="zoom"> <img src="thum4.png"><b>テスト2</b> </div> </li> <li> <div class="default"> <img src="thum5.png"> </div> <div class="zoom"> <img src="thum6.png"><b>テスト3</b> </div> </li> </body> </html>
その他の回答 (1)
- zeff
- ベストアンサー率69% (137/198)
何だかとても似ているのを見つけたので貼っておきます。 参考になれば。 写真拡大表示 Hoverbox http://www.es.rojo.jp/css/es_css20.html
お礼
ありがとうございます。 参考にします。
お礼
詳しく教えていただきありがとうございました。 無事、完成できました。