ロールオーバーで画像拡大、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>
補足
回答ありがとうございます。 戻すタイミングはマウスアウトです。 イメージとしては加工を加えていない画像(画像Ａ)に マウスを載せた時だけ加工を加えた画像(画像Ｂ)になり、 通常はあくまで画像Ａを表示させるイメージです。