- ベストアンサー
テキストにオンマウスで指定箇所に画像を表示
画像またはテキストリンクにオンマウスすると指定の場所にそれぞれのリンクで 指定の画像を表示するようにしたいのですが、色々調べてみたもののよくわかりませんでした。 リンク１にオンマウスして画像が出て、そのリンク１からマウスを放しても 別所に表示された画像はそのままで、次のリンク２にオンマウスすると 次の画像と入れ替わる、というようにしたいのですが・・・説明が下手ですみません＾＾； このようにしたい場合、どのようにしたらいいでしょうか。
- siroro
- お礼率49% (44/89)
- JavaScript
- 回答数1
- ありがとう数6
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
こんな感じでしょうか。 <html> <head> <title></title> <script type="text/javascript"> <!-- lnkimgsrc= new Array(); lnkimgs= new Array(); lnkimgsrc[0]="***0.jpg"; // リンク0の画像 lnkimgsrc[1]="***1.jpg"; // リンク1の画像 lnkimgsrc[2]="***2.jpg"; // リンク2の画像 lnkimgsrc[3]="***3.jpg"; // リンク3の画像 lnkimgsrc[4]="***4.jpg"; // リンク4の画像 /* 上記で画像のURLを指定 */ for (i=0; i<lnkimgsrc.length; i++){ lnkimgs[i]= new Image(); lnkimgs[i].src=lnkimgsrc[i]; } function changeImg(x){ if (document.images){ document.images['tgt'].src=lnkimgs[x].src; } } // --> </script> </head> <body> <a href="***0.html" onMouseover="changeImg(0)">リンク0</a> <a href="***1.html" onMouseover="changeImg(1)">リンク1</a> <a href="***2.html" onMouseover="changeImg(2)">リンク2</a> <a href="***3.html" onMouseover="changeImg(3)">リンク3</a> <a href="***4.html" onMouseover="changeImg(4)">リンク4</a><br> <img src="***.jpg" name="tgt"> </body> </html> リンクにポインタを合わせると、name="tgt"を持つimg要素の画像が切り替わります。 onMouseoverでのみこの処理を呼び出し、ポインタがリンクから離れた時(onMouseout)には何も処理を行わないようにしているので、リンクからポインタが離れた時には、画像はそのままになります。 参考まで。
お礼
ありがとうございます！ とてもまとまった書き方でわかりやすかったです＾＾