ロールオーバーで画像拡大、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>
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
その通りにやりましたら、表示されました。 分かりやすくて適切なご回答、本当にありがとうございました。