Foros del Web - Imagen interactiva

Foros del Web (http://www.forosdelweb.com/)

- Diseño web (http://www.forosdelweb.com/f91/)

- - Imagen interactiva (http://www.forosdelweb.com/f91/imagen-interactiva-421476/)

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.

Java es la mejor opción.

¿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.

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.

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 :arriba:

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.

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.

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 :arriba:

...y como dice caricatos también te evitas ese parpadeo "raro"... :arriba: :adios:

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 :arriba: