Los mapas de imagen se llevan utilizando desde los orígenes de HTML. Combinando las etiquetas y junto con el atributo usemap de la etiqueta es posible definir diferentes zonas pinchables dentro de una misma imagen.
Hoy en día los mapas de imagen HTML han sido sustituidos por otras soluciones como Flash, que son más fáciles de utilizar y disponen de más posibilidades. No obstante, recientemente ha surgido un nuevo tipo de mapa de imagen creado sólo con CSS.
Mapas de imagen con CSS
Estos mapas de imagen CSS no suelen utilizarse para definir zonas pinchables dentro de una imagen, sino que se emplean para mostrar información adicional y comentarios sobre las diferentes zonas de una imagen. El sitio de fotografía Flickr utiliza los mapas de imagen para mostrar notas y comentarios de los usuarios. Otros sitios web como Facebook utilizan los mapas de imagen para que los usuarios etiqueten las fotografías indicando el nombre de las personas que aparecen en cada una.
En primer lugar, selecciona la imagen en la que se van a mostrar las notas. En este ejemplo se utiliza una imagen de la fotógrafa visualpanic que se puede utilizar libremente y que está disponible en Flickr:
La imagen por defecto no muestra ninguna zona activa. Cuando el usuario pasa el ratón por encima de cualquier parte de la imagen, se muestra el recuadro de todas las zonas activas disponibles. Además, cuando el usuario pasa el ratón por encima de una zona activa, se muestra el comentario asociado.
El código HTML del mapa de imagen creado con CSS varía mucho en función de la solución utilizada. Aunque algunas soluciones crean varios y tablas por cada nota/comentario, en este ejemplo se simplifica al máximo el código HTML y sólo se utiliza un elemento y una lista :
El elemento encierra todos los elementos que forman el mapa de imagen (la imagen original y las notas/comentarios). Los comentarios se incluyen mediante una lista no ordenada , en la que cada elemento es un comentario.
El elemento y la lista deben utilizar el atributo class y no id porque en una misma página puede haber varios mapas de imagen. Por su parte, los elementos de cada comentario deben utilizar atributos id, ya que cada comentario se muestra en una posición única y tiene unas dimensiones únicas de anchura y altura.
La clave de los mapas de imagen CSS consiste en posicionar cada de forma absoluta respecto de la imagen y asignarles una anchura/altura adecuadas. Posteriormente, se emplea la pseudo-clase :hover para mostrar/ocultar elementos cuando el usuario pasa el ratón por encima.
Aplicando las reglas CSS anteriores el mapa de imagen CSS ya funciona correctamente en los navegadores Firefox y Safari. Desafortunadamente, los navegadores Internet Explorer y Opera tienen errores que impiden que el ejemplo funcione correctamente. El problema reside en que los elementos tienen un fondo transparente y tanto Internet Explorer como Opera tienen problemas con la pseudo-clase :hover sobre estos elementos.
La solución consiste en añadir un fondo (color o imagen) sobre los elementos . Como lo único importante es añadir un fondo, independientemente de si el fondo es real o no, la siguiente regla CSS es suficiente:
Después, para asociar el mapa a la imagen, añadimos a la imagen el atributo usemap, como se ve en el siguiente código para el mapa de Sudamérica donde hemos creado un área para Brasil y otra para Argentina:
Es posible crear un mapa de imagen (usando y ) para hacer que ciertas areas de una imagen se conviertan en hotspots Y que la imagen (y el mapa) respondan bien a los cambios de tamaño y se adapten a la pantalla?
Cómo se puede hacer para que las áreas del mapa se adapten como la imagen? Hay alguna alternativa mejor que usar mapas (sin restricción alguna: se podría cambiar la estructura HTML, el CSS, añadir JavaScript, SVG...)?
Por lo mismo , si usas un map, no podrás adaptarlo a algo responsivo. La alternativa es SVG por ejemplo, en el cual puedes incluso poner los onclick sobre cada uno de los elementos. He hecho muchos mapas de paises y del mundo de esta manera y funciona de maravilla con SVG, además de ser compatible con todos los browsers incluso los de mobile
HTML nos permite la opción de crear diferentes enlaces url dentro de una misma imagen. Es decir, podemos hacer que diferentes partes de una imagen tengan enlaces que nos permitan ir a diferentes destinos.
A continuación vamos a explicarte como podemos crear este tag html y los diferentes atributos que posee este tag. Como veremos a lo largo del artículo, lo difícil de crear un mapa de imágenes no es el mapa en sí, sino encontrar las coordenadas en la imagen. Aunque existen programas de edición de imágenes que nos ayudarían en esa tarea.
Hasta ahora te habíamos indicado cómo podías escribir un mapa de imágenes y cómo definir su área, pero no te habíamos dicho cómo indicar qué imagen es la que llevará el mapa. Esta acción se hace gracias al atributo usemap.
Yo lo hice usando una libreria que se llama imageresizer y ajusta las coordenadas de las areas al tamaño que vaya tomando la imagen, oye yo tengo un problema, a ver si lo has realizado, estoy poniendo una imagen y quiero poner un input o un label dentro de un circulo que esta en la imagen, pero no se como hacer para que el elmento html quede anclado a un punto especifico de la imagen,
Los mapas de imágenes es un nuevo planteamiento de navegación que incorpora una serie de enlaces dentro de una misma imagen. Estos enlaces son definidos por figuras geométricas y funcionan exactamente del mismo modo que los otros enlaces. Podéis ver el funcionamiento de uno en este enlace.
En un principio, estos mapas no eran directamente reconocidos por los navegadores y recurrían a tecnologías de lado del servidor para ser visualizados. Hoy en día pueden ser implementados por medio de código HTML tal y como veremos en este capitulo.
Podemos utilizar estos mapas, por ejemplo, en portadas donde damos a conocer cada una de las secciones del sitio por medio de una imagen. También puede ser muy práctico en mapas geográficos donde cada ciudad, provincia o punto cualquiera representa un enlace a una página.
En cualquier caso, el uso de estos mapas ha de estar sistemáticamente acompañado de un texto explicativo que dé a conocer al usuario la posibilidad de hacer clic sobre los distintos puntos de la imagen. Frases como "Haz clic sobre tal icono para acceder a tal información" resultan muy indicativas a la hora de hacer intuitiva la navegación por los mapas de imágenes. Por otro lado, no esta de más introducir esa misma explicación en el atributo alt de la imagen.
Las líneas geométricas que delimitan los enlaces, es decir, las áreas de los enlaces, han de ser definidas por medio de coordenadas. Cada imagen es definida por unas dimensiones de ancho (X) y alto (Y) y cada punto de la imagen puede ser definido por tanto diciendo a que altura (x) y anchura (y) nos encontramos. De este modo, la esquina superior izquierda corresponde a la posición 0,0 y la esquina inferior derecha corresponde a las coordenadas X,Y. Si deseamos saber qué coordenadas corresponden a un punto concreto de nuestra imagen, lo mejor es utilizar un programa de diseño grafico como Photoshop o Paint Shop Pro.
Dentro de ella queremos introducir un enlace a cada uno de los elementos que la componen. Para ello, definiremos nuestros enlaces como zonas circulares de pequeño tamaño que serán distribuidas a lo largo y ancho de la imagen.
Nota: Los href de las áreas van a #Este es un ejemplo parcial de utilización de los mapas, faltaría colocar los href con valores reales y no con la #. Cada uno de los enlaces de las áreas -atributo href de la etiqueta AREA- deberían llevar a una página web. El ejemplo quedaría completo si creásemos todas las páginas donde enlazar las áreas y colocásemos los href dirigidos hacia dichas páginas. Como no hemos hecho las páginas "destino" hemos colocado enlaces que no llevan a ningún sitio, que, como puedes ver, se indica con el caracter "#".
Un mapa de imagen es una imagen que se ha dividido en regiones o zonas interactivas. Cuando el usuario hace clic en una zona interactiva, se realiza una acción (se abre un archivo nuevo, por ejemplo).
Los mapas de imagen del lado del cliente almacenan la información acerca de los vínculos de hipertexto en el documento HTML en lugar de hacerlo por separado en un archivo de mapa como hacen los mapas de imagen del lado del servidor. Cuando el visitante de un sitio hace clic en una zona interactiva, el URL asociado se envía directamente al servidor. Esto hace que los mapas de imagen del lado del cliente sean más rápidos que los mapas del lado del servidor, pues el servidor no necesita interpretar dónde ha hecho clic el usuario.
Dreamweaver no modifica las referencias a mapas de imagen del lado del servidor en documentos existentes. Puede utilizar mapas de imagen del lado del cliente y del servidor en el mismo documento. Sin embargo, los navegadores que admiten ambos tipos de mapas de imagen dan prioridad a los mapas de imagen del lado del cliente. Para incluir un mapa de imagen del lado del servidor en un documento, deberá escribir el código HTML correspondiente.
Puede editar fácilmente las zonas interactivas creadas en un mapa de imagen. Puede mover un área de zonas interactivas, cambiar el tamaño de las zonas interactivas o adelantar o retrasar una zona interactiva en un elemento con posición absoluta (elemento PA).
También puede copiar una imagen con zonas interactivas de un documento a otro o copiar una o más zonas interactivas de una imagen y pegarlas en otra imagen. Las zonas interactivas asociadas a la imagen también se copiarán en el nuevo documento.
En algunos navegadores las imágenes de los enlaces se muestran con un borde azul por defecto, para suprimirlo debemos insertar en la etiqueta de imagen el atributo border="0": el código HTML de una imagen de enlace quedará así:. 2ff7e9595c
Comments