イメージマップ内のロールオーバーで切替後の画像のURL設定について。下記のURLでは、３枚の画像を用意し、tab1,tab2,tab3,と三つのタブの場所にそれぞれイメージマップを利用してロールオーバー効果を持たせ、tabにカーソルが乗ったとき３枚の画像が切り替わるようになっています。 http://sky.geocities.jp/make_it_move/index.html そこで、皆さんにお聞きしたいのは、切り替わった画像それぞれに異なったリンクを指定する方法です。ソースは function imgHover(path){ var target=document.getElementById('AreaMap'); var imagePath='./img/'+path; target.src=imagePath; } です。 area shape部分にはurlを指定出来るのですが、切り替わった画像の image1,image2,image3部分にも、tab部分と同じurlを指定して上げるには、どのようにすればいいのでしょうか？宜しくお願い致します。

イメージマップ内のロールオーバーで切替後の画像のURL設定について。

解決済

質問者：ogasan41
質問日時：2010/07/28 16:02
回答数：3件

イメージマップ内のロールオーバーで切替後の画像のURL設定について。
下記のURLでは、３枚の画像を用意し、tab1,tab2,tab3,と三つのタブの場所にそれぞれイメージマップを利用してロールオーバー効果を持たせ、tabにカーソルが乗ったとき３枚の画像が切り替わるようになっています。

http://sky.geocities.jp/make_it_move/index.html

そこで、皆さんにお聞きしたいのは、切り替わった画像それぞれに異なったリンクを指定する方法です。

ソースは
<SCRIPT type="text/javascript" >
function imgHover(path){
var target=document.getElementById('AreaMap');
var imagePath='./img/'+path;
target.src=imagePath;
}
</SCRIPT>

<body>
<img src="img/image1.jpg" id="AreaMap" alt="地図" width="825" height="300" usemap="#imagemap" border="0" />

<map name="imagemap" id="imagemap">
<area shape="rect" coords="554,16,811,105" href="ttp://www.yahoo.co.jp/" alt="" onmouseover="imgHover('image1.jpg')" >
<area shape="rect" coords="556,104,811,196" href="ttp://www.i-mezzo.net/" alt="" onmouseover="imgHover('image2.jpg')">
<area shape="rect" coords="556,195,812,287" href="ttp://www.kotaro269.com/" alt="" onmouseover="imgHover('image3.jpg')">
</map>
です。

area shape部分にはurlを指定出来るのですが、切り替わった画像の　image1,image2,image3部分にも、tab部分と同じurlを指定して上げるには、どのようにすればいいのでしょうか？

宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2010/07/29 17:50

＞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

通報する

- 0
- 件

通報する

No.2

回答者： yyr446
回答日時：2010/07/28 16:53

ちょこっとミス

var imagePath='./image/'+path;
じゃなくて
var imagePath='./img/'+path;
ですね。

この回答への補足

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

補足日時：2010/07/29 14:54

通報する

- 0
- 件

通報する

No.1

回答者： yyr446
回答日時：2010/07/28 16:41

まず、

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);
}
とします。