Hacer una imagen en Divs

[mpluss]

Hola qué tal.

Pues tengo una duda, recuerdan que las imágenes se pueden definir por zonas sensibles, ejemplo:

http://www.webestilo.com/html/cap6b.phtml

Lo que yo quiero hacer es algo similar.

Tengo una imagen del cuerpo humano, y al dar clic con el botón derecho en cierta zona me despligue un menú (efecto en ajax gracias a contextMenoo), como por ejemplo: doy clic en el ojo y se despliega un menú contextual con las enfermedades que están relacionadas como son miopia, astigmatismo, cataratas.

Ahora el problema que tengo es que contextMenoo utiliza divs para poder definir sus zonas y quiero que mi imagen yo la pueda dividir por zonas con los divs para poder realizar este efecto.

Ahora mi pregunta es si alguien sabe cómo puedo hacer que mi imagen tenga zonas definidas por divs para que funcione como deseo.

Desde ya muchas gracias !!!

[aarts]

Hola mpluss,

Si yo tuviera q hacer algo como lo que propones se me ocurririan 2 posibles soluciones:

Solucion 1:

Crear un div contenedor con tu imagen del cuerpo humano de background.
Luego rellenar el background con divs más pequeños que coincidan con las areas que quieres que sean interactivas. Por supuesto necesitarás mucha precisión pero no es imposible.


Solución 2:

Parecida a la anterior, pero esta vez cortaría la imagen principal en fragmentos mediante Fireworks o Photoshop con los que puedes exportar capas web.
Guardaria el documento en HTML y ya tienes la imagen tal y como la necesitas.


En ambos casos deberás dar IDs a cada corte de la imagen para que AJAX sepa qué es un ojo y qué un pie.

Espero que te sirva de algo. Si tienes dudas sobre esto me cuentas.

Un saludo!

[mpluss]

Iniciado por aarts

Hola mpluss,

Si yo tuviera q hacer algo como lo que propones se me ocurririan 2 posibles soluciones:

Solucion 1:

Crear un div contenedor con tu imagen del cuerpo humano de background.
Luego rellenar el background con divs más pequeños que coincidan con las areas que quieres que sean interactivas. Por supuesto necesitarás mucha precisión pero no es imposible.


Solución 2:

Parecida a la anterior, pero esta vez cortaría la imagen principal en fragmentos mediante Fireworks o Photoshop con los que puedes exportar capas web.
Guardaria el documento en HTML y ya tienes la imagen tal y como la necesitas.


En ambos casos deberás dar IDs a cada corte de la imagen para que AJAX sepa qué es un ojo y qué un pie.

Espero que te sirva de algo. Si tienes dudas sobre esto me cuentas.

Un saludo!

Muchas gracias por tu respuesta, voy a usar la primera solución que me has dado, ya que quiero agregar toda esa información (incluyendo la posición de cada área) a una base de datos, para que esta pueda ser modificada desde un back-end.

Y como soy nuevo usando divs (tan nuevo que aún no tengo idea de cómo hacer lo que me has dicho, pero estoy investigándolo), seguramente haré preguntas tal vez muy burdas.

Gracias de nuevo.

[caricatos]

Hola:

Con los mapas pueden hacerse muchas cosas... tal vez lo más sencillo es poner en el title de cada area la descripción... Creación de áreas en imágenes... o superponer capas y programar eventos. ejemplo...

Si algo de esto te sirve (y aún no se trata de Ajax... qie no sé si hace falta...) puedes ver el código, o te lo explico...

Saludos

[mpluss]

Bueno pues ya estoy haciendo algunas pruebas de cómo funcionaría y empecé por algo muy simple aqui pueden verlo:

http://www.paginasprodigy.com.mx/mpluss/menu/prueba3.html

Lo estoy haciendo como me ha dicho aarts, y es que en realidad lo necesito con divs id, por que cada parte del cuerpo necesita su propio menú el cuál se generará de una base de datos.

Caricatos también te agradezco mucho tu mensaje, pero ya llevaba un poco de trabajo cuando lo vi y mejor le seguí por el momento como lo estoy llevando, pero si ustedes aconsejan hacerlo de otra manera agradeceré muchísimo sus opiniones.

Gracias de nuevo y buen día !