ロールオーバーで画像拡大、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>
お礼
15mmさん アドバイスありがとうございました。onClick="window.opener.maxImage()" でできました。 アドバイスがなければ「スクリプトの空間が違う」という考えには絶対に行き着いてなくギブアップしていたものと思います。また「属性がスペースなしでつながっていたり、クォーテーションが抜けていたり。」の指摘もありがとうございました。ウィンドウ名も一応固定にして再オープンできるようにしましたが複数画像を表示したい場合などに使い勝手がよくないかも知れません。おいおい改良して行きたいと思います。今回は本当にありがとうございました。なお、数日してこの質問はクローズしたいと思っています。