Mapear una imagen b?sicamente significa poner varios enlaces en diferentes partes de una sola imagen. Para ello se usa la etiqueta <MAP> y la etiqueta <AREA> que define las ?reas de la imagen donde se agregan los enlaces. Estas ?reas contienen las coordenadas de la parte seleccionada de dicha imagen, coordenadas que para la mayor?a de los mortales nos parecen que est?n en chino; se trata de establecer la distancia en pixeles en la que se encuentra alguna ?rea de la imagen, y en esas coordenadas se agrega el enlace que s?lo ser? accesible en dicha ?rea.
Por ejemplo, en la siguiente imagen hay 8 enlaces, y a cada uno de ellos s?lo se le puede dar click en su respectiva ?rea.
Por ejemplo, en la siguiente imagen hay 8 enlaces, y a cada uno de ellos s?lo se le puede dar click en su respectiva ?rea.
Establecer las coordenadas de cada ?rea puede resultar de lo m?s estresante, cansado, agotador, y de locos; por suerte hay servicios online que permiten hacer todo esto sin necesidad de contar pixeles, medir, ni nada.
Hay varios, pero hoy hablaremos de Image-Maps. Esta herramienta online nos permite mapear nuestras im?genes de forma sencilla y con las opciones necesarias.
Primero habremos subido nuestra imagen a un alojamiento y pegamos la URL de la imagen en el ?rea correspondiente. Tambi�n nos da la opci?n de buscar la imagen del ordenador pero siempre es mejor subirla nosotros mismos para tener la seguridad de que nuestra imagen estar? disponible todo el tiempo, ya que las im?genes que subas desde ah? ser?n eliminadas despu�s de 24 horas.
Despu�s que hemos dado click en Continuar comenzaremos al mapeado de la imagen, para ello da click derecho y se activar? un men?.
Create Rect es para formar un rect?ngulo, Create Poly para formar un pol?gono, y Create Circle para formar un c?rculo. Elige la que necesites y traza la forma para seleccionar el ?rea de la imagen a la que le pondr?s el enlace.
Inmediatamente aparecer? una ventana para que agregues la URL que tendr? esa ?rea, adem?s de un title, alt, e ID si lo deseas. En la pesta?a Events podr?s establecer si el enlace se abre en una nueva pesta?a o no.
Una vez que has terminado de establecer las ?reas de tu imagen da click derecho y en el men? selecciona Get Code.
En la pesta?a HTML Code hasta abajo, ver?s tu c?digo. C?pialo y p�galo en una entrada o gadget de tu blog y listo.
Hay varios, pero hoy hablaremos de Image-Maps. Esta herramienta online nos permite mapear nuestras im?genes de forma sencilla y con las opciones necesarias.
Primero habremos subido nuestra imagen a un alojamiento y pegamos la URL de la imagen en el ?rea correspondiente. Tambi�n nos da la opci?n de buscar la imagen del ordenador pero siempre es mejor subirla nosotros mismos para tener la seguridad de que nuestra imagen estar? disponible todo el tiempo, ya que las im?genes que subas desde ah? ser?n eliminadas despu�s de 24 horas.
Despu�s que hemos dado click en Continuar comenzaremos al mapeado de la imagen, para ello da click derecho y se activar? un men?.
Create Rect es para formar un rect?ngulo, Create Poly para formar un pol?gono, y Create Circle para formar un c?rculo. Elige la que necesites y traza la forma para seleccionar el ?rea de la imagen a la que le pondr?s el enlace.
Inmediatamente aparecer? una ventana para que agregues la URL que tendr? esa ?rea, adem?s de un title, alt, e ID si lo deseas. En la pesta?a Events podr?s establecer si el enlace se abre en una nueva pesta?a o no.
Una vez que has terminado de establecer las ?reas de tu imagen da click derecho y en el men? selecciona Get Code.
En la pesta?a HTML Code hasta abajo, ver?s tu c?digo. C?pialo y p�galo en una entrada o gadget de tu blog y listo.
Como puedes ver es una herramienta f?cil de usar, y con las opciones necesarias para mapear tus im?genes online y crear banners, carteles promocionales, o cabeceras con m?ltiples enlaces. En el caso de esto ?ltimo, si deseas hacer una cabecera que tenga m?ltiples links, sigue los primeros pasos de esta entrada, s?lo que, en lugar de a?adir el script que ah? se menciona, pondr?as el c?digo de tu imagen mapeada.
Otras opciones para mapear im?genes online son:
Online Image Map Editor
Mappa Tool
Polygonal Image Map Generator
HTML Map Creator
No comments:
Post a Comment