Se puede utilizar en WordPress y Blogger
En muchas ocasiones interesa poner links en un gráfico para captar la atención del visitante. En este tutorial, zonas activas o mapa de imagenes, explico una forma de hacerlo muy sencilla utilizando un pequeño programa “ImageMapper“.
En el gráfico puedes comprobar las zonas activas.
Tutorial mapa de imágenes
[spoiler]
Descargar ImageMapper
El manejo de las herramientas es de lo mas simple
1.- Abrimos la imagen que previamente hemos preparado.
Con las herramientas 2, 3, 4, y 5 seleccionamos la zona activa, usando la que mejor se acomode a nuestra necesidad, poner el tutulo, URL
Con las siguientes zonas hacemos lo mismo
Una vez terminadas las zonas que queremos linkear, copiamos al portapapeles clikeando donde indica la captura
Estos son los codigos generados para esta imagen, os saldran unas coordenadas distintas logicamente.
Este codigo lo pegais en el lugar done va a ir la imagen
<MAP NAME=”Tutorial”>
<AREA SHAPE=”RECT” COORDS=”233,84,323,13″ HREF=”http://www.xanapsp.com” TITLE=”Luz Casal”>
<AREA SHAPE=”RECT” COORDS=”52,130,144,61″ HREF=”http://lb-material.iespana.es/” TITLE=”Ana Belen”>
<AREA SHAPE=”RECT” COORDS=”571,439,667,362″ HREF=”www.xanadesign.com” TITLE=”Shakira”>
</MAP>
<IMG SRC=”URL DE LA IMAGEN” USEMAP=”#Tutorial” BORDER=”0″>
Realizado por Pilar Méndez en exclusiva para La Buhardilla
Registrado en: TWI
Prohibida la reproducción total o parcial sin mi consentimiento por escrito
La Buhardilla ©
[/spoiler]
------------------------------------------
Post relacionados:
- Cómo agregar un editor de imágenes en línea para tu sitio web, free
- Freepik es un buscador de imágenes gratis, fotografías o vectoriales
- Seleccionar cualquier texto para ver resultados de búsqueda de Imágenes Google en Chrome (extensión)
- Image Cropper: Extensión Chorme, permite capturar, editar, y imágenes
- Excelente tutorial HTML5
Red Blogs
hola quiero hacer un mapeo de la imagen para la cabecera de mi blog.
Al ver que aquí está el enlace para ver donde quiero agregar la asignación de enlace. (URL: https: / lh4.googleusercontent.com/_PIzoU–xLZ4/TbWTOpu4EZI/AAAAAAAAAD8/5owAJjcl6G4/s640/MAPEADO.png /)
Mi blog es: http://vagostubepeliculas.blogspot.com, allí se puede ver los otros códigos que de repente tengo que añadir un enlace URL.
Mil Gracias, Saludos:)