20/01/2007, 01:09
|
 | Moderador | | Fecha de Ingreso: abril-2002 Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años Puntos: 1284 | |
| Re: Mapas de Imagen
Hola:
Lo que suelo hacer en estos casos es superponer a la imagen normal todas las demás imágenes con el fondo transparente y solo el área que quieres resaltar en visible (pero la capa oculta)... y encima de todas las superpuestas una imagen transparente con el mapa...
Código:
<html>
<head>
<title>
mapas
</title>
<script type="text/javascript">
function mostrar(cosa, estado) {
document.images[cosa].style.visibility = (estado) ? 'visible':'hidden';
}
</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; visibility: hidden;' />
<img name='pentagono' src='http://www.caricatos.net/mapas/pentagono.gif' style='position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;' />
<img name='circulo' src='http://www.caricatos.net/mapas/circulo.gif' style='position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;' />
<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'
onmouseover='mostrar("cuadrado", true)'
onmouseout='mostrar("cuadrado", false)'
href='#' >
<area name='pentagono' shape='poly' coords='66,10,87,5,100,24,85,42,64,33' alt='pentágono'
onmouseover='mostrar("pentagono", true)'
onmouseout='mostrar("pentagono", false)'
href='#' >
<area name='circulo' shape='circle' coords='205,61,10' alt='círculo'
onmouseover='mostrar("circulo", true)'
onmouseout='mostrar("circulo", false)'
href='#' >
</map>
</body>
</html>
Para verlo funcionar, cópialo y pëgalo en esta página: Probador de scripts
Saludos 
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo |