- ベストアンサー
マウスが外れたら画像 imgB を非表示にする方法
- onmousemove属性を持つimg要素にマウスが乗った場合に実行されるJavaScript関数を作成し、imgBを非表示にする方法について教えてください。
- OKWaveのブックマークに追加するアイコンにマウスを合わせると表示される内容について、同じ方法を使って行う場合についても教えてください。
- 画像imgAとimgBを使ってマウスが外れたらimgBを非表示にする方法について教えてください。
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞＞＞ アイコンにマウスをあわせるとなんかでてくきますよね。 は、簡単な方法として、title属性またはalt属性で設定します。 ＞＞＞ マウスが外れたら imgB を表示しないようにする方法はありますでしょうか。 これには、onmouseoutイベントを使います。 一旦元の位置に戻って、消える形にしました。 -------------------------------------------------------------------------------- <html> <head> <script type="text/javascript"><!-- var Bleft; var Btop; var myX = 8; var myY = 16; function myMove(){ myObj=document.imgb.style; myObj.left = myX + window.event.clientX + document.body.scrollLeft + "px"; myObj.top = myY + window.event.clientY + document.body.scrollTop + "px"; } function init() { Bleft=document.imgb.style.left; Btop=document.imgb.style.top; } function myOut(){ document.imgb.style.left = Bleft; document.imgb.style.top = Btop; alert("Good By ..."); document.imgb.style.visibility = 'hidden'; } //--></script> </head> <body onload="init()"> <img src="imgA.gif" onmousemove="myMove()" onmouseout="myOut()" title='HELLO !'" /> <img src="imgB.gif" name="imgb" style="position: absolute; z-index: 1;" /> </body> </html> -------------------------------------------------------------------------------- マウスをあわせた最初の動きが不自然だとお気づきでしょう。これは、B画像の（left,top）をマウスの尻尾に一気にもって行ってるためです。 マウスが動いた分だけ同じように動かすとより自然に見えるかも知れません。挑戦しましょう。
お礼
動きを確認しました。ほんとに助かります。今から理解します。