- ベストアンサー
onmouseoverで写真の上に重ねて写真表示
ホームページ上で写真のある部分にカーソルを合わせると、その上に写真が表示されるようにしたいと思っています。 テーブルを区切り、別の場所に表示することはできたのですが、重ねて表示というところでつまずいています。 どなたかご教授願います。 参考HP http://www.njpw.co.jp/prof/chono.html （蝶野の目にカーソルを合わせると、目元の拡大写真が全身写真の上に表示されます）
- hanyu0216
- お礼率25% (1/4)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
・ 次の２枚の画像を入れ替えています。 http://www.njpw.co.jp/prof/img/chono/001.jpg http://www.njpw.co.jp/prof/img/chono/ap.jpg 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <script type="text/javascript"> <!-- var imgs = new Array(new Image(),new Image()); imgs[0].src = 'img/chono/001.jpg'; imgs[1].src = 'img/chono/ap.jpg'; function swapImage(imgx,num) { document.getElementById(imgx).src = imgs[num].src; return false; } //--> </script> <base href="http://www.njpw.co.jp/prof/"/> </head> <body> <img src="img/chono/001.jpg" width="240" height="600" border="0" usemap="#Image1Map" id="Image1"> <map name="Image1Map"> <area shape="rect" coords="57,30,133,67" href="#" onMouseOver="swapImage('Image1',1)" onMouseOut="swapImage('Image1',0)"> </map> <hr /> </body> </html>
お礼
ご回答ありがとうございます。 同じサイズの画像を切り替えているのですね。 大変参考になりました。