掲示板/JavaScript質問板/過去ログ/一覧/ オンマウス表示メニュー（画像版）

0 名前：コモ： 2007/06/26（火） 02:46 ID:ROsxiGK9 sub-tF: ①オンマウスで画像入れ替え
②オンマウスでメニュー表示
上記①・②を別々ではできるのですが、
それを組み合わせるとなんだかゴチャゴチャになって
ソースがよくわからなくなってきます。

サンプルを探したのですが二つ合わさっているのがみつかりません。
メニューも一つではなく複数作ろうと考えています。

ちなみにベースは下記ソースを参考にさせていただいております。

<html>
<head>
<title>ポップアップメニュー</title>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<style>

</style>
</head>
<body>
<table id="MainMenu" border="0" cellpadding="0" cellspacing="0">
<tr>
<td onmouseover="document.getElementById('SubMenu').style.display='block'" onmouseout="document.getElementById('SubMenu').style.display='none'">
<span class="SubMenu" style="color:Navy;font-weight:bold;">メインメニュー</span>
<div id="SubMenu">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<a class="SubMenu" href="submenu1.html">サブメニュー１</a><br>
<a class="SubMenu" href="submenu2.html">サブメニュー２</a><br>
<a class="SubMenu" href="submenu3.html">サブメニュー３</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<div style="position:absolute;top:25px;width:100%">
<hr>
中身
</div>

</body>
</html>

ご教授願えたらと思います。
よろしくお願いいたします。

1 名前：元帥： 2007/06/26（火） 02:46 ［URL］ ID:Giuz7f2N sub-bK

この手の質問は定期的に寄せられますので、過去ログを参照してそれを改造する方が後々の為にも何かと好都合です。

・全く別の要素のidとclass属性に同じ値を指定するのはソースの可読性を下げます。
・スクリプトOFFだとメニューが表示されないので、リンクを辿れなくなります。
・etc…

>>0 に最小限の変更で実現したいなら、メインメニューの文字を消して、CSSに以下を追加。
IEでは使えないかもしれません。

span.SubMenu{
background-image: url("画像パス");
width:128px;/*値は画像に応じて*/
height:32px;/*値は画像に応じて*/
display:block;
}

span.SubMenu:hover{
background-image: url("オンマウス時の画像パス");
}