Foros del Web » Creando para Internet » Diseño web »

Mapas de Imagen

Estas en el tema de Mapas de Imagen en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 19/01/2007, 22:20
Avatar de kesioo  
Fecha de Ingreso: enero-2007
Ubicación: Capital Federal, Argentina
Mensajes: 137
Antigüedad: 10 años, 10 meses
Puntos: 2
Mapas de Imagen

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
  #2 (permalink)  
Antiguo 20/01/2007, 01:09
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
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
  #3 (permalink)  
Antiguo 20/01/2007, 13:57
Avatar de kesioo  
Fecha de Ingreso: enero-2007
Ubicación: Capital Federal, Argentina
Mensajes: 137
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: Mapas de Imagen

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:58.