Mapas de Imagen

kesioo · #1 (**permalink**) 19/01/2007, 22:20

Buenas!!

alguien me puede explicar como se hacen estos objetos?, estuve buscando pero no encontre mucho (o mejor dicho no muy claro). En realidad no caze del vamos con cual es mejor (illustrator, photoshop, flash - estos son los que tengo).

Como lo estaba editando en el photoshop tengo una imagen del país entero (en color claro) en un layer, y despues un grupo con los layers pertenecientes a c/ provincia (en un color más obscuro).

Se entiende no?, cuando el mouse pase por arriba, que se active el layer de la provincia (que resaltara al resto del pais, el cual tendra un tono mas suave). Y abajo que vaya apareciendo el nombre de la provincia (con atributos de texto editable de ser posible).

lo que encontre fue para hacer mapas de imagen al estilo dreamweaver (hotspot creo que es).

gracias a todos!!
kesioo

caricatos · #2 (**permalink**) 20/01/2007, 01:09

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

kesioo · #3 (**permalink**) 20/01/2007, 13:57

muchas gracias caricatos!!

me voy a poner a ver si puedo hacerlo funcionar... javascript no es mi fuerte pero no esta de mas leer al respecto...

salu2