矩形のホットスポットにマウス・オーバーしたときに

締切済

質問者：bobo_0827
質問日時：2008/10/11 11:16
回答数：4件

る画像の矩形のホットスポットにマウス・オーバーしたときに、それにリンクされた別の画像をpopup表示させるやり方を教えてください。

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.1

回答者： yambejp
回答日時：2008/10/11 15:57

＞画像の矩形のホットスポット

とは、画像全体にonmouseoverしてよいのでしょううか、それとも画像の一部に
ホットスポットをおきたいのでしょうか？

また、popup自体、別のウィンドウをひらいてHTMLを開くのでしょうか、
それともdivなどで表示できればよいのでしょうか？

もっとも単純なのは・・・
<img src="hoge1.jpg" onmouseover="window.open('hoge2.jpg')">

ちなみにpopup自体、もっとも嫌われるweb技術の一つですから、
あまり多用するとアクセス率が急激に落ちる可能性もあります。

この回答への補足

画像の一部に複数のホツトスポツトを設けてあります。
別のウインドウを開くのではなく、ホットスポットにマウスオーバーしたときに画像のみpopupさせたいのですが。

補足日時：2008/10/11 16:16

通報する

- 0
- 件

通報する

No.2

回答者： _pipi_
回答日時：2008/10/11 16:02

解説する気力はありません。

自分で解析してみてね
<html>
<body>
<p>
<img src="hoge.jpg" id="imgmenu" width="600" height="400">
</p>
<div id="popup" style="border:1px #f00 solid;display:none;position:absolute;background-color:#fee">
<a href="" id="plink"></a><br><img src="" width="120" height="80" id="pimg">
</div>

<script>
document.onmousemove = imagePopup;
var map=[];
map[7]='右上の文字,./img/xxx7.gif,htp:ww.xx.co.jp';
map[32]='左下の文字,./img/xxx7.gif,htp:ww.xx.co.jp';

function imagePopup(e){
var bx=8,by=5;
var o=e?e.target:event.srcElement; if(o.id!='imgmenu') return;
e=e?e:window.event;
var n=((e.clientY-o.offsetTop)/o.offsetHeight*by|0)*8+((e.clientX-o.offsetLeft)/o.offsetWidth*bx|0);
if(map[n]){
var buf=map[n].split(',');
document.getElementById('plink').href=buf[2];
document.getElementById('plink').innerHTML=buf[0];
document.getElementById('pimg').src =buf[1];
document.getElementById('pimg').alt =buf[1];
document.getElementById('popup').style.left=e.clientX+'px';
document.getElementById('popup').style.top=e.clientY+'px';
document.getElementById('popup').style.display='block';
} else {
document.getElementById('popup').style.display='none';
}
}
</script>