JavaScript - Mapa de imagen
Puede utilizar JavaScript para crear un mapa de imágenes del lado del cliente. Los mapas de imágenes del lado del cliente están habilitados por elusemap atributo para la etiqueta <img /> y definido por etiquetas especiales de extensión <map> y <area>.
La imagen que va a formar el mapa se inserta en la página usando el elemento <img /> como de costumbre, excepto que lleva un atributo extra llamado usemap. El valor del atributo usemap es el valor del atributo name en el elemento <map>, que está a punto de encontrar, precedido por una almohadilla o un signo de almohadilla.
El elemento <map> en realidad crea el mapa de la imagen y generalmente sigue directamente después del elemento <img />. Actúa como un contenedor para los elementos <area /> que realmente definen los hotspots en los que se puede hacer clic. El elemento <map> lleva solo un atributo, elnameatributo, que es el nombre que identifica el mapa. Así es como el elemento <img /> sabe qué elemento <map> usar.
El elemento <area> especifica la forma y las coordenadas que definen los límites de cada zona interactiva en la que se puede hacer clic.
El siguiente código combina mapas de imágenes y JavaScript para producir un mensaje en un cuadro de texto cuando el mouse se mueve sobre diferentes partes de una imagen.
<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>Salida
Puede sentir el concepto del mapa colocando el cursor del mouse sobre el objeto de la imagen.