Test Map 4

Image responsive mappée

Paragraphe 2

Nunc sapien mauris, imperdiet ac pellentesque quis, facilisis non sapien. Maecenas congue vehicula mi, id luctus mi scelerisque nec. Cras viverra libero ut velit ullamcorper volutpat. Maecenas ut dolor eget ante interdum auctor quis sed nunc. Proin faucibus, mauris vitae molestie sodales, erat nisi rhoncus justo, in placerat turpis elit sed eros. Mauris molestie, justo et feugiat rutrum, arcu metus dapibus quam, sollicitudin tempus tortor dolor et nibh.

Script complet pour utiliser l'image seule

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">

<style>
.svg-container{
background-color:blue;
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 141.4%;
vertical-align: middle;
overflow: hidden;
}
.svg-content{
display: inline-block;
position: absolute;
top: 0;
left: 0;
}

rect, circle {
fill: transparent;
}
rect:hover, circle:hover {
fill:rgba(1,1,1,0.1);
}
</style>

<script>
document.onmousemove = getMouseXY;
var tempX = 0;
var tempY = 0;
var afficherImg = function(monimage,taille) {
var myimg = document.createElement("img");
myimg.src = monimage;
myimg.style.position = "absolute";
myimg.style.top = tempY + "px";
myimg.style.left = tempX + "px";
myimg.style.width = taille; //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) {
tempX = e.pageX - 50; // décalage horizontal par rapport à la souris
tempY = e.pageY + 20; // décalage vertical
return true;
}
</script>

</head>
<body>

<div class="svg-container">
<svg version="1.1" viewBox="0 0 794 1123" fill="transparent" stroke="green"
preserveAspectRatio="xminYmin meet" class="svg-content">
<image id="monimg1" width="794" height="1123" xlink:href="structure.png" ></image>
<rect id="img1" x="138" y="283" width="548" height="95"
onmouseover="afficherImg('struct01.png', '60%');" onmouseout="cacherImg();">
</rect>
<rect id="img2" x="228" y="398" width="395" height="38"
onmouseover="afficherImg('struct02.png', '50%');" onmouseout="cacherImg();">
</rect>
<rect id="img3" x="171" y="472" width="473" height="27"
onmouseover="afficherImg('struct03.png', '35%');" onmouseout="cacherImg();">
</rect>
<rect id="img4" x="164" y="508" width="486" height="52"
onmouseover="afficherImg('struct04.png', '50%');" onmouseout="cacherImg();">
</rect>
<rect id="img5" x="171" y="606" width="188" height="35"
onmouseover="afficherImg('struct05.png', '25%');" onmouseout="cacherImg();">
</rect>
<rect id="img6" x="171" y="645" width="188" height="245"
onmouseover="afficherImg('struct06.png', '25%');" onmouseout="cacherImg();">
</rect>
<a href="http://frangin62.free.fr" target="_blank">
   <rect x="190" y="661" width="55" height="57"><title>Aller sur frangin62.free.fr</title></rect>
   </a>
<rect id="img7" x="436" y="606" width="207" height="35"
onmouseover="afficherImg('struct07.png', '20%');" onmouseout="cacherImg();">
</rect>
<rect id="img8" x="436" y="645" width="207" height="245"
onmouseover="afficherImg('struct08.png', '25%');" onmouseout="cacherImg();">
</rect>
<a href="http://testtoweb.free.fr" target="_blank">
   <circle cx="490" cy="696" r="36"><title>Aller sur testtoweb.free.fr</title></circle>
   </a>
<rect id="img9" x="115" y="927" width="585" height="114"
onmouseover="afficherImg('struct09.png', '70%');" onmouseout="cacherImg();">
</rect>
</svg>
</div>

</body>
</html>