画像の特定のエリアにマウスをホバーすると別画像が出てきて、その画像にリンクを張りたい

何卒よろしくお願いいたします。

HTML・CSS等を利用して下記の動作をさせたいですが、どのようにGOOGLE検索等を行えば答えにたどり着けるかも不明な状態です。

どなたか詳しくご教授お願いできますでしょうか。

1.画像の特定のエリアにマウスをホバーする。
2.別の画像がホバーした際にピヨっと表示される。
(画像の上に小さい画像が表示されるイメージで、元画像が切り替わるイメージではないです。)
3.表示された画像をクリックすると別ページに飛べる。




どなたか詳しいかたよろしくお願いいたします。

No.3 ベストアンサー 回答者： yambejp 回答日時： 2018/12/04 17:43

どうしてもということなので、たとえばこう

<script>
window.addEventListener('DOMContentLoaded', function(e){
[].forEach.call(document.querySelectorAll('[data-src]'),function(x){
x.addEventListener('mouseover',function(e){
var img=document.createElement("img");
img.src=x.dataset["src"];
img.id="img1";
img.style="position:absolute;left:"+(e.pageX-10)+";top:"+(e.pageY-10)+";";
img.addEventListener('mouseout',function(){
img.parentNode.removeChild(img);
});
img.addEventListener('click',function(){
location.href=x.getAttribute("href");
});
document.querySelector('body').appendChild(img);
});
});
});
</script>
<svg width="300" height="90">
<polygon points="1,1 299,1 299,89 1,89" stroke="black" fill="gray"/>
<a href="ttps://www.google.com" data-src="ttps://placehold.jp/00ff00/000000/150x150.png?text=google"><text x="100" y="40" fill="lime" style="font-size:2em;">Beach</text></a>
<a href="ttps://www.yahoo.co.jp" data-src="ttps://placehold.jp/00ffff/000000/200x100.png?text=yahoo"><text x="50" y="60" fill="aqua" style="font-size:1.5em;">Sea</text></a>
<a href="ttps://oshiete.goo.ne.jp" data-src="ttps://placehold.jp/ffffff/000000/100x100.png?text=goo"><text x="180" y="70" fill="white" style="font-size:1.2em;">Cloud</text></a>
</svg>

※ttpsをhttpsに書き換えてください

この回答へのお礼

yambejp様

回答ありがとうございます。
ちょっと読んでみても不明点あるのですが、とりあえず実装させてみて、いろいろと自分で勉強しながら、やってみます。

本当にありがとうございます。

お礼日時：2018/12/04 17:46

No.2 回答者： yambejp 回答日時： 2018/12/04 17:06

サンプル見ましたが、テキストにホバーすると画像がでますが

画像を選ぼうとすると当然テキストのホバーがはずれるので
仕様が競合しており理論的には難しいですね
（それでもやりたいなら教えますが）

この回答へのお礼

２度目の回答ありがとうございます。
ご教授いただけないでしょうか。

よろしくお願いいたします。

お礼日時：2018/12/04 17:08

No.1 回答者： yambejp 回答日時： 2018/12/04 15:47

ピヨのイメージがわからないけど

クリックして飛ばす場合当然ホバーしないといけないので
最初からclickイベントを仕込んでおけばよいでしょう

この回答へのお礼

回答ありがとうございます。
下記のような形でhoverしたら、画像が出てきて、出てきた画像をクリックできるようにしたいです。
https://tenderfeel.xsrv.jp/jquery/292/

お礼日時：2018/12/04 16:40