Hola:
Retocando un poco el código de este otro mensaje:
Mapas de Imagen, preparé este otro cádigo para dejar zonas marcadas:
Código:
<html>
<head>
<title>
mapas
</title>
<style type="text/css" >
.mostrar {
visibility: visible;
}
.ocultar {
visibility: hidden;
}
</style>
<script type="text/javascript">
function mostrar(cosa) {
with(document.images[cosa])
className = (className == "mostrar") ? "ocultar":"mostrar";
}
</script>
</head>
<body >
<div id='contenedor_de_imagenes' style='position: relative;' >
<img src='http://www.caricatos.net/mapas/formasOpacas.gif' style='position: relative; margin: 0; top: 0; left: 0;' />
<img name='cuadrado' src='http://www.caricatos.net/mapas/cuadrado.gif' style='position: absolute; top: 0; left: 0; margin: 0' class='ocultar' />
<img name='pentagono' src='http://www.caricatos.net/mapas/pentagono.gif' style='position: absolute; top: 0; left: 0; margin: 0' class='ocultar' />
<img name='circulo' src='http://www.caricatos.net/mapas/circulo.gif' style='position: absolute; top: 0; left: 0; margin: 0' class='ocultar' />
<img name='transpa' src='http://www.caricatos.net/mapas/transparente.gif' style='position: absolute; top: 0; left: 0; margin: 0; visibility: visible;' usemap='#mapa' />
</div>
<map name='mapa' >
<area name='cuadrado' shape='rect' coords='8,8,30,32' alt='cuadrado'
href='javascript: mostrar("cuadrado");' >
<area name='pentagono' shape='poly' coords='66,10,87,5,100,24,85,42,64,33' alt='pentágono'
href='javascript: mostrar("pentagono");' >
<area name='circulo' shape='circle' coords='205,61,10' alt='círculo'
href='javascript: mostrar("circulo");' >
</map>
</body>
</html>
Luego para obtener el array de zonas "resaltadas", se recorrerían las imágenes existentes (por ejemplo entre la del fondo y la del mapa) y se consultaría su clase (className)... o se podría actualizar en cada selección/des-selección.
Saludos
