Image Maps: para mapear imágenes online

26 de mayo de 2014 76 comentarios ,
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.

Ciudad BloggerFacebookGoogle PlusTwitterRss FeedMetatags GeneratorYouTubeInstagram

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.


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


76 comentarios en:

" Image Maps: para mapear imágenes online "

  1. Había visto que lo utilizaban en las cabeceras de algunos blogs y me preguntaba cómo se hacía. Gracias por el tutorial Potro :)

    ResponderEliminar
  2. Muy interesante, lo llevare a la practica.
    Gracias Potro.

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  4. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  5. gracias ,potro , esta perfecto ;), y tengo una pregunta, no sabes , como poner una imagen en El Pie De Pagina ? osea Abajo ? gracias :D

    ResponderEliminar
    Respuestas
    1. Hola, depende de cómo quieras la imagen, ya sea que esté como fondo, o que sea un elemento aparte. Si es como fondo entonces agrega esto en tu plantilla:

      footer {
      background: url(URL de la imagen);
      }

      Si es como elemento entonces localiza la etiqueta <footer> y debajo de ella agrega el código de tu imagen:

      <img src="URL de la imagen" />

      Eliminar
    2. del potro y si es en wordpress tambien funciona lo de colocar las imagenes en el pie de pagina y en el fondo el codigo funciona para ambos o que

      Eliminar
  6. ohh esta genial , y asi se puede poner los enlaces en la cabecera ..
    Me da mucha alegria volver a verte por aqui , te echabamos de menos
    ademas tengo unas dudas que resolver con unos meta , y robots
    si puedes ayudarme seria genial , gracias , Alex

    ResponderEliminar
    Respuestas
    1. Muchas gracias Alex, y claro que sí, en lo que pueda ayudarte con gusto lo haré ;)

      Eliminar
    2. Eres un cielo , de verdad , siempre me has ayudado , y no se como agradecertelo de verdad , por que , me da no se que , que siempre te pido ayuda y tu tan amablemente me ayudas ...... te cuento , no se que ha pasado en mi blog que :
      1. tengo visitas de blogs de ucrania, rusia etc y de sitios porno
      2. Google no me incluye en sus listas , osea si buscas mi blog , pues no sale en google
      3.el feed , tampoco
      4.y las fotos , ohhh por que google ha puesto fotos de mi blog en la busqueda de mi blog , si las almaceno en otro lugar, la verdad ya no se que hacer, pedi ayuda a blogger pero ni modo , ni me leen, podrias verificar mi blog ?, y cuando puedas decirme que pasa ?? por favor , te lo agradeceria montones .
      mi blog es : www.mademoisellealex.com
      un saludo desde Paris

      Eliminar
    3. Hola de nuevo Alex. Tu blog sí está indexado en Google, y por lo tanto también aparece en los resultados de búsqueda. En el siguiente enlace puedes comprobar lo anterior:
      site:www.mademoisellealex.com

      Tu feed, también está habilitado y funcionando:
      http://www.mademoisellealex.com/atom.xml

      De modo que cualquier persona, o robot, puede visitar tu blog sin ningún obstáculo. Si te preocupa que te visiten de esos lugares puedes poner el blog en modo privado pero, sólo podrían verlo a quienes les hayas enviado una invitación por correo electrónico, lo cual puede ser un problema si tus visitas son bastantes. Además, si el blog está como privado el feed no funcionaría y quien te tenga en su blogroll no sabría cuándo has publicado una nueva entrada. Todo esto representaría una baja considerable en las visitas.

      Yo personalmente no haría caso al detalle de esos visitantes. Si son personas que hacen spam, o te molestan a través de los comentarios puedes poner los comentarios en moderación y así no serán publicados los comentarios que consideres ofensivos.

      Saludos hasta la Ville lumière.

      Eliminar
  7. ¡Muy útil! Siempre me había preguntado como se hacía... ¡Gracias!

    ResponderEliminar
  8. siempre tuve curiosidad sobre como se realizaba gracias potro. Tengo una duda, como puedo poner el fondo de mi blog negro y aparte poner una imagen, pero que no cubra todo el fondo? como la de esta pagina http://ultimateclassicrock.com/
    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola ElRosz Zapien, sólo agrega un color e imagen al body de tu blog, por ejemplo:

      body {
      background: #000 url(URL de la imagen) no-repeat;
      }

      Eliminar
    2. Muchas Gracias potro, Al fin casi mi blog esta completo.

      Eliminar
    3. Hola Potro;
      Aprovechando la respuesta a esta pregunta que te hace Rosz, si yo quisiera poner el fondo del blog en blanco #fff pero quisiera que siempre que se pinchara en el (como un click perdido del ratón) te redirigiese a otra pagina. Como lo podría hacer? Un saludo y Gracias por tus aportes!!

      Eliminar
    4. Tanto como que se abra sólo si das click fuera del contenido del blog no creo que sea posible. Puedes hacer que dando click en cualquier parte de la página abra un link, pero sería en cualquier parte, incluyendo el texto de las entradas, gadgets, etc.

      Eliminar
  9. Hola Potro, muchas gracias por esta información. Creo que este tutorial se puede combinar muy bien con el de Oloman en donde explica como poner una página estática como página de inicio, porque podemos armar una imagen y allí poner enlaces que redireccionen a distintas partes del blog.
    Un abrazo.

    ResponderEliminar
  10. Potro! Te queria hacer una pregunta, busque y busque una entrada o una solucion para esto pero no la encontre. Y tampoco habia un tema referido al mismo como para seguir mi pregunta en el. El tema es el siguiente... Yo quisiera SUBIR el gadget, o mas bien dicho, LOS siguientes gadgets: El texto con marquesina que se encuentra debajo del Menu, el S3S Slider (marco con imagenes) y la Imagen con un texto en blanco y negro (imagen de color azul). En realidad mi idea es subir un poco mas, cuestion de que queden mas juntintos y no haya ese espacio un tanto distante que los separa, en resumen arrimarlos mas a los gadgets pero obviamente para arriba, y de esta manera que TAMPOCO quede el espacio debajo de los 3 gadgets que te nombre, entonces seria subir tambien todo lo de abajo, osea LAS ENTRADAS y la SIDEBAR. Podrias decirme como hacerlo porfavor? Mil gracias de antemano, estare esperando tu respuesta!. FasteN

    ResponderEliminar
    Respuestas
    1. Hola FasteN, localiza el ID de esos gadgets y pon estos estilos:

      #ID .widget, #ID .widget, #ID .widget {
      padding:0;
      margin:1px;
      }

      Donde dice #ID pondrías el ID de cada uno de tus gadgets. Saludos.

      Eliminar
    2. Inmensidad de Gracias Potroooooooooooo!!!. Muchisimas gracias de verdad, siempre en todas, un abrazo inmenso!

      Eliminar
    3. Hmmm Potro, ya utilize las ID en el codigo que me pasaste y siguen estando en el mismo lugar... Que sera?

      Eliminar
    4. Prueba entonces de esta forma:

      #ID.widget, #ID.widget, #ID.widget {
      padding:0;
      margin:1px;
      }

      Es decir, que no haya espacio entre el ID del gadget y el .widget

      Eliminar
    5. Este comentario ha sido eliminado por el autor.

      Eliminar
    6. Listo, funciono de 10. Perfecto! Muchisimas gracias Potrillo

      Eliminar
  11. aahhh... Ahora entiendo (gracias a ti). Siempre me preguntaba cómo podrían hacerse tales prácticas... Qué magnífica entrada, Potro! Muchísimas gracias. Un beso enorme.

    ResponderEliminar
    Respuestas
    1. Y es más fácil de lo que parece ¿no? :)

      Eliminar
    2. Sí, :).
      Pienso en poner uno con mi nombre y los títulos de los diferentes blogs/ diferentes actividades, y enlaces a mi perfil en las redes sociales, pero me da un poco de corte, jeje..
      XD

      Eliminar
  12. Elimine mi comentario porque ya solucione mi problema xD pero ahora tengo otro problema implemente la caja de comentarios de facebook que vi en tu otra publicación funciona bien pero el problema es que cuando le doy a la segunda pagina con la paginación la caja de comentarios aparece abajo de cada entrada como puedo hacer para que la caja se muestre solo cuando entras en la entrada o_O

    ResponderEliminar
    Respuestas
    1. Hola Adrian, deja el comentario en esa entrada para no desviarnos del tema de este post y además podamos darle el seguimiento adecuado. Saludos.

      Eliminar
  13. Me resulta muy practico para el colegio donde tenemos el blog, como siempre muchas gracias por la información.

    Un abrazo

    ResponderEliminar
  14. ok potro lo hare ahora mismo espero tu respuesta allá muchas gracias

    ResponderEliminar
  15. Hola Un saludo espero puedas contactarme me intersa saber si tu puedes optimizar mi blog te doy como admin para que puedas hacer modificaciones para que funcione mejor a cambio pondremos un Banner de tu blog talves aumente tu trafico unos 5 mil a 10 mil visitas diarias ?

    ResponderEliminar
    Respuestas
    1. Gracias, por el momento no ofrezco esos servicios, pero puedes visitar la sección de "Posicionamiento", quizá algún tema de ahí te pueda servir para tu blog. Saludos.

      Eliminar
  16. chapinez24@gmail.com es mi correo contactame

    ResponderEliminar
  17. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  18. Excelente, intentaré probarlo. Una consulta más ¿Por qué en escritorio, en el feed de mis publicaciones no aparece la imagen que suele aparecer en el lado izquierdo? Solo aparece "noreply" y no me agrada mucho. Agradezco tu ayuda. Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Verónica, quizá el feed no encontró la imagen, por eso no la muestra. En mi escritorio varias entradas de los blogs que sigo aparecen así (incluyendo esta entrada) aun cuando las entradas tienen imágenes. Cosa de Blogger supongo.

      Eliminar
    2. Okey Gracias. Tienes razón parece que es cosa de Blogger, pero con imagen se veían más estéticos. Gracias por responder. Saludos.

      Eliminar
  19. Excelente para lo que utilizan las imágenes en map.
    Una duda Potro, veo que tenes 4 anuncios de AdSense. Cuántos se permiten ahora?
    Saludos!

    ResponderEliminar
    Respuestas
    1. Se supone que 3, no sé porqué se ve uno de más, de hecho si no lo mencionas no me hubiera dado cuenta o.O

      Eliminar
  20. Hola Potro. ! fijate que he querido modificar el menu de paginas, osea cambiarlo de donde esta (abajo de la cabecera) a: arriba de la cabecera sabes o tienes un post que trate de eso? ya que busque en tu sitio y no lo he visto.

    ya segui el tutorial de este blog y no me queda
    http://bitacoramanzano.blogspot.com/2013/09/personalizar-menu-de-paginas-blogger.html

    y de echo ese es el estilo que busco. Gracias y espero me ayudes.

    ResponderEliminar
    Respuestas
    1. Hola Emanuel, sólo entra en la Edición de HTML y localiza el widget correspondiente al menú de Páginas, usualmente es así:
      <b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>...</b:widget>

      Córtalo y pégalo arriba del widget de la cabecera, que usualmente es así:
      <b:widget id='Header1' locked='true' title='Nombre de mi blog' type='Header'>...</b:widget>

      Eliminar
    2. mil gracias, ya lo estoy probando

      Eliminar
    3. no se por que siempre que lo muevo arriba me da error y es que me aparece en forma de lista y no en forma horizontal,

      Eliminar
    4. Entonces corta todo este código de tu plantilla:
      <div class='tabs-outer'>
      <div class='tabs-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
      </div>
      <div class='fauxborder-left tabs-fauxborder-left'>
      <div class='fauxborder-right tabs-fauxborder-right'/>
      <div class='region-inner tabs-inner'>
      <b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
      <b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>...</b:widget>
      </b:section>
      <b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
      </div>
      </div>
      <div class='tabs-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
      </div>
      </div>


      Y ponlo arriba de la etiqueta <header>

      Eliminar
    5. ya lo puse gracias me quedo muy guay

      Eliminar
  21. Excelente Post!!! pero tengo una duda, como lo pongo como cabecera? si no se puede poner en HTML? ayudaaa!!

    ResponderEliminar
    Respuestas
    1. Hola Jack, en la entrada se menciona eso.

      Eliminar
  22. Hola potro, aprovechaba esta oportunidad para pedirte una ayuda muy grande.. mi sitio www.tusfrases.eu es de imágenes, gif etc...pero quisiera pedirte alguna manera de poner un icono que indique encima de los GIF que es un GIF no se si me entiendas pero algo similar a 9gag.com porfavor ayúdame con eso Gracias por el articulo :3

    ResponderEliminar
    Respuestas
    1. Hola, a ver si me preparo una entrada sobre ello, ya van 5 personas que me piden lo mismo, así que será más fácil publicar un post ;)

      Eliminar
  23. Hola potro, he puesto la imagen en una página y se muestra más pequeña de lo que en realidad es (está a tamaño original, pero se ve más pequña), en cambio, el espacio del enlace sí que debe estar a tamaño real, se ve cuando paso el cursor, que el mismo enlace ocupa más de lo que debería en la imagen (no se si me expliqué...). He probado a mapear la imagen en dos de las páginas que nos citas, pero el problema sigue igual... ¿qué podrá ser?
    gracias!

    ResponderEliminar
    Respuestas
    1. Hola Andrea, ¿me puedes mostrar el blog o entrada donde tienes la imagen mapeada?

      Eliminar
    2. si, mira, aquí

      http://entrelugas.blogspot.com.es/p/viajes_13.html

      Eliminar
    3. Es porque tu plantilla tiene esto:

      .post img {
      max-width:640px;
      height:auto;
      }

      Eso indica que la imagen de las entradas no debe ser mayor a 640px, así que cualquier imagen más grande se queda hasta esa medida que está establecida.
      Puedes eliminar esos estilos si lo deseas y con eso se resolverá, o bien, quitar esos estilos y ponerlos en una condicional para que se ejecute en todas partes menos en las páginas.

      Eliminar
    4. Gracias potro, tan sencillo y no lo vi, qué haríamos sin ti

      Eliminar
  24. Muchas gracias, Potro! Esto es utilísimo, pues es una herramienta online, sin necesidad de instalar ningún programa en la PC.
    Hace tiempo traté de mapear imágenes manualmente, pero había que estar contando pixeles y se me hizo tan enredado que desistí. Con este método ahora sí es fácil.
    Quisiera saber qué es más conveniente usar, en lo que respecta a la velocidad de carga de una página: ¿o una sola imagen mapeada con varios links (como en el caso de tu ejemplo de esta entrada), o diferentes imágenes más pequeñas, con sus respectivos links individuales?
    Pregunto, porque en mi blog tengo un bloque de 16 cuadritos de imágenes individuales, con sus respectivos links en c/u, que dirigen a diversas secciones del blog. ¿Sería más funcional hacer una sola imagen más grande, con todas las pequeñas, y mapearla con los 16 links? ¿Cuál de las dos maneras cargaría más rápido en la página?
    Está aquí:
    www.alabadora.com
    Mil gracias de antemano.
    Saludos!

    ResponderEliminar
    Respuestas
    1. Hola Vicky. Yo me hubiera vuelto loco tratando de contar los pixeles y luego asignarlos al código. Mis respetos para quien lo haga manualmente.

      Yo diría que si la imagen final es muy grande entonces es más conveniente usar varias imágenes pequeñas, pero si la imagen final resulta ser entre chica y mediana entonces quizá la imagen mapeada sea mejor opción. Todo depende de qué tan grande (en dimensiones y peso) sea la imagen final.
      Siempre puedes hacer la prueba poniendo primero de una forma y ver qué tanto tarda en cargar tu blog, luego hacerlo de la otra forma y de igual manera ver el tiempo de carga, ahí verás qué método es el más conveniente para ti.

      ¡Saludos!

      Eliminar
    2. Gracias de nuevo por tus consejos. Los tendré presente. Voy a probar a ver qué me resulta más funcional entre ambas cosas.
      Saludos!!!

      Eliminar
  25. Hola potro, me parece genial que hayas retomado el rumbo y soy un seguidor tuyo desde ya hace varios años. Mira he hecho todo lo que dices arriba y a la hora de pegar a imagen mapeada en una entrada la imagen aparece pero no los enlaces. Es decir, la imagen que quiero mapear si aparece en la entrada pero al pasar el muose por encima no se activa ningun enlace. Que estoy haciendo mal o es que mi plantilla no me permite hacerlo.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Marcos. ¿Me puedes mostrar la entrada o blog donde lo has puesto? ¿me puedes decir qué pasos sigues para ponerlo?

      Eliminar
  26. Hola Potro, antes que nada te felicito por toda la valiosa información de tu blog y por la ayuda desinteresada que le prestas a todos tus seguidores. Tengo una duda, y estoy seguro que me puedes ayudar. Tengo el siguiente blog: http://gregpermipublishop.blogspot.com y quiero saber qué código debo añadir para crear submenús al menú que tengo situado en la parte superior? Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario Gregper. Es necesario quitar ese menú y poner uno que sí tenga subpestañas, ya después podrás cambiarle los colores para que se vea igual al actual. Saludos.

      Eliminar
  27. Hola Potro,
    Es posible ponerle el efecto pushbutton que ya tengo en otras imágenes al código de la imagen mapeada?

    ResponderEliminar
    Respuestas
    1. Hola, puedes ponérsela a todas las imágenes de tus entradas si lo deseas:

      .post-body img:hover {
      position: relative;
      top: 1px;
      left: 1px;
      }

      Si lo quieres exclusivamente para las imágenes mapeadas tendrías que editar tus entradas para ponerle una clase a esas imágenes y luego aplicar los estilos pushbutton a esa clase.

      Eliminar
  28. no sabia que existían estos servicios online tan útiles y fáciles de usar, gracias por la información..

    ResponderEliminar
  29. Hola, genial el artículo, pero más precisamente yo buscaba hacer lo mismo, pero para poner la imagen en el fondo de blogger, osea, como imagen de fondo. Quisiera poner una imagen de fondo, y que en cierta parte haya un link. ¡¡Gracias de antemano!! :)

    ResponderEliminar
    Respuestas
    1. Hola, el fondo del blog es una imagen con CSS, no con HTML, esto del mapeado de imágenes es HTML.

      Eliminar
  30. ¡Ah! Ok. Yo lo había visto en www.btrband.com y pensé que en blogger también se podía hacer. Igual, muchas gracias. :)

    ResponderEliminar
  31. ¡Ah! Ok. Yo lo había visto en www.btrband.com y pensé que en blogger también se podía hacer. Igual, muchas gracias. :)

    ResponderEliminar
    Respuestas
    1. ¿Te refieres a su cabecera? eso no es un mapeado, es sólo la imagen de la cabecera normal (la foto de los chicos), y el logo es el título del blog, sólo que en lugar de texto han puesto una imagen.

      Eliminar
  32. La verdad es que yo no se mucho de ésto, pero si tu dices que es así, será.Igual, yo creo que está como imagen de fondo, porque hice clic derecho en la imagen, puse ver imagen de fondo y me apareció como que fuera una imagen sola, en fin. Si yo quiero hacer algo parecido en blogger, ¿se puede?

    ResponderEliminar
    Respuestas
    1. Lo que pasa es que el título del blog lo han ubicado de tal forma que el enlace queda ubicado en el mismo lugar de la imagen. Si se te hace más fácil elimina el gadget de la cabecera, en lugar de ella pon un gadget HTML/Javascript y ahí pon el código de tu imagen mapeada.

      Eliminar
  33. gracias amigo, me sirvio mucho este post

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger