- 締切済み
矩形のホットスポットにマウス・オーバーしたときに
る画像の矩形のホットスポットにマウス・オーバーしたときに、それにリンクされた別の画像をpopup表示させるやり方を教えてください。
- bobo_0827
- お礼率79% (185/232)
- JavaScript
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
n=y*8+x 40個のメッシュ
n=y*8+y キック？ 私のほうが勉強不足なようで、意味がわかりません;_; イベントトラップみたいな？ document.onmousemove = imagePopup; か？ あちこちマウスイベントをつけるより このほうがトレンド？！
解説する気力はありません。自分で解析してみてね <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>
- yambejp
- ベストアンサー率51% (3827/7415)
＞画像の矩形のホットスポット とは、画像全体にonmouseoverしてよいのでしょううか、それとも画像の一部に ホットスポットをおきたいのでしょうか？ また、popup自体、別のウィンドウをひらいてHTMLを開くのでしょうか、 それともdivなどで表示できればよいのでしょうか？ もっとも単純なのは・・・ <img src="hoge1.jpg" onmouseover="window.open('hoge2.jpg')"> ちなみにpopup自体、もっとも嫌われるweb技術の一つですから、 あまり多用するとアクセス率が急激に落ちる可能性もあります。
補足
画像の一部に複数のホツトスポツトを設けてあります。 別のウインドウを開くのではなく、ホットスポットにマウスオーバーしたときに画像のみpopupさせたいのですが。
補足
ご回答ありがとうございます。 map[7]='右上の文字・・ホット・スポットの右上の座標? でしょうか。 マウスオーバーしたとき、このjavascriptはどこでキックされるのでしょうか。 ありがとうございました。