Calificación:
  • 1 voto(s) - 5 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Image Maps: como mapear imágenes online
#1
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.

[Imagen: itC7VGh.png]

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.

[Imagen: image-maps1.png]

Después que hemos dado click en Continuar comenzaremos al mapeado de la imagen y se activará un menú.

[Imagen: kGJkSIX.png]

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.

[Imagen: ZYscTOG.png]
Una vez que has terminado de establecer las áreas de tu imagen da click derecho y en el menú selecciona Get Code.

[Imagen: AurVyRG.png]

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.

[Imagen: image-maps5.png]

Como puedes ver es una herramienta fácil de usar, y con las opciones necesari 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 mapeadas para mapear tus imágenes online y crear banners, carteles promocionales, o cabeceras con múltiples enlaces.

Otras opciones para mapear imágenes online son:
*Online Image Map Editor
*Mappa Tool
*Polygonal Image Map Generator
*HTML Map Creator

VIA: http://oenica.com/posts/ebooksytutoriale...nline.html
Firma editada por Moderación: La imagen excede las dimensiones permitidas.
#2
gran tutorial estaba buscando esto durante varios dias, eso da un muy buen aspecto en las webs
saludos y gracias
WWW
#3
Wow, excelente siempre me pregunté como se hacia y hasta ahora pensaba que era con Photoshop asi que gran hallazgo por mi parte jaja, ahi te dejo rep Gran sonrisa.

Saludos !
MIS OBJETIVOS EN SKYLIUM

-Llegar a 50   mensajes [✔]
-Llegar a 100 mensajes [✔]
-Llegar a 250 mensajes [✔]
-Conseguir 25 de reputacion []

#4
(25-06-2014, 09:47 PM)tucine escribió: gran tutorial estaba buscando esto durante varios dias, eso da un muy buen aspecto en las webs
saludos y gracias

(25-06-2014, 10:18 PM)Minikole escribió: Wow, excelente siempre me pregunté como se hacia y hasta ahora pensaba que era con Photoshop asi que gran hallazgo por mi parte jaja, ahi te dejo rep Gran sonrisa.

Saludos !

Me da gusto que les sirva la verdad mi intencion es traer post que le sirva a las personas como ustedes en este sitio, a como he dicho yo comparto y me gusta que la informacion llegue hasta las personas que necesitan informacion de este tipo pienso que todo debe de ser colectivo, bueno chicos no se es mi pensar ahora ya saben como se hace suerte Sonrisa
Firma editada por Moderación: La imagen excede las dimensiones permitidas.
#5
esta de lujo para los que no estamos acostumbrados a trabajar con vectores coordenadas y paranoias varias que a mi me dan bastante dolor de cabeza.
#6
Esta muy bien pero creo que es poco compatibles con navegadores viejos :/
#7
Excelente, con esto me ahorro el estres de estar haciendo pruebas en la imagen a cada rato, gracias por compartir... Lengua




SI TE LLAMA LA ATENCION UNA ESTRELLA... SIGUELA,
SI TE CONDUCE AL PANTANO... YA SALDRAS DE EL.
PERO SI NO LA SIGUES... TODA LA VIDA,
PENSARAS QUE ESA ERA TU ESTRELLA.




WWW
#8
excelente muchas gracias me preguntaba si se podía hacer esto de una manera mas fácil y mira donde lo vengo a encontrar.. gracias por tu aporte !
#9
(30-06-2014, 09:20 PM)mispracticas2009 escribió: Excelente, con esto me ahorro el estres de estar haciendo pruebas en la imagen a cada rato, gracias por compartir... Lengua

(30-06-2014, 11:31 PM)dazzaeth escribió: excelente muchas gracias me preguntaba si se podía hacer esto de una manera mas fácil y mira donde lo vengo a encontrar.. gracias por tu aporte !


Que bien que les sirva chicos mi objetivo es compartirles el contenido clasificado y hacerles que les llegue la informacion a ustedes me da gusto que les sirviera. y si por ahi alguno tiene razon no es compatible con navegadores viejo pero por favor ya estamos grandecitos para usar esos navegadores, suertes a todos y no dejen de compartir Gran sonrisa
Firma editada por Moderación: La imagen excede las dimensiones permitidas.
#10
Buen aporta, aunque prefiero ocupar el Dreamweaver, sin embargo esta es una buena herramienta online para los principiantes que apenas van comenzando en el mundo del html, saludos.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Probar el funcionamiento de la Webcam Online Oscar1980 4 94 02-10-2018, 03:30 PM
Último mensaje: efbsfcd
  Editor de imagenes Canva WMasterT 2 83 06-09-2018, 04:48 AM
Último mensaje: jcifuentes
  Webs de editores de imágenes Sprystate 3 97 08-08-2018, 02:06 PM
Último mensaje: fercho alb
  Grabador de pantalla online alieninc 24 650 07-08-2018, 07:18 PM
Último mensaje: GonzaloMacedo
  Optimizadores y Redimensionadores de imágenes Sprystate 7 187 06-08-2018, 11:00 PM
Último mensaje: ReyNexo23
Arcoiris Editor de imagenes - Pixlr WMasterT 4 186 31-07-2018, 07:09 PM
Último mensaje: ivanloga
  Edicion de PDF Online WMasterT 15 476 20-07-2018, 04:01 PM
Último mensaje: WMasterT
  SUPER COMPRESOR DE IMAGENES alieninc 9 426 25-12-2017, 11:00 PM
Último mensaje: betiko2424
  Editor video Online fercol 16 1,418 02-02-2017, 09:23 AM
Último mensaje: fercol
  [upload]Excelente web para subir imagenes yuma2009 20 1,033 03-01-2017, 08:21 PM
Último mensaje: gassip



Usuarios navegando en este tema: 1 invitado(s)