WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:マウスオーバーとアウトについて

0:[投稿] りんこ [2002/10/11 11:42 ][環境:WIN+IE WIN系+Java]

JavaScriptをつかったメニューバーを探していたところ
よいサンプルスクリプトがみつかったのですが、onclickでした。
そこで、onMouseOverでメニューがでるようにして、onMouseoutでメニューが引っ込んだ状態(元の状態)に戻る様にしたいと思ったのですが、なかなかうまくいきません。display noneにすればいいのかと思うのですが…。

このスクリプトでは無理でしょうか?
<script language="javascript">
<!--
function mymenu(titles){
titles=document.all[titles].style;
if (titles.display=='none') titles.display="block";
else titles.display='none';
}

//-->
</script>

<a style="text-decoration:none" href=# onMouseover="mymenu('drop1');return false">メニュー1</a><br>
<div id="drop1" style="display:none">
<a href="***.htm" target="_blank">メニュー1-1</a><br>
<a href="///.htm" target="_blank">メニュー1-2</a></div>

長くなってしまってすみません。


1:[回答] ween [2002/10/11 14:09 ]

<a href="#" onmouseover="mymenu('drop1')" onmouseout="mymenu('drop1')">メニュー1</a> にすると
mouseoverで#drop1を出せても
メニュー1を出ないと#drop1に行けない構造になるのが難点。
#drop1の祖先要素にイベントを設定して
mouseoutイベントを発生させないまま#drop1に行けるようにするのがミソ。

<div onmouseover="mymenu('drop1');" onmouseout="mymenu('drop1');">
メニュー1
<div id="drop1" style="display:none;">
<a href="***.htm" target="_blank">メニュー1-1</a><br>
<a href="///.htm" target="_blank">メニュー1-2</a></div>
</div>


2:[完了] りんこ [2002/10/11 15:48 ]

weenさん、回答ありがとうございました!
なるほど!と思いました。
今まで一生懸命 <a href="#" onmouseover="mymenu('drop1')" onmouseout="mymenu('drop1')">メニュー1</a> で
どうにかすることばかり考えてました。

みなさんには簡単だったかもしれないですね。
とても勉強になりました。ありがとうございました!

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World