Retroceder   Foros del Web > Diseño de Sitios web > Web general

Respuesta
 
Herramientas Desplegado
Antiguo 30-ago-2006, 03:35   #1 (permalink)
Nietzsche está en el buen camino
 
Avatar de Nietzsche
 
Fecha de Ingreso: enero-2005
Ubicación: Orihuela-Alicante-ESPAÑA
Mensajes: 179
Enviar un mensaje por MSN a Nietzsche
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.
Nietzsche está desconectado   Responder Citando
Antiguo 30-ago-2006, 08:05   #2 (permalink)
Stephano está en el buen camino
 
Avatar de Stephano
 
Fecha de Ingreso: junio-2005
Ubicación: Arequipa
Mensajes: 393
Enviar un mensaje por ICQ a Stephano Enviar un mensaje por MSN a Stephano Enviar un mensaje por Yahoo  a Stephano
Java es la mejor opción.
Stephano está desconectado   Responder Citando
Antiguo 01-sep-2006, 03:30   #3 (permalink)
Nietzsche está en el buen camino
 
Avatar de Nietzsche
 
Fecha de Ingreso: enero-2005
Ubicación: Orihuela-Alicante-ESPAÑA
Mensajes: 179
Enviar un mensaje por MSN a Nietzsche
¿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.
Nietzsche está desconectado   Responder Citando
Antiguo 01-sep-2006, 04:12   #4 (permalink)
ludovico2000 está en el buen camino
 
Avatar de ludovico2000
 
Fecha de Ingreso: noviembre-2003
Ubicación: Bizkaia
Mensajes: 1.315
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.
ludovico2000 está desconectado   Responder Citando
Antiguo 01-sep-2006, 04:16   #5 (permalink)
Moderador
caricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradable
 
Avatar de caricatos
 
Fecha de Ingreso: noviembre-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 12.434
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
caricatos está desconectado   Responder Citando
Antiguo 12-sep-2006, 10:32   #6 (permalink)
Nietzsche está en el buen camino
 
Avatar de Nietzsche
 
Fecha de Ingreso: enero-2005
Ubicación: Orihuela-Alicante-ESPAÑA
Mensajes: 179
Enviar un mensaje por MSN a Nietzsche
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.
Nietzsche está desconectado   Responder Citando
Antiguo 12-sep-2006, 12:08   #7 (permalink)
ludovico2000 está en el buen camino
 
Avatar de ludovico2000
 
Fecha de Ingreso: noviembre-2003
Ubicación: Bizkaia
Mensajes: 1.315
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.
ludovico2000 está desconectado   Responder Citando
Antiguo 12-sep-2006, 13:57   #8 (permalink)
Moderador
caricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradable
 
Avatar de caricatos
 
Fecha de Ingreso: noviembre-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 12.434
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
caricatos está desconectado   Responder Citando
Antiguo 13-sep-2006, 02:00   #9 (permalink)
ludovico2000 está en el buen camino
 
Avatar de ludovico2000
 
Fecha de Ingreso: noviembre-2003
Ubicación: Bizkaia
Mensajes: 1.315
...y como dice caricatos también te evitas ese parpadeo "raro"...
ludovico2000 está desconectado   Responder Citando
Antiguo 13-sep-2006, 02:51   #10 (permalink)
Moderador
caricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradablecaricatos es realmente agradable
 
Avatar de caricatos
 
Fecha de Ingreso: noviembre-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 12.434
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
caricatos está desconectado   Responder Citando
Respuesta

No hay votos aún.


Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder temas
No puedes subir archivos adjuntos
No puedes editar tus mensajes

BB code is Activado
Caritas están Activado
[IMG] está Activado
Código HTML está Desactivado


La Zona horaria es GMT -6. Ahora son las 16:23.


Message Board Statistics

LinkBacks Enabled by vBSEO 3.1.0

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93