PERSONALIZA TU BLOG-2: CÓMO CREAR UN MAPA DE IMAGEN

Hoy vamos a ver cómo hacer un mapa de imagen, fácil y rápido, utilizando el sitio http://www.image-maps.com.

Los mapas de imagen son aquellos que nos permiten agregar varios enlaces en una misma imagen. 

Mira a qué me refiero, haciendo clic en el siguiente ejemplo:

Facebook Tumblr Linkedin Image Map

Puedes utilizar esta herramienta para hacer cualquier menú del blog: iconos de redes sociales, categorías, “acerca de mí”…, de una forma más creativa y personalizada. 

Personaliza tu blog-2: Cómo crear un mapa de imagen

Necesitarás la URL de la imagen que vas a utilizar. Recuerda que para conseguirla debes cargarla a la librería multimedia, o algún otro sitio de alojamiento como photobucket.

1. Entra al sitio: www.image-maps.com

2. Ingresa la URL y comienza a crear tu mapa

hacer_image_map1

3. Clic en “continue to next step”

4. Selecciona “Rectangle”

hacer_image_map3

5. Sitúa el rectángulo donde quieras añadir el enlace, y completa la información

Personaliza tu blog-2: Cómo crear un mapa de imagen

6. Cuando hayas añadido todos los enlaces, haz clic en “Get Your Code”.

7.  Clic en “HTML Code”

hacer_image_map5

¡Y LISTO!

Ahora ya puedes pegar el código en un widget de textoy disfrutar de tu nuevo mapa de imagen.

NOTA 1: El código generado, por defecto, abre los enlaces en la misma ventana. Si quieres que tus enlaces se abran en una ventana nueva, recuerda que puedes usar target=”_blank”. Mira cómo agregarlo aquí.

NOTA 2: Para este propósito, los mapas de imagen no son considerados la mejor práctica, son un camino fácil, que hay que usar con moderación.

Ten en cuenta que:

  1. La imagen que utilices debe ser liviana para que no demore en cargarse, al momento de navegar en la página.
  2. El enlace debe poder reconocerse a simple vista; que el visitante sepa que ahí puede hacer clic.
  3. Las descripciones hay que hacerlas siempre; con <title> para que el lector pueda saber que la imagen es un enlace y hacia dónde lo llevará, y con <alt>, para indicárselo a los navegadores y buscadores.

Eso es todo, espero que les haya gustado y les sea de utilidad. Ya saben que pueden dejar sus dudas.

¡Hasta pronto!

 

Anuncios

12 comentarios en “PERSONALIZA TU BLOG-2: CÓMO CREAR UN MAPA DE IMAGEN

  1. Interesante. Estuve buscando si la etiqueta “map” estaba incluida en la especificación de HTML5, y sí lo está. Podemos entonces usarla libremente. Felicitaciones, muy bonito todo y bien explicado.

  2. Muy buena explicación, pero esto ya lo sabía. ¿Podrías explicarme como poner un mapa de imagen en el blog? En una entrada, como el ejemplo primero que has puesto. ¡Muchas gracias!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s