Generador de mapeado en imágenes

Ayer hablábamos de generadores, en concreto de Isdntek.

Allí tenemos "Image Mapper" es un generador que añade enlaces sobre una imagen o dicho de otra forma es un mapeado de imágenes.

Oloman nos ofrecía una estupenda explicación que recomiendo porque nos explica con detalle la forma de crear las coordenadas mediante HTML,  me parece la forma más correcta de hacerlo sin embargo la facilidad de uso de este generador tienta bastante porque el resultado es el mismo y nos ahorramos muchos cálculos y tiempo. Aún así vuelvo a decir que es mucho más útil aprender a hacer las cosas que hacerlas por la vía fácil sin saber lo que estamos haciendo.

Para crear la imagen con mapeado con  "Image Mapper" lo primero que necesitamos claro está es una imagen a la que añadiremos distintos enlaces, sabemos qué partes de la imagen son un enlace porque le vamos a añadir un texto en el lugar que irá cada uno. El texto lo podemos añadir con cualquier editor por ejemplo el Paint que todos tenemos en el PC.

Para el ejemplo he añadido tres textos es decir uno para cada enlace a modo de menú aunque también es posible y original simplemente utilizando algunos motivos de la imagen.

Una vez tenemos la imagen la subimos a nuestro sitio de alojamiento puede ser una entrada del blog que guardaremos más tarde en borrador o directamente a nuestro álbum de Piacasa de esa forma conseguimos la url de la imagen.

1- Añadimos la url de la imagen en "Image URL" la imagen se mostrará en la parte inferior cuando marquemos el botón "Load Image".
2-  Añadimos la url del sitio que vamos a enlazar en "Link".
3- En "Caption" es el espacio para añadir el texto que se mostrará al pasar el puntero sobre el enlace.

4- Marcamos sobre "New Link" y se mostrará un cuadradito que arrastraremos sobre el lugar exacto que será el texto que va a hacer de enlace o link. En las esquinas de ese cuadradito con el botón izquierdo del ratón podemos estirar y encoger hasta dar con el tamaño indicado.

Para cada enlace repetimos los pasos 2 - 3 y 4 una vez terminamos marcamos sobre el botón "Make Code" y nos proporciona el código listo para copiar y pegar en cualquier sitio del blog que permita html.