Map 2

Avant de reprendre les codes précédents, mais au clic, je voudrais vérifier une solution peut-être plus simple, pour certain(e)s, qui savent créer une image transparente et en récupérer l'adresse.

En plaçant une image transparente sur une image, nous pouvons utiliser les outils lien, de la barre d'outils (maillon de chaîne): clic sur la zone.

<div style="width: 80vw; height: 92vh; margin: 2vh auto; background: url('https://ekladata.com/EzVkrN89Vow1-qI0Gmv0Td4iPxc.jpg'); background-size: 80vw 92vh; border: 0.3vh ridge white;"><a href="https://ekladata.com/ZgZUBeN9EBtjg5LOftTrL8gqb2M.jpg"><img id="map1" src="https://ekladata.com/B2pmIfbH7QJUhE-3K7iYFKVwmyk@100x100.png" alt="" /></a></div>
<style><!--
#map1{position:absolute; z-index:5; width:15vw; height:10vh; border:0.4vh dotted white; transform:translate(35vw,28vh);}
#map1:hover{border:none;}
--></style>

Voyons en reprenant le clic sur une zone input: l'avantage est les possibilités de décoration de l'image qui s'affiche, ce que n'offre pas l'outil  maillon de chaîne.

<div style="width: 80vw; height: 92vh; margin: 2vh auto; background: url('https://ekladata.com/EzVkrN89Vow1-qI0Gmv0Td4iPxc.jpg'); background-size: 80vw 92vh; border: 0.3vh ridge white;"><input id="map2" type="text" />
<p id="map2a">&nbsp;</p>
</div>
<style><!--
#map2{position:absolute; z-index:5; width:15vw; height:10vh; background:none; border:0.4vh dotted white; transform:translate(35vw,28vh);}
#map2a{position:absolute; z-index:1; width:60vw; height:69vh; border-radius:50%; border:0.4vh ridge white; box-shadow:0vw 0vh 0.3vh black; background:url('https://ekladata.com/C1D-ozt4DPMw3GvVfmehJjuGmQs.jpg'); background-size:60vw 69vh; transform:translate(10vw,11vh); opacity:0; transition:all 1s linear;}
#map2:hover{border:none;}
#map2:focus ~ #map2a{opacity:1;}
--></style>