Comunidad de diseño web y desarrollo en internet online

Marcar partes de una imagen desde un listado de enlaces

Citar            
MensajeEscrito el 08 Jun 2012 04:38 pm
Hola. Estoy haciendo un projecto en HTML5 y CSS3 donde tengo una imagen del cuerpo humano con números y al lado un listado numerado con nombres de partes del cuerpo.

Lo que busco es cómo hacer que al pulsar sobre alguna palabra del listado se encienda, marque, reencuadre en otro color ese número sobre la imagen. Lo de menos es que ese listado son además enlaces que irán a otra página para explicar esa zona del cuerpo con más fotos.

Sólo necesito la pista para buscar como hacerlo porque he encontrado información sobre los mapas de imágenes pero no es lo que busco ya que no quiero la imagen sensible sinó que a partir del listado me marque el mismo número en la imagen.

¿Qué debo usar? ¿alguna etiqueta nueva HTML5? ¿jQuery?

Muchas gracias
:wink:

Por superlativo

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 10 Jun 2012 09:12 pm

Adjunto una imagen por si no quedó clara mi explicación. Se trata de poner un listado junto a la imagen con todos los puntos ordenados. La idea es que al pasar sobre una palabra del listado se ilumine en el dibujo la situación de ese punto.

¿Alguien sabe que técnica debería usar que no sea Flash claro?

Estoy estancado y no se por donde tirar. También podría ser que esto que pido sea imposible de ejecutar en HTML5+CSS3+jQuery...

Saludos y muchas gracias
:wink:

Por superlativo

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 11 Jun 2012 02:23 am
se puede pero sería bastante tedioso, no se si habrá alguna forma mas fácil de hacerlo pero se me ocurre que podría ser así:

creas un div con las dimensiones de la imagen y la pones como fondo, después dentro de este, creas un div por cada punto del cuerpo que quieras representar, les asignas border-radius de 100%, así tomarán forma circular, luego ubicas todos los círculos en su respectiva ubicación con posición absoluta.

de esta forma ya tienes la imagen del cuerpo con sus respectivos puntos, ahora aparte creas la lista de las partes del cuerpo y con jquery asignas un evento hover a cada elemento de la lista para que al pasar por encima modifique alguna propiedad css para simular la iluminación de su respectivo punto.

esa sería la idea así muy por encima.

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 11 Jun 2012 06:09 am
Entendido. Felicidades HtrMancera te has explicado perfectamente.
La parte de jQuery es la que tendré que investigar como hacerla pero me has mostrado el camino a seguir.

Sigo abierto a otras posibles soluciones.

Muchas gracias a tod@s!
:wink:

Por superlativo

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 05 Jul 2012 08:06 am
Siguiendo la idea de HtrMancera he conseguido llegar hasta aquí:
http://bit.ly/LVcgYl

Pero tengo un problema que no se solucionar. Cuando paséis por encima de los puntos veréis que la barra de desplazamiento vertical del navegador se vuelve loca.

¿Que solución hay?

Por superlativo

15 de clabLevel



 

chrome
Citar            
MensajeEscrito el 05 Jul 2012 05:11 pm
#maps_container { overflow:hidden; }

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino  

Front-end Developer

chrome
Citar            
MensajeEscrito el 05 Jul 2012 07:02 pm
HtrMancer mil gracias! :wink:

Este es mi primer proyecto web en serio y como ves no es un proyecto sencillo para un principiante. No sólo he empezdo con HTML5 y CSS3 sinó que he empezado a tocar jQuery gracias a tu consejo y como ves he conseguido el efecto que buscaba. Pero también es verdad que he tardado 2 semanas para estas 3 páginas :oops:

Pero me queda muuuuucho para trabajar con soltura.

Tengo más problemas pero sigo buscando en google, pregunto en los foro sólo cuando estoy en callejón sin salida. Eso me permite aprender otras cosas por el camino mientras busco la solución inicial.

Saludos y gracias de nuevo
:wink:

Por superlativo

15 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.