ES6 - 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 el atributo usemap para el<img /> etiqueta y definido por <map> especial y <area> etiquetas de extensión.
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 adicional llamado usemap. El valor de lausemap atributo es el valor del atributo de nombre 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 para la imagen y generalmente sigue directamente después del elemento <img />. Actúa como un contenedor para los elementos <area /> que realmente definen los puntos de acceso en los que se puede hacer clic. El elemento <map> lleva solo un atributo, el atributo name, 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>La siguiente salida se muestra en la ejecución exitosa del código anterior. Puede sentir el concepto del mapa colocando el cursor del mouse sobre el objeto de la imagen.
