Un ejemplo sería la siguiente imagen, que tiene definidas cuatro zonas. Se trata de una única imagen y los colores son para hacer más "visibles" dichas zonas. Cada una de ellas está delimitada por un rectángulo que empieza en las coordenadas (x,y) y termina en la (x1,y1). La zona azul, abarca desde el pixel 0,0 hasta el 199,99, siendo el primer número el desplazamiento horizontal y el segundo el vertical. La primera coordenada es la de arriba a la izquierda del rectángulo y la segunda la de abajo a la derecha, definiendo la diagonal del rectángulo.
<div align="center"><map name="mapa1"><area shape="RECT" coords="0,0,199,99" href="http://oloman-cosicas.blogspot.com/" title="Pinchando aquí vamos a Cosicas"><area shape="RECT" coords="0,100,199,200" href="http://oloblogger.blogspot.com/" title="Pinchando aquí vamos a Oloblogger"><area shape="RECT" coords="200,0,400,99" href="http://olojuegos.blogspot.com/" title="Pinchando aquí vamos a Olojuegos"><area shape="RECT" coords="200,100,400,200" href="http://olografias.blogspot.com/" title="Pinchando aquí vamos a Olografías"></map><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp9PpdPS0QodZPk70yND87ZjmFrVhp5E01MHoE_S1SlKqKS-2Ed-rAb373Qt4wEQ1CWohoOblqAxyZ71GTXNEv0NpnS0prMbQQPM61okFbcTSuZTycHTbF_sCdAkNg4MNTn8mtBRinhze2/s1600/map.jpg" alt="" id="BLOGGER_PHOTO_ID_5149918442876674082" usemap="#mapa1" border="0" /></div>
Cada una de ellas se ha definido para que sirvan de enlace a los distintos blogs relacionados con Cosicas. El código responde a la siguiente estructura:
<map name="mapa1">
<area shape="RECT" coords="x,y,x1,y1" href="URLdestino1" >
<area shape="RECT" coords="x2,y2,x3,y3" href="URLdestino2" >
...
</map>
<img src="URLimagen" usemap="#mapa1" />
<area shape="RECT" coords="x,y,x1,y1" href="URLdestino1" >
<area shape="RECT" coords="x2,y2,x3,y3" href="URLdestino2" >
...
</map>
<img src="URLimagen" usemap="#mapa1" />
Como veis, hay que usar la instrucción MAP, definiendo las zonas que vamos a crear y luego añadir a la instrucción IMG, el atributo USEMAP, utilizando el mismo nombre del mapa que previamente hemos creado.
Las formas que se pueden definir:
Es posible reemplazar el atributo HREF por NOHREF para una zona neutra de la imagen.
Actualización: Para que el destino de un enlace se muestre en una ventana/pestaña nueva sin abandonar la actual, sólo hay que añadir al enlace en cuestión target="_blank":
Las formas que se pueden definir:
- RECT (rectángulo): "x1,y1,x2,y2" definiendo la diagonal tal y como se ha explicado
- POLY (polígono): "x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) un vértice del polígono. La última pareja de coordenadas se unirá a la primera para cerrar el polígono.
- CIRCL (círculo): "x,y,radio" siendo x,y el centro del círculo.
Es posible reemplazar el atributo HREF por NOHREF para una zona neutra de la imagen.
Actualización: Para que el destino de un enlace se muestre en una ventana/pestaña nueva sin abandonar la actual, sólo hay que añadir al enlace en cuestión target="_blank":
...
<area shape="RECT" coords="0,0,199,99" target="_blank" href="http://oloman-cosicas.blogspot.com/" title="Pinchando aquí vamos a Cosicas">
...
<area shape="RECT" coords="0,0,199,99" target="_blank" href="http://oloman-cosicas.blogspot.com/" title="Pinchando aquí vamos a Cosicas">
...
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Hola!
ResponderEliminarGracias!
Ahora que veo tu lapicito...pienso... vos le hiciste el encabezado a Key?
Porque vi un lápiz como el tuyo en su blog.
Vendré a aprender.
Saludos!
HOLA OLOMAN
ResponderEliminarSOLO QUIERO INVITARTE A MI BLOG EN ESTE DIA
UN MAR DE BESOS
perdona, pero podrías decirme en que zona de la edicion html he de pegar el codigo? gracias! muy buen blog!
ResponderEliminarB.Rour, si es en un post, directamente en el formulario de Edición (pestaña HTML), como con cualquier otro código. Si es en un gadget, directamente en el gadget, tipo HTML/Javascript. Si es en la plantilla para que salga fijo en alguna zona determinada, pues a partir del </head> <body>, allá dónde quieras ubicarlo.
ResponderEliminarEste comentario ha sido eliminado por el autor.
ResponderEliminarLo siento Leinadd, pero he visto tu comentario antes de que lo borraras ;)
ResponderEliminarIba a corregir lo que me proponías, pero ya me dí cuenta que estaba bien. No te cortes cuando quieras proponer algo.
Olas!!
ResponderEliminarRealmente los post son buenisimo y de mucha ayuda, vengo aprendiendo bastante gracias a tu blog!
Tengo un pequeño problema y quería ver si se te ocurría la solución :S
Hice un mapeado con diferentes zonas, el problema es que en firefox e internet explorer me aparece alrededor de la imagen un recuadro azul :S no se porque aparece, en mi google chrome no!
mi web es www.reddejovenes.com.ar
Gracias :)
Supongo que te refieres al menú que tienes debajo del título hecho con bocadillos, pero con firefox no me sale ese recuadro.
ResponderEliminarDe todas formas, cuando ocurre eso es porque se trata de una imagen con enlace y los enlaces de ese tipo llevan por defecto un efecto hover que consiste en ponerles precisamente un borde. La solucion es incluir dentro de la etiqueta IMG un BORDER="0".
perdon no se si salio mi comentario pero se puede personalizar el atributo "title" osea en lugar de que salga el cuadrito besh "pintando aqui vamos a olografias" salga de otro color?
ResponderEliminarnEjO, con title no se puede cambiar el color de fondo del rótulo. Eso lo interpreta cada navegador a su manera.
ResponderEliminarHay otras fórmulas para poner rótulos de color a los enlaces, pero no sé cómo funcionan.
Saludos.
Buenas!
ResponderEliminarOye, excelente trabajo.
Gracias a este post he aprendido a mapear una imagen, pero tengo un problema.
Siguiendo los pasos mapee una imagen con 36 enlaces y en Chrome funciona pero en Firefox y Explorer no.
¿Podrías ayudarme?
Mi Blog es CineStreaming. Solo tienes que aceptar las condiciones de uso y en la siguiente página está el fallo.
Repito que en Chrome funciona perfecto.
Muchas gracias y un saludo.
Javier - Cine Streaming
Javi, como lo veo todo bien... ¿podrías probar a cambiar CSINDEXAZ09 en los dos sitios dónde lo usas por lo mismo en minúsculas (csindexaz09)? A veces (no sé en qué casos en concreto) lo del uso de mayúsculas hace que no funcionen algunas cosas.
ResponderEliminar¡Hola!
ResponderEliminarHe estado un tiempo ausente y no había leído tu respuesta.
Muchas gracias pero lo he cambiado a minúsculas, le he quitado los números y sigue sin funcionar.
¿Se te ocurre algo más?
Ese indice es muy importante para mi blog y me temo que tendré que prescindir de él si no encuentro la solución.
Lo más curioso es que tu mapeado de muestra si funciona en todos los navegadores...
Me estoy volviendo loco.
Gracias de nuevo y un saludo.
¡Ufff! ¡¡¡Lo encontré Javi!!!
ResponderEliminarusemap="#cs"
Te falta el asterisco :D
Te iba a escribir una ovación muy Española pero al ser un poco vulgar la voy a recortar un poco: ¡Oleeeeeeee!
ResponderEliminarMuchísimas gracias compi, no me habría dado cuenta en la vida, estaba a punto de tirar la toalla con el consiguiente perjuicio para mi blog, porque no veas si es útil el mapeado.
Si en alguna ocasión puedo ayudarte en algo, cuenta conmigo (pero no me pidas dinero ni un organo eh, jeje)
Lo dicho, muchísimas gracias y mucho éxito para ti.
Hola muy buen post! muchas gracias
ResponderEliminarme podrias ayudar con algo ...
Estoy mapeando una imagen dandole varios links en cada parte de la imagen pero mi pregunta es como hago para que al ponerme sobre cierta parte de la imagen salga el cuadrito que sale en la imagen de arriba que dice "pinchando aqui vamos a cosicas" el texto , eso no me sale creo que es con tittle? pero cual seria el codigo exacto? seria de gran ayuda gracias!
Carlos, pinchando debajo de la imagen, dónde pone "Ver código del ejemplo", podrás ver los textos que mencionas, dentro de etiquetas TITTLE y también, dónde van ubicadas dichas etiquetas.
ResponderEliminaroloman necesito tu alluda y sabiduria sobre html
ResponderEliminarbueno estube plobando este codigo pero no lo entendi bien lo lei 4 veces y ise 5 intentos pero no pude asi que benia a pedirte tu alluda quiero aser esto :
http://img219.imageshack.us/img219/4064/sinttulo1ho.png
aora si en ves de 2 colubnas se pueden poner 3 te lo agredeceria mucho .....
y la zona neutro.
No sé explicarlo mejor que lo he hecho en la entrada Nagato.
ResponderEliminarSuponiendo que el problema esté en las coordenadas x e y, lo mejor es que tomes un programa de edición de imágenes y desde allí tomes los datos. Se trata de hacer rectángulos y cada uno con un enlace distinto. Los puntos de las coordenadas marcan el punto inicial del rectángulo (arriba-izquierda) y el punto final (abajo-derecha)
Si necesitan hacer un mapeado de imagen usen un software y no se compliquen la vida.
ResponderEliminarPor ejemplo Mapedit...
Saludos
Hola Olomán yo tengo ya creado mi mapeado de imagen pero me estoy complicando en poner los enlaces , creo k por error elimine unos codigos :S:S
ResponderEliminarLo que necesito es enlazar la cabecera de mi blog con tres menus.
Mira Oloman me estoy inspirando en este plantilla en su cabecera de su mapeado de imagenes link: (http://www.telavelox.com).
Gracias y Saludos!
Mi Blog es: http://vagostubepeliculas.blogspot.com, ahi puedes ver los codigos que tengo derrepente uno x ahi se me esta escapando.
¿Dónde debe ir ese mapa, Vagostube?
ResponderEliminarHola Oloman graias por responder a bueno quiero que el mapeado vaya en la cabecera de mi plantilla. Pero tengo problemas porque no puedo agregar el mapeado a la imagen (Que es la imagen de la cabecera a mostrar) Disculpa la reabundancia :S.
ResponderEliminarMira te dejo el link para que veas donde quiero agregar el link del mapeado. (Url: https://lh4.googleusercontent.com/_PIzoU--xLZ4/TbWTOpu4EZI/AAAAAAAAAD8/5owAJjcl6G4/s640/MAPEADO.png)
Mi Blog es: http://vagostubepeliculas.blogspot.com, ahi puedes ver los codigos que tengo derrepente me falta agregar un url para enlazarlos.
Mil Gracias, Saludos :)
Para hacer un mapeado en tu cabecera, tendráis que cambiar una gran parte de código. Mejor fíjate en tu CSS en las id #logo-link y #banner. La primera es el enlace en el logo principal de la cabecera, que va a la página Inicio. El segundo es el enlace en el banner que hay a su derecha. Están hechos con tamaños concretos coincidentes con los de esos espacios y "separados" mediante MARGIN.
ResponderEliminarDe la misma manera y cambiando los valores de HEIGHT, WIDTH y MARGIN, puedes generar "recuadros de enlace" para los otros tres.
Una vez hecho el CSS con las tres nuevas clases, no olvides ponerlas en la parte HTML.
Entonces Oloman, y si no estoy confundido, según la última respuesta que dabas al compañero Vagostube, no es trivial mapear la imagen del título en Blogger?
ResponderEliminarTenía pendiente hacerlo para el mando a distancia del título de mi blog:
http://pasaydisfrutadelcastigo.blogspot.com/
¿Qué opinas? ¿Algún truco?
Muchas gracias
¿Trivial? Me ha gustado esa expresión de matemático dPunish3r. Lo cierto es que no lo es. Eso depende de cada diseño y de lo que se quiera hacer. Puedes tener una cabecera pseudomapeada como en el caso de Vagostube, mapeada como se explica aquí o no mapeada en absoluto. Siempre hay varias formas de hacer lo mismo.
ResponderEliminarEn tu caso, lo más fácil quizás sea un mapeo y para que los usuarios distingan mejor qué parte de las imágenes son enlaces y cuáles no, incluiría el título del blog, dejando el resto del espacio sin ningún enlace. De esa manera, no aparecerá el puntero-mano que indica que hay un enlace, mas que en los sitios concretos en que los haya.
eres un grande!!! me ha servido de mucha ayuda tu blog
ResponderEliminargracias
No sabes cómo me gusta que sea así James Rubio ;)
ResponderEliminarAnte todo enhorabuena por el blog, el mejor que he visto y me está sirviendo de gran ayuda para comenzar en este mundo de los blogs. Quería hacerte una pregunta fácil, es posible que al presionar en una zona de la imagen mapeada te lleve a un enlace pero en una nueva ventana o pestaña del navegador??
ResponderEliminarMil gracias de antemano.
Sania Cuk, sólo hay que añadir target="_blank" al enlace. Lo acabo de añadir al final de la entrada. Ahí podrás verlo con más detalle.
ResponderEliminarEstas hecho un crack Oloman!! Ya esta probado y funcionando!! Es imposible llegar a agradecerte por escrito cuando me has ayudado con mi proyecto de blog, ahora mismo antes de buscar en google cualquier duda primero la busco aquí! De corazón muchísimas gracias y enhorabuena.
ResponderEliminarBuenas de nuevo!! Siento estar aquí de nuevo haciendo preguntillas, espero no ser pesada... Solo quería consultarte que mi imagen de portada esta mapeada para los diferentes botones, pero no se por qué en chrome solo funciona el mapeado hasta el pixel 907 cuando la imagen tiene 1150 pixeles, se ve claramente en el botón de Facebook que solo funciona hasta la mitad. Curiosamente esto no ocurre en Internet Explorer. Alguna idea de por qué puede ocurrir?
ResponderEliminarY curiosamente lo que me ocurre con Internet Explorer es que no aparece el cuadro de Google Friends, eso es normal??
www.styleintoxicated.com
No sé si será esto, pero a esa imagen le falta la barra de cierre. Al final, justo antes del >
Eliminar<img src="http://img23.imageshack.us/img23/4698/portada2g.jpg" usemap="#mapa1" border="0"/>
Gracias por tu respuesta pero he entrado a ver el código y si que la tiene, pero no debes de ir mal encaminado porque curiosamente en una prueba que he hecho colocando otra imagen mapeada justo debajo algo provoca en la primera para que funcione correctamente, es curiosísimo. (Blog de pruebas: http://interactive.styleintoxicated.com/) seguiré investigando a ver si doy con ello... De todas formas muchísimas gracias por la respuesta.
EliminarSí que es raro, sí. Pues el caso es que en el código fuente no se ve ese cierre. A ver si tienes algún script que esté alterando eso accidentalmente.
EliminarHay otra pequeña tontería que he visto ahora, pero por probar... La dirección de la imagen tiene un espacio en blanco delante de http que creo que no debería estar:
src=" http://img23.imageshac...
Sobre todo un millón de gracias por tu interés, gracias de corazón.
EliminarContarte que he probado a quitar el espacio y nada de nada, me tiene loca este tema... Lo último es que quité todo el mapeado de la imagen de abajo y la de arriba seguía funcionando, puse una imagen más estrecha (200px.) y seguía funcionando, pero al poner una de 150 px. otra vez dejaba de funcionar... Y ahora lo más curioso si coloco una de 180 px. deja de funcionar solo la mitad inferior dcha. Auténtico expediente X!!!! Ya estoy desesperada así que mañana volveré a intentar descubrir el motivo. El blog de pruebas es http://interactive.styleintoxicated.com por si quieres echarle un ojo.
Gracias y mil besos.
Solo darte la enhorabuena por la nueva imagen!! Me encanta, es mucho más "estilosa" e intuitiva. Genial lo del menú fijo de la izquierda. Yo aquí sigo peleándome con el mapeado, jejeje, no he dado con ello aún...
EliminarBesos.
Gracias. ¿Y qué has tocado que hoy funciona bien el menú?
EliminarRectifico. No funciona bien. Aquí tienes una captura con el problema.
EliminarHay una capa (sin contenido, no visible) que no flota adecuadamente y cuando haces la ventana más pequeña, se solapa por encima de la cabecera.
Ese es el diagnóstico y lo malo es que no sé la cura. Eso es cosa de las nuevas plantillas y yo no las controlo (ni quiero). De todas formas creo que lo puedes arreglar con esta chapucilla:
#HTML1 {z-index:1;}
Eso hace que esa capa que es la que forma tu menú, quede por encima de la otra, pero no sé si la otra será importante o no.
Otra opción que podría funcionar, sería mover ese gadget (menú) a otro bloque: header, crosscol...
Me imaginaba que tenía que ser alguna capa que interfería ya que el comportamiento variaba en función del ancho de la imagen de abajo. Muchísimas gracias por tus soluciones, no me queda muy claro como mover el gadget a otro bloque pero como ya estoy cansada de este tema he probado la otra solución y funciona!! No se si es correcto donde lo he colocado: después de "head" dentro de "style type='text/css'" ???
EliminarNo se cuanto de "chapucilla" es, ni si el otro cuadro es importante o no, pero probaré así un tiempo y empezaré a diseñar el nuevo menú (gracias a ti), pudiendo utilizar la imagen hasta el final!!!
Mil gracias de todo corazón.
Si funciona no hay más que hablar :D
EliminarLo de mover el bloque lo dije a ciegas, porque no sé si podrá ser. Me refería a los cambios que se pueden hacer moviendo gadgets desde la sección Diseño del Escritorio.
Me alegro de que ya marche bien la cosa.
Hola ,no soy capaz de poner una cabecera,y menos entender los codigos ,he colocado una foto y queda pequeña ,¿ como lo hago ?
ResponderEliminarSupongo que por mi demora en contestar ya encontraste la manera, pues ahora mismo tienes una cabecera personalizada. Si lo que quieres es usar este truco para que parte de ella sea "enlazable", entonces primero haz esto otro y luego vuelve aquí.
EliminarHola!
ResponderEliminarEscribimos un blog en blogger organizado con un cuerpo central y dos barras laterales. En la barra izquierda tenemos insertado el código de una image map ( lo hemos hecho usando dreamweaver ) y funciona perfectamente. El problema ha surgido cuando hemos intentado insertar otra image map en la barra derecha y claro, blogger lee todo el código como uno y me enlaza la nueva image map a los enlaces ya existentes en la parte derecha ( entiendo que para el las coordenadas son las mismas...)
Nos da la sensación que se trata de un problema de planteamiento general y nos gustaría saber si existe alguna manera de evitarlo. ¿ Se te ocurre alguna solución ?
Este es el blog : www.txikisdelbidasoa.com
Gracias de antemano, ( esperando que hayas podido entender cual es nuestro problema ya que explicarlo por escrito es muy complicado)
Un saludo,
No encuentro el segundo mapa, pero supongo que probablemente el problema está en que habéis nombrado ambos con el mismo nombre. Vosotros habéis usado para el que vi #map. En mi ejemplo yo usé #mapa1. Podéis usar el nombre que gustéis, pero cada mapa debe tener su propio nombre.
EliminarMuchísimas gracias! Lo probaremos!
ResponderEliminarNo has podido ver el segundo mapa porque lo eliminamos, ya que no funcionaba bien.
Gracias de nuevo por la respuesta!
Hace tanto tiempo tengo ganas de hacerlo en mis blogs, pero nunca logro encontrar un buen tutorial el cual entienda :/ En este, por ejemplo, no entiendo de donde sacar las cordenadas. Te agradeceria mucho si me podes responder!!
ResponderEliminarEs un esquema cartesiano. En el segundo párrafo del post está más explicado, pero si te refieres a cómo saber cual es un punto cualquiera del dibujo sin tener que ponerse a contar píxeles, eso es algo que te suelen facilitar la mayoría de programas de edición de imágenes.
EliminarGenial! Muchas gracias
ResponderEliminar¡Hola! Tengo una duda, yo tengo un código html de una imagen mapeada, pero al hacer click sobre la parte específica que te lleva a determinada página, te lleva a la página en la que nos encontramos más un "/" más la página a la que me quiero dirigir, es decir:
ResponderEliminarMe encuentro en:
• BlogDeEjemplo.blogspot.com
el cual tiene una imagen mapeada, le hago click a un link y me aparece esto:
• BlogDeEjemplo.blogpost.com/www.PáginaDeEjemplo.com
¿Hay alguna forma de que solo se abra "www.PaginaDeEjemplo.com" sin el "BlogDeEjemplo.blogspot.com/" antes?
¡Muchas gracias!
No puedo verlo porque no tienes la dirección de tu blog incluido en tu perfil, pero tiene toda la pinta de que escribes mal la URL del enlace. Tienes que ponerla completa, tal cual aparecería en un navegador, ni más, ni menos. Repasa ese código y posiblemente descubrirás que no la tienes bien tecleada.
EliminarHola Buenas tardes. Muchas gracias por tu aporte.
ResponderEliminarQuisiera saber como puedo hacer que al hacer clic sobre alguna zona del mapa cambie de color, NO cuando paso el mouse por encima quiero que responda al evento clic y cambie a otro color y cuando le vuelva a dar otro clic vuelva a su color original. De esta manera puede quedar la zona de la imagen marcada cuando le de el clic y puedo desmarcarla si deseo.
Muchas gracias
Hola Maittemar. Eso no lo podrías hacer con mapas CSS. Como opción más fácil habría que usar JavaScript y un poco más complicado de codificar, con CSS pero usando INPUTs y LABELs. Este sería un ejemplo.
EliminarHola Olomar,
ResponderEliminarmuchísimas gracias por tus tutoriales, estoy aprendiendo a un ritmo increíble gracias a tu página. Gracias de verdad.
He podido cambiar la cabecera de mi blog y poner una imagen mapeada a mi gusto siguiendo tus indicaciones, pero en los gadgets de la columna de la izquierda, el primero no funciona adecuadamente (coge los enlaces y título de la cabecera), y el segundo, sencillamente, no funciona.
He repasado el código hasta aburrirme y cambiado la distancia entre la columna y la nueva cabecera, por si ese era el problema, pero nanai. Esto supera mis pocos conocimientos.
¿Crees que podrías echar un vistazo y decirme lo que piensas?
¡Un saludo!
www.fireflyinajarspell.com
No sé Maeve. No me concretaste mucho y yo sólo puedo comprobar que la cabecera va bien y que el gadget que lleva el título "New reader? Start here? va a un enlace distinto... pero como no sé lo que quieres hacer desconozco si eso está bien o no.
EliminarMuchas gracias por pasarte, lo acabo de arreglar con un generador de mapeado, está claro que es pronto para que escriba código por mi misma.
ResponderEliminar¡Gracias otra vez y un saludo!