Mapear imágenes online

Tweet about this on Twitter1Share on Facebook0Share on Google+1Share on LinkedIn0Pin on Pinterest0

A diferencia de la mayoría de post que escribo en éste blog, hoy no os voy a hablar de ningún componente de Joomla, sino que os voy a hablar de una página web cuya funcionalidad puede facilitarnos mucho una tarea, que si hay que hacerla manualmente, nos llevaría bastante tiempo.

Se trata de la página www.image-maps.com

logo_image_maps

Esta página nos permitirá mapear imágenes de una manera fácil y rápida. Creándonos el código necesario para su correcto funcionamiento. Tan solo tendremos que copiarlo en nuestra página web y funcionará.

Últimamente, han añadido una nueva funcionalidad. A parte del típico código de mapeo de imágenes usando el tag <map>, ahora podremos obtener nuestro código solamente creado con el html (sin <map>) y con css. De esta manera, podremos integrar nuestro código de mapeo en nuestras páginas de Facebook, ya que de la antigua manera no nos funcionaría.

FUNCIONAMIENTO
Lo primero que haremos es subir, temporalmente, la imagen que queramos maquetar a un servicio de imágenes online que tiene la web. Digo temporalmente, porqué en el código definitivo tendremos que cambiar la url de la imagen subida, por la url de la imagen que tenemos en nuestro servidor.

map1
Para ello le daremos en el botón Examinar marcado y seleccionaremos la imagen que queramos mapear. Seguidamente le daremos al botón Start Mapping….
A continuación se subirá la imagen al servidor y tendremos que esperar, para ello, unos 10 segundos. Clicaremos en el enlace marcado.

map2

Una vez ya tenemos la imagen subida tenemos que empezar a crear las áreas de nuestros enlaces. La manera más fácil, y la que yo siempre utilizo, es mediante la creación de rectángulos, se puede probar de hacer formas propias, pero realmente, las veces que lo he probado, no funciona correctamente.

map3
Nos aparecerán unos recuadros en la imagen. Con el ratón tendremos que seleccionar el área que queramos crear, moviéndola y haciéndola del tamaño que nosotros queramos. Ahí mismo podremos añadir el link de esta área del mapa y del título del enlace. Para guardar el área, clicaremos en SAVE. Seguidamente podremos crear el número de enlaces que queramos, siguiendo el mismo método.

map4
La aplicación tiene un apartado de funcionalidades avanzadas, donde podremos indicar el tipo de código que queramos obtener. Yo, normalmente, desmarco todas las opciones.

Una vez hayamos creado todas las áreas, clicamos en el botón de Get Your Code.

Como os he comentado antes, tenemos la opción de marcar si queremos que nuestro código que aparezca, sea compatible con Facebook, o sea, que no contenga la etiqueta “<map>”.

map5

En la parte superior de la página, nos aparecerá el tipo de código que queremos. Seleccionaremos HTML code.

map6
De esta manera ya nos aparecerá el código definitivo. Tan solo tendréis que cambiar, como he comentado anteriormente, la url de la imagen, por la que hay en vuestro servidor, y copiar el código en el archivo de vuestra página web.

map7

Tweet about this on Twitter1Share on Facebook0Share on Google+1Share on LinkedIn0Pin on Pinterest0
<< Post Anterior
Post Siguiente >>

11 Comments

  • Xavi

    Reply Reply 29 enero, 2011

    Rectifica la url de la web sobre los mapas de imagen http://www.imagemaps.com. En la url que has puesto le falta el guión medio para que diriga correctamente a la web que anuncias. Saludos.

  • admin

    Reply Reply 31 enero, 2011

    Muchas gracias por avisar Xavi, ya está modificada la url.
    Saludos

  • Felipe Rodriguez

    Reply Reply 15 febrero, 2011

    Muy interesante esta información y aprovecho para preguntarte lo siguiente, según tu experiencia con esta herramienta podrías confirmarme si el resultado final es posible subirlo a una pagina que esta hecha en joomla?

  • felipe

    Reply Reply 16 febrero, 2011

    El resultado de lo que ofrece esta herramienta se puede agregar en cualquier pagina web?

    • Carles Feliu

      Reply Reply 16 febrero, 2011

      Respondo a los dos Felipes.
      Por supuesto que podéis agregarlo a cualquier página web, incluso aunque haya sido hecha en joomla.
      El código que genera, ya sea html usando la etiqueta , o bien el generado para facebook, usando css, funcionará en todas las páginas.
      Si tenéis cualquier duda, comentádmela.

  • Felipe Rodriguez

    Reply Reply 16 febrero, 2011

    Gracias Carles Feliu por tu contestación.
    Tengo dos dudas mas:
    Una vez creado el mapa de imagen se puede agregar a un sitio web en modo local?
    Tendrás un sitio web con un mapa de imagen que hallas hecho?

    Saludos, desde México.

  • felipe

    Reply Reply 17 febrero, 2011

    He revisaado el enlace que me proporcionaste de facebook y lo que observo es que si aplica el mapa de imagen por que la imagen enlaza a diferentes sitios, pero lo que considero que falta y que es muy comun en las imagenes mapeadas es el efecto que se genera cuando se ponen el puntero en cierta parte de la imagen.

    • Carles Feliu

      Reply Reply 17 febrero, 2011

      No entiendo a qué te refieres con lo del efecto que se genera cuando se pone el puntero en la imagen y que dices que falta.
      ¿Me lo podrías comentar?

  • Livier

    Reply Reply 12 agosto, 2011

    no sirve esa página.. hay otra IGUAL DE SENCILLA de utilizar??
    Me da algo!!!. como se le ocurre estropearse esa página!!!

  • Marina

    Reply Reply 25 septiembre, 2015

    Hola Carlos. No soy programadora asi que mis dificultades pueden ser mayores. En el programa he logrado mapear una imagen que subi a photobucket. Al solicitar el código me aparecen varios (todas las áreas que marqué en la imagen) y ahora no sé cómo llevar la imagen a mi blog. No entiendo lo de la sustitución

Leave A Response

* Denotes Required Field