Carte

Sur cette carte de démo, j'ai traité les départements de 2 façons différentes, 2 en polygone et 3 avec un cercle.

Script correspondant à la carte cliquable ci-contre à placer dans un champ HTML

<!-- max-width = largeur maxi de l'image sur l'écran-->
<!-- padding-bottom = hauteur / largeur(de l'image) x 100   arrondi à l'entier supérieur -->
<style>
.svg-container {
 background-color:transparent;
 display: inline-block;
 position: relative;
 width: 100%;
 max-width: 600px;
 padding-bottom: 123%;
 vertical-align: middle;
 overflow: hidden;
 }
.svg-content {
 display: inline-block;
 position: absolute;
 top: 0;
 left: 0;
 } 
 circle {
 stroke:rgba(1,1,1,0.5);
 }
 polygon:hover, circle:hover {
 fill:rgba(1,1,1,0.1);
 } 
 
</style>
<!-- les width(largeur) et height(hauteur) sont celles de l'image -->
<div style="max-height:738px">  <!-- ratio max-width x padding-bottom / 100 -->
  <div class="svg-container">
<svg version="1.1" viewBox="0 0 602 736" fill="transparent" preserveAspectRatio="xminYmin meet" class="svg-content">
<image id="cartehdf04" width="602" height="736" xlink:href="_fields/cartehdf04.png"></image>
<!-- département du Nord -->
 <a href="https://fr.wikipedia.org/wiki/Nord_(département_français)" target="_blank" rel="noopener" onmouseover="afficherImg('_fields/Lille.jpg');" onmouseout="cacherImg();">
    <polygon points="259,46,171,69,198,133,227,139,221,147,225,169,248,184,272,186,299,188,301,173,314,181,307,193,309,202,306,205,306,215,321,212,324,215,325,222,328,222,336,222,347,227,349,240,356,237,358,242,341,249,359,278,351,284,346,294,355,291,370,295,379,303,373,309,373,319,367,325,360,319,345,326,345,333,347,338,360,335,362,327,366,330,365,336,365,346,361,356,371,365,411,362,441,367,452,358,460,365,473,361,483,353,514,362,516,372,535,361,533,373,558,382,569,373,563,368,566,358,581,353,576,331,563,328,567,309,579,295,570,286,567,293,543,265,518,275,508,267,488,267,483,280,471,260,471,237,461,220,441,224,441,217,437,214,432,225,431,220,420,223,402,215,389,175,394,170,395,161,383,157,373,136,364,135,338,145,327,165,317,156,310,156,293,129,275,126,269,116,269,95,277,86,271,73,263,70,265,57,259,46">
  <title>Wikipedia Département du Nord</title></polygon>  
  </a>
   
<!-- département du Pas-de-Calais -->
 <a href="https://fr.wikipedia.org/wiki/Pas-de-Calais" target="_blank" rel="noopener" onmouseover="afficherImg('_fields/Arras.jpg');" onmouseout="cacherImg();">
    <polygon  points="168,68,114,81,88,105,76,107,79,129,77,149,71,152,75,208,70,248,74,254,84,257,89,267,120,262,137,273,144,273,143,281,167,292,166,301,171,309,185,308,207,306,213,308,219,303,234,304,245,311,235,317,225,335,235,342,250,331,263,333,288,345,292,335,302,339,297,357,318,352,317,363,350,356,361,359,365,330,364,329,360,335,349,338,344,326,361,316,368,321,372,317,376,307,380,299,372,295,355,291,348,294,357,274,342,248,358,241,356,236,351,240,347,226,338,222,327,222,321,213,307,215,305,205,308,200,307,193,312,180,303,174,299,187,250,184,225,170,220,147,224,137,200,133,168,68">
 <title>Wikipedia Département du Pas -de-Calais</title></polygon>
 </a>  
<!-- département de l'Aisne -->
 <a href="https://fr.wikipedia.org/wiki/Aisne_(département)" target="_blank" rel="noopener" onmouseover="afficherImg('_fields/Laon.jpg');" onmouseout="cacherImg();">
    <circle cx="452" cy="481" r="50"><title>Wikipedia Département de l'Aisne</title></circle>
 </a>  
<!-- département de la Somme -->
 <a href="https://fr.wikipedia.org/wiki/Somme_(département)" target="_blank" rel="noopener" onmouseover="afficherImg('_fields/Amiens.jpg');" onmouseout="cacherImg();">
    <circle cx="197" cy="404" r="50"><title>Wikipedia Département de la Somme</title></circle>
 </a> 
<!-- département de l'Oise -->
 <a href="https://fr.wikipedia.org/wiki/Oise_(département)" target="_blank" rel="noopener" onmouseover="afficherImg('_fields/Beauvais.jpg');" onmouseout="cacherImg();">
    <circle cx="225" cy="550" r="50"><title>Wikipedia Département de l'Oise</title></circle>
 </a>  
</svg>
  </div>  
</div>
<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) {
    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 = "30%";              //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>