画像にマウスポインターが載るとメニューが現れる













サンプル
<head>
<title></title>
<script language="JavaScript">
<!--
function showHide_lay() {
var i,p,v,obj,args=showHide_lay.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
function MM_findObj(n, d) {
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
//-->
</script>
</head>
<BODY>
<DIV id="menu" style="position:absolute; left:20px; top:20px; width:100px; height:20px; z-index : 4; visibility: visible;"><a href="javascript;" onMouseOver="showHide_lay('menu2','','show','Layer1','','hide','Layer2','','hide','Layer3','','hide')"><IMG src="../art/menu.gif" width="100" height="20" alt="menu" border="0" name="Image1"></a></DIV>
<DIV id="menu2" style="position:absolute; left:20px; top:40px; width:100px; height:160px; z-index : 5; visibility: hidden;">
<table border="0" cellpadding="0" cellspacing="0" width="100">
<tr>
<td><img src="メニュー画像へのURLf" width="100" height="1" border="0" name="undefined_2"></td>
</tr>
<tr>
<td><A href="URL" onmouseover="showHide_lay('Layer1','','show','Layer2','','hide','Layer3','','hide')"><IMG src="ばなーへのURL" width="88" height="32" border="0" alt="Entertainment"></A></td>
</tr>
<tr>
<td><A href="リンクURL" onmouseover="showHide_lay('Layer1','','hide','Layer2','','show','Layer3','','hide')"><IMGsrc=バナーURL" width="88" height="32" border="0"></A></td>
</tr>
<tr>
<td><A href="リンク先URL" onmouseover="showHide_lay('Layer1','','hide','Layer2','','hide','Layer3','','show')"><IMG src="../art/yahoo.gif" width="67" height="49" border="0"></A></td>
</tr>
<TR>
<TD><a href="JavaScript" onMouseOver="showHide_lay('menu2','','hide','Layer1','','hide','Layer2','','hide','Layer3','','hide')"><IMG src=".画像へURL" width="88" height="20" border="0"></a></TD>
</TR>
</table>
</DIV>
<DIV id="Layer1" style="position:absolute; left : 115px; top : 61px; width:200px; height : 98px; z-index:1; background-color : #6666ff; visibility: hidden;">
<p>○○メニュー<BR>
<BR>
<A href="URL">サイト名</A><BR>
<A href="URL">新着情報へ</A><BR>
<A href="URL">飛ばしたいページ名</A></p>
</DIV>
<DIV id="Layer2" style="position:absolute; left : 119px; top : 61px; width : 195px; height : 127px; z-index : 2; background-color : #ffff66; border: 1px none #000000; visibility: hidden;">ホームページ改造メニュー<BR>
<BR>
<A href="飛ばしたいURL">ホームページ改造王トップ<BR>
</A><BR>
<BR>
普通の文章ももちろん書けます。</DIV>
<DIV id="Layer3" style="position:absolute; left : 119px; top : 84px; width:200px; height : 73px; z-index : 3; background-color : #66ffcc; border: 1px none #000000; visibility: hidden;">最近あまり使っていない<BR>
<A href="http://www.yahoo.co.jp/">Yahoo</A>!です。
</DIV>
</BODY>
Layer1','','show','Layer2','','hide','Layer3','','hide'とLayer1','','hide','Layer2','','show','Layer3','','hide'
この違いをよく見てください。
マウスポインターがのると見せたいレイヤーをshowにし、隠すレイヤーをhideにしてください。
そうすればレイヤーを増やすことが出来ます。
レイヤーの中は普段使っているように、色なり文字なりを自由に変更してください。
だいたい分かるでしょうか？
分からなければサポート掲示板にお気軽にどうぞ。

実験はこちらでコピーペで出来ます。

ソースを利用したら、http://www.act2cool.com/html/へリンクして頂ければ嬉しいです。
ばなーはこちらにあります。