ロールオーバーで画像拡大、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>
お礼
talooさん、これで3度目のご回答です。 いつもありがとうございます。 <br style="clear:both">を入れる方が、記述量が少ないので、 こちらでいこうと思います。