JavaScript - Carte d'image
Vous pouvez utiliser JavaScript pour créer une image map côté client. Les images cartographiques côté client sont activées parusemap attribut pour la balise <img /> et défini par des balises d'extension spéciales <map> et <area>.
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 de l'attribut usemap est la valeur de l'attribut name sur l'élément <map>, que vous êtes sur le point de rencontrer, précédée d'un signe dièse ou 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, lenameattribut, 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>Production
Vous pouvez ressentir le concept de la carte en plaçant le curseur de la souris sur l'objet image.