Test MAP 2
Paragraphe 1
Titre du paragraphe
Pour que ce soit responsive, on utilise un max de valeur en %, les valeurs top, left sont le point haut gauche de la zone, width et height donne la surface de la zone
J'ai laissé le fichier html complet, c'est plus pratique pour établir les zones car il n'y a pas d'autre façon que de tatonner.
Il faut un éditeur comme notepad++ et un navigateur, quand c'est satisfaisant il faut suivre les commentaires en italique
Titre du paragraphe
<html>
<head>
<style>
nav {
position: relative;
max-width: 800px;
}
#monimg01 { /* s'il y a plusieurs images à 'zoner' incrémenter cette valeur */
width: 100%; /* l'image s'adaptera à la largeur du conteneur nav */
}
#img1 { /* il y a 3 blocs , 1 par zone, pour ajouter un bloc, incrémenter #img */
position: absolute;
border: solid; /*lorsque les réglages seront terminés, entourer cette ligne comme celle du dessous */
/* border: solid; */
top: 27%;
left: 23%;
width: 15%;
height: 18%;
}
#img2 {
position: absolute;
border: solid;
top: 45%;
left: 45%;
width: 18%;
height: 18%;
}
#img3 {
position: absolute; /* toute la partie entre <style> et </style> est à placer dans le head de la page*/
border: solid;
top: 63%;
left: 72%;
width: 15%;
height: 18%;
}
</style>
<script type="text/javascript">
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
var afficherImg = function(monimage) { /*toute la partie entre <script> et </script> ainsi que <nav> et </nav>*/
var myimg = document.createElement("img"); /*sont à placer dans un champ html en supprimant ce qui est en gras*/
myimg.src = monimage; /*sans oublier les images dans les fichiers additionnels */
myimg.style.position = "absolute";
myimg.style.top = tempY + "px";
myimg.style.left = tempX + "px";
myimg.style.width = "20%"; //largeur de l'image
myimg.style.height = "auto"; //hauteur de l'image
myimg.id = "myimg";
document.body.appendChild(myimg);
flag = 1;
}
var cacherImg = function() {
document.body.removeChild(document.getElementById("myimg"));
}
function getMouseXY(e) {
if (IE) {
tempX = event.clientX + document.body.scrollLeft;
tempY = event.clientY + document.body.scrollTop;
}
else
{
tempX = e.pageX - 50; // décalage horizontal par rapport à la souris
tempY = e.pageY + 20; // décalage vertical
}
document.show.MouseX.value = tempX;
document.show.MouseY.value = tempY;
return true;
}
</script>
</head>
<body>
<!-- ici il faut remplacer les noms des images et leur chemin, le mieux est de les placer dans les fichiers additionnels du champ html , s'il y a plus d'images, incrémenter les valeurs comme pour les blocs -->
<nav>
<img id="monimg01" src="pompeipianta.jpg" />
<a id="img1" onmouseover="afficherImg('image1.png');" onmouseout="cacherImg();"></a>
<a id="img2" onmouseover="afficherImg('image2.png');" onmouseout="cacherImg();"></a>
<a id="img3" onmouseover="afficherImg('image3.png');" onmouseout="cacherImg();"></a>
</nav>
</body>
</html>
Variante
Si vous voulez que votre image soit également cliquable et amène vers une page, modifiez les dernières lignes du type
<a id="imgx" onmouseover=.............></a> par <a id="imgx" href="adresse-de-la-page.html" onmouseover=.........></a>