Abrir imagen al pasar por una parte de otra imagen

karlos_ace · #1 (**permalink**) 09/05/2015, 06:18

Bueno, es mi primer post, asi que intentare ser claro.
Estoy haciendo un curso de desarrollo de aplicaciones web y estamos ahora en la parte de javascript y tenemos que hacer una pagina "en condiciones". Yo la estoy haciendo sobre formula 1 y tal. Bueno, al tema:
Se me ha ocurrido hacer que al pasar por determinas partes de una imagen de un coche, por ejemplo las ruedas, se visualice otra imagen, sin perder la antigua, donde salga una rueda en grande y un texto. Lo de la imagen y el texto lo metere en un div que tendre oculto, aun no se si con visibility o con display. Mi duda existencial, de momento, es como hacer que al pasar el raton por la rueda de la imagen, salte la funcion para mostrar la otra imagen.
No se si me he explicado bien.
Escucho todas las respuestas y agradezco todos los comentarios e informacion, porque todo es bienvenido.
Gracias

IsaBelM · #2 (**permalink**) 09/05/2015, 07:11

parece que te refieres a hacer un zoom de imágenes
http://www.forosdelweb.com/f179/apor...ml#post4640450

karlos_ace · #3 (**permalink**) 12/05/2015, 16:31

Perdona que no haya contestado antes. Entre el fin de semana y unas cosillas que tenia que hacer no he podido contestar antes. Ante nada, gracias por el interes. Lo veo excesivamente complejo para mis pocos conocimientos.
La idea es que al pasar por una seccion en concreto de una imagen (por ejemplo de un formula1), al pasar por una rueda se abra una imagen, al pasar por el aleron se abra otra imagen diferente, asi por algunas partes solo del coche. No es exactamente un zoom, porque la imagen que se abre es diferente a la imagen de fondo. El tema es como puedo hacer por javascript o jquery que seleccione una parte de la imagen.
No se si me he explicado bien, tengo una imagen que es coche, que es el fondo, otra que es rueda, otra que es volante, otra que es motor, otra que es aleron, etc. Lo que pretendo hacer es que al pasar el raton por la rueda de la imagen de fondo, se abra la imagen rueda, y asi sucesivamente.
si ves que el tema es muy complejo, cierra el tema y ya pensare otra cosa.

NueveReinas · #4 (**permalink**) 12/05/2015, 21:51

Puedes hacer algo así con Adobe Edge Animate. Una composición basada en CSS3 y jQuery.

caricatos · #5 (**permalink**) 13/05/2015, 00:00

Hola:

Tal vez te sirva un mapa con un área por cada elemento. Si tu imagen es de colores planos, puedes usar mi aplicación para capturar áreas... lo del ratón es simplemente un rollover...

Saludos

karlos_ace · #6 (**permalink**) 14/05/2015, 01:37

Graias por contestar tan rapido y por el interes. Da gusto estar en un foro en donde ayudais tanto y tan rapido a la gente.
NueveReinas el programa este no lo he usado nunca, echare un ojo por youtube a ver como va.
caricatos las coordenadas del mapa se pueden recoger por javascript? Lo de los colores planos a que te refieres? La imagen es un png en color con el fondo transparente. Si me pones la funcion tuya lo pruebo en este puente.

NueveReinas · #7 (**permalink**) 14/05/2015, 01:50

El mayor problema de la mapa - área - coordenadas es que no responsive.

karlos_ace · #8 (**permalink**) 14/05/2015, 02:32

cierto. no habia caido

caricatos · #9 (**permalink**) 14/05/2015, 08:09

Hola:

No entiendo eso de lo adaptable (lo siento, no me suena bien eso de responsivo)... supongo que la imagen será de tamaño fijo

... igual que el mapa y areas...

Para imágenes en porcentaje hubiera aconsejado las svg.

Saludos

karlos_ace · #10 (**permalink**) 15/05/2015, 03:42

caricatos, me puedes explicar un poco lo de las svg, porque la idea es que la pagina sea responsive. Gracias

caricatos · #11 (**permalink**) 15/05/2015, 17:33

Hola:

Cita:

Iniciado por karlos_ace

caricatos, me puedes explicar un poco lo de las svg, porque la idea es que la pagina sea responsive. Gracias

Primero tienes que explicarme lo de adaptable (responsive no me gusta)...

La pareja map, area es html estándar, o sea legal, o sea que funcionan en todos los navegadores...

Saludos

PHPeros · #12 (**permalink**) 16/05/2015, 06:53

Se refiere a que las áreas no se mapean de igual forma en un dispositivo móvil que en escritorio:

http://www.forosdelweb.com/f4/href-c...magen-1127593/

karlos_ace · #13 (**permalink**) 19/05/2015, 07:59

Agradezco todas las respuestas, pero se me ha jod... el ordenador, asi que estare un tiempo sin poder probarlo. Cuando lo arregle y pruebe las cosas vuelvo a escribir.
Gracias a todos

karlos_ace · #14 (**permalink**) 26/05/2015, 03:28

Creo que he encontrado una solucion facil. He colocado divs vacios, los coloco en las partes que me interesan del coche y con el background color:transparente ya no se ven. Asi, ya tengo la referencia para abrir la imagen, que hay dos posibilidades. Crear un div independiente con el texto y la imagen por cada parte del coche (serian 5) y ocultarlas con display: none y al pasar con el raton, cambiar a display:block, o desde javascript cargar en una funcion un archivo externo txt y otro jpg, pasar el valor a un <p> y a un <img> vacio. (mas bien seria con jquery, no?)
Que os parece, un poco cutre pero funcional, no? Es que he empezado hace poco y no controlo demasiado.

Gracias, y a criticar, que seguro que lo mejorais