ES6 - Carte d'image

Vous pouvez utiliser JavaScript pour créer une carte d'image côté client. Les images cartographiques côté client sont activées par l'attribut usemap pour<img /> balise et défini par <map> spécial et <area> balises d'extension.

L'image qui va former la carte est insérée dans la page en utilisant l'élément <img /> comme d'habitude, sauf qu'elle porte un attribut supplémentaire appelé usemap. La valeur duusemap attribut est la valeur de l'attribut name sur l'élément <map>, que vous êtes sur le point de rencontrer, précédé d'un dièse ou d'un signe dièse.

L'élément <map> crée en fait la carte pour l'image et suit généralement directement après l'élément <img />. Il agit comme un conteneur pour les éléments <area /> qui définissent réellement les hotspots cliquables. L'élément <map> ne porte qu'un seul attribut, l'attribut name, qui est le nom qui identifie la carte. C'est ainsi que l'élément <img /> sait quel élément <map> utiliser.

L'élément <area> spécifie la forme et les coordonnées qui définissent les limites de chaque hotspot cliquable.

Le code suivant combine des imagemaps et JavaScript pour produire un message dans une zone de texte lorsque la souris est déplacée sur différentes parties d'une image.

<html> 
   <head> 
      <title>Using JavaScript Image Map</title>
      
      <script type="text/javascript"> 
         <!--  
            function showTutorial(name) {  
               document.myform.stage.value = name  
            }  
            //
         --> 
      </script> 
   </head> 

   <body> 
      <form name = "myform"> 
         <input type = "text" name = "stage" size = "20" /> 
      </form> 
      
      <!-- Create  Mappings --> 
      <img src = "//images/usemap.gif" alt = "HTML Map" 
         border = "0" usemap = "#tutorials"/> 
      <map name = "tutorials"> 
         <area shape = "poly" 
            coords = "74,0,113,29,98,72,52,72,38,27" 
            href = "/perl/index.htm" alt = "Perl Tutorial" 
            target = "_self" 
            onMouseOver = "showTutorial('perl')" 
            onMouseOut = "showTutorial('')"/>
         <area shape = "rect"   
            coords = "22,83,126,125"  
            href = "/html/index.htm" alt = "HTML Tutorial" target = "_self"   
            onMouseOver = "showTutorial('html')"         
            onMouseOut = "showTutorial('')"/>  
         <area shape = "circle"  coords = "73,168,32"  
            href = "/php/index.htm" alt = "PHP Tutorial" target = "_self"   
            onMouseOver = "showTutorial('php')"       
            onMouseOut = "showTutorial('')"/> 
      </map> 
   </body>
   
</html>

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus. Vous pouvez ressentir le concept de la carte en plaçant le curseur de la souris sur l'objet image.