イメージマップ内のロールオーバーで切替後の画像のURL設定方法

2010/07/28 16:02

このQ&Aのポイント

イメージマップ内のロールオーバーで切り替わる画像のURL設定方法を教えてください。
下記のURLでは、３枚の画像を用意し、タブの場所にそれぞれイメージマップを利用してロールオーバー効果を持たせています。
切り替わった画像それぞれに異なったリンクを指定する方法を教えてください。

ogasan41
お礼率50% (2/4)

JavaScript
回答数3
ありがとう数4

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2010/07/29 17:50 回答No.3

＞image側へカーソルを移動したときに、カーソルをリンクのカーソル＞のままにするにはどのようにすればいいのでしょうか？ CSSで cursor:pointer; を指定するなどで可能です。どうせならイメージマップの機能をそのまま利用する例。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <html> <head><title>test</title> <style type="text/css"> img#AreaMap { width:825px; height:300px; border:0; } </style> <script type="text/javascript">  </script> </head> <body> <img id="AreaMap" src="img/image1.jpg" alt="地図" usemap="#imagemap"> <map name="imagemap" onmouseover="imgHover(event, this)"> <area shape="rect" coords="10,10,555,290" href="http://www.yahoo.co.jp/" alt=""> <area shape="rect" coords="554,16,811,105" href="http://www.yahoo.co.jp/" alt="" rel="image1"> <area shape="rect" coords="556,104,811,196" href="http://www.i-mezzo.net/" alt="" rel="image2"> <area shape="rect" coords="556,195,812,287" href="http://www.kotaro269.com/" alt="" rel="image3"> </map> </body> </html>

質問者

補足 2010/08/20 09:58

もしこれら三枚の画像を例えば６秒おきに自動で切り替え、ロールオーバーすると切り替えが止まり、カーソルが外れるとまた切り替えが始まるというようにするには、どのような変数を加えればいいのでしょうか？

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

yyr446
ベストアンサー率65% (870/1330)

2010/07/28 16:53 回答No.2

ちょこっとミス var imagePath='./image/'+path; じゃなくて var imagePath='./img/'+path; ですね。

質問者

補足 2010/07/29 14:54

ありがとうございます！図々しくも、もう一つお伺いしてもよろしいでしょうか？ image側へカーソルを移動したときに、カーソルをリンクのカーソルのままにするにはどのようにすればいいのでしょうか？

ログインすると、全ての回答が全文表示されます。

yyr446
ベストアンサー率65% (870/1330)

2010/07/28 16:41 回答No.1

まず、 onmouseover="imgHover('image1.jpg')"> の部分を onmouseover="imgHover('image1.jpg',this.getAttribute('href'))"> にしてください。 javascriptは function imgHover(path,href){ var target=document.getElementById('AreaMap'); var imagePath='./image/'+path; target.src=imagePath; target.onclick=(function(link){ return function(){ location.href=link; } })(href); } とします。

質問者