seleccionar partes de una foto para mostrar informacion

waldragon · #1 (**permalink**) 31/03/2013, 01:27

Buenas, tengo que hacer un sitio que consiste en una imagen de 1000px de ancho por 600px de alto, es una foto aerea de un establecimiento lechero y quieren que al pasar el mouse sobre alguna de las instalaciones (oficina, tambo, galpones, etc) se muestre un cuadro flotante con informacion de ese lugar y un enlace que llevaria a distintas paginas internas del sitio con mas info de ese lugar...

... podrian sugerirme algo para buscar que me ayude a lograr eso? gracias.

dontexplain · #2 (**permalink**) 31/03/2013, 01:44

Con html

Utiliza un mapa de imagen.

Puedes usar esto para ayudarte a hacerlo.

Con js

Usa el evento mouseover, mousemove, mouseleave, mouseenter para determinar cuándo entró el ratón dentro del área de imagen y cuándo movió el ratón dentro del área de imagen y las propiedades clientY y clientX entre otras para averiguar la posición exacta del ratón.

waldragon · #3 (**permalink**) 31/03/2013, 23:29

genial, en esta ocasion voy a usar el editor online, pero luego leere los otros para aprender como se hace manualmente, muchas gracias por tu ayuda

caricatos · #4 (**permalink**) 01/04/2013, 00:03

Hola:

Te paso más info: javascript: rollover en mapas.

Aparte tengo una aplicación similar a la que te pasó dontexplain: Capturar áreas en imágenes, pero solo vale para imágenes con colores planos (por eso no te lo había pasado). La peculiaridad de esta última herramienta es que los polígonos los detecta automáticamente (no he visto otra app similar en la web).

Saludos

waldragon · #5 (**permalink**) 01/04/2013, 15:05

Cita:

Iniciado por caricatos

Hola:

Te paso más info: javascript: rollover en mapas.

Aparte tengo una aplicación similar a la que te pasó dontexplain: Capturar áreas en imágenes, pero solo vale para imágenes con colores planos (por eso no te lo había pasado). La peculiaridad de esta última herramienta es que los polígonos los detecta automáticamente (no he visto otra app similar en la web).

Saludos

muchas gracias, muy buen aporte pero me resulta mas facil con el que me paso dontexplain, aunque me gustaria poner una seccion en la administracion donde puedo ir creando las capas, ya arme algo pero me faltaria la parte que selecciona los puntos y los copia automaticamente en un textarea el que luego guardaria en la base de datos para luego ir mostrandolas dinamicamente, es que son muchas imagenes y varias areas en cada, podrias decirme como tomas los puntos y los vas copiando en el cuadro de texto? gracias.

caricatos · #6 (**permalink**) 01/04/2013, 16:00

Hola:

La otra página que te comenté es esta: Mapas de imágenes, es algo viejecilla... desde luego que no existían las librerías, así que es más fácil de mirar el código, pero en este caso simplemente es enviar un formulario a un iframe desde un control image (te recuerdo que es una página antigua... en mi pc es del 2005).

Como nota adicional, para más usos de las coordenadas, hoy mismo subí este apunte: Polígonos: svg vs. canvas. En esa página he escrito bastantes cosas sobre mapas que tal vez te interesen.

Saludos

emprear · #7 (**permalink**) 01/04/2013, 17:52

Agrego una recomendación, a la que le estoy dando bastante uso ultimamente, la creación de mapas y hacer un highligth es muy sencilla

http://code.google.com/p/svg-edit/

puede instalarse standalone, como extensión de Firefox, Opera ó Chrome, incluso en linea
http://svg-edit.googlecode.com/svn/t...vg-editor.html (Chrome, FF y Opera)
Demos
http://foros.emprear.com/svg/fdw.svg
http://foros.emprear.com/svg/tota.svg2.html
Saludos