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

Imagen interactiva

Estas en el tema de Imagen interactiva en el foro de Diseño web en Foros del Web. Hola a todos, me gustaría hacer lo siguiente en una web: Dada una imagen, que al pasar por determinada zona de la misma se ilumine ...
  #1 (permalink)  
Antiguo 30/08/2006, 04:35
Avatar de Nietzsche  
Fecha de Ingreso: enero-2005
Ubicación: MALAGA-ESPAÑA
Mensajes: 228
Antigüedad: 12 años, 11 meses
Puntos: 0
Imagen interactiva

Hola a todos, me gustaría hacer lo siguiente en una web:

Dada una imagen, que al pasar por determinada zona de la misma se ilumine o subraye. Con imágenes de sustitución sólo se hacer que se cambie una imagen por otra completamente, pero no esto que os digo. He pensado tambien descomponer la imagen en varios trozos pero no se si es la mejor opcion.

Para que os hagais una idea mejor de lo que quiero lo podeis ver en:

www.casegar.com

Accedeis a "Catalogo de Productos" -> "Viviendas" y la ventana que se os abre muestra un edificio y tras hacer clic podemos pasar el cursor por los pisos, que se marcan en colores. Eso es lo que yo querría pero ahí esta hecho con flash y queria saber alguna opción con javascript, HTML o CSS.

Gracias y un saludo.
  #2 (permalink)  
Antiguo 30/08/2006, 09:05
Avatar de Stephano  
Fecha de Ingreso: junio-2005
Ubicación: Arequipa
Mensajes: 392
Antigüedad: 12 años, 6 meses
Puntos: 3
Java es la mejor opción.
  #3 (permalink)  
Antiguo 01/09/2006, 04:30
Avatar de Nietzsche  
Fecha de Ingreso: enero-2005
Ubicación: MALAGA-ESPAÑA
Mensajes: 228
Antigüedad: 12 años, 11 meses
Puntos: 0
¿Java? Te refieres a Javascript, no? O a un applet?
No se muy bien como va eso, si me das alguna web de referencia...
Gracias.
  #4 (permalink)  
Antiguo 01/09/2006, 05:12
Avatar de ludovico2000  
Fecha de Ingreso: noviembre-2003
Ubicación: Bizkaia
Mensajes: 1.315
Antigüedad: 14 años, 1 mes
Puntos: 2
Puedes hacerlo con javascript: pones unas capas invisibles sobre la imagen, y al pasar el mouse las haces visibles. Creo que leí algo en el foro de javascript, no sé si en las FAQ o en algún post, pero está ahi.
  #5 (permalink)  
Antiguo 01/09/2006, 05:16
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola:

Parece que te refieres a mapas de imágenes...

Tengo una página que puede servirte: Creación de áreas en imágenes

Debes seleccionar la imágen a la que quieres añadir areas y seguir las instrucciones... (la verdad es que debes tomarte tu tiempo porque aún está en construcción)

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 12/09/2006, 11:32
Avatar de Nietzsche  
Fecha de Ingreso: enero-2005
Ubicación: MALAGA-ESPAÑA
Mensajes: 228
Antigüedad: 12 años, 11 meses
Puntos: 0
Hola, seguí vuestros consejos y el resultado es este:

http://www.hercusa.es/es/pisos3.php?id_promocion=32

Me gustaría saber como puedo hacer que no tiemble la zona de seleccion.
Que si dejo el raton quieto se quede marcada.

El código que he usado es este:

Código HTML:
 <img src="../imagenes/promociones/sinai.jpg" width="262" height="267" usemap="#mapa" style="position: relative; margin: 0; top: 0; left: 0;"/>;
<img name="planta1" src="../imagenes/pisos/sinai_p1.jpg" width="262" height="267" style="position: absolute; top: 49; left: 97; margin: 0; visibility: hidden;"/>;
<img name="planta2" src="../imagenes/pisos/sinai_p2.jpg" width="262" height="267" style="position: absolute; top: 49; left: 97; margin: 0; visibility: hidden;"/>;
<img name="planta3" src="../imagenes/pisos/sinai_p3.jpg" width="262" height="267" style="position: absolute; top: 49; left: 97; margin: 0; visibility: hidden;"/>;
<img name="planta4" src="../imagenes/pisos/sinai_p4.jpg" width="262" height="267" style="position: absolute; top: 49; left: 97; margin: 0; visibility: hidden;"/>;
<img name="planta5" src="../imagenes/pisos/sinai_p5.jpg" width="262" height="267" style="position: absolute; top: 49; left: 97; margin: 0; visibility: hidden;"/>;
					           
<script type='text/javascript'>
function mostrar(cosa, estado) {
 document.images[cosa].style.visibility = (estado) ? 'visible':'hidden';
}
</script>

<MAP NAME="mapa">
<AREA SHAPE=POLY COORDS="21,195,12,230,212,223,214,183,21,195" HREF="./planta1.php" onmouseover='mostrar("planta1", true)' onmouseout='mostrar("planta1", false)' ALT="planta1">
<AREA SHAPE=POLY COORDS="27,154,18,189,215,176,216,134,27,154" HREF="./planta2.php" onmouseover='mostrar("planta2", true)' onmouseout='mostrar("planta2", false)' ALT="planta2">
<AREA SHAPE=POLY COORDS="35,121,28,150,214,128,216,90,35,121" HREF="./planta3.php" onmouseover='mostrar("planta3", true)' onmouseout='mostrar("planta3", false)' ALT="planta3">
<AREA SHAPE=POLY COORDS="48,90,29,115,212,85,213,55,48,90" HREF="./planta4.php" onmouseover='mostrar("planta4", true)' onmouseout='mostrar("planta4", false)' ALT="planta4">
<AREA SHAPE=POLY COORDS="33,85,215,48,239,17,99,47,73,31,42,40,36,86,33,85" HREF="./planta5.php" onmouseover='mostrar("planta5", true)' onmouseout='mostrar("planta5", false)' ALT="planta5">
<AREA SHAPE=default HREF="#">
</MAP> 
Las imagenes jpg de las plantas no son mas que la original con la franja señalada para cada planta.

A ver si me echais una mano.
Muchas gracias.
  #7 (permalink)  
Antiguo 12/09/2006, 13:08
Avatar de ludovico2000  
Fecha de Ingreso: noviembre-2003
Ubicación: Bizkaia
Mensajes: 1.315
Antigüedad: 14 años, 1 mes
Puntos: 2
Prueba aplicando la función a las img planta1 planta2 etc, ya que cuando una de éstas se muestra, el ratón deja de estar sobre la imagen del edificio y está sobre la pintada, con lo que ejecuta onmouseout y apaga la pintada, apareciendo de nuevo sobre la de fondo y ejecutando onmouseover, así hasta el infinito. en resumen: haz que sea lo que está arriba lo que hace de gatillo para la función.
  #8 (permalink)  
Antiguo 12/09/2006, 14:57
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola:

Estos días trabajé en un proyecto similar y para simplificar y/o mejorar el efecto, apliqué el mapa sobre una imagen transparente superpuesta a todas... incluso podría ser de un solo pixel pero ampliada con las dimensiones...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 13/09/2006, 03:00
Avatar de ludovico2000  
Fecha de Ingreso: noviembre-2003
Ubicación: Bizkaia
Mensajes: 1.315
Antigüedad: 14 años, 1 mes
Puntos: 2
...y como dice caricatos también te evitas ese parpadeo "raro"...
  #10 (permalink)  
Antiguo 13/09/2006, 03:51
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola:

La página en donde aplico el efecto está en construcción: http://www.ensenat.net/poligonos.php, el mapa se aplica a una imagen transparente que está encima de una pila de imagenes y capas superpuestas...

El código es un poco más complejo, pero supongo que en tu caso no sería necesario alterarlo.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
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 13:29.