Se puede hacer que parte de una imagen sea enlace a otra página, es decir, hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. Las tags (Etiquetas) usadas para esto son:
- Las tags <map>.....</map> identifican que vamos a crear un mapa de imágenes. Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa.
- La tag <area> define las áreas que vamos a poder activar en esa imagen. A esta tag le acompañan los siguientes atributos:
- shape= Entre comillas estableceremos el tipo de área a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular).
- Coords= Entre comillas indicaremos los pares de coordenadas de cada punto del área a activar. Estas coordenadas las podemos averiguar utilizando un programa de edición de imágenes. En las áreas rectangulares deben especificarse las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vértices del área. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio.
- Href= Como ya sabe, indica la dirección, entre comillas, de la página web a la que accede si pinchamos en un área determinada.
Finalmente, debe saber que para que una imagen sea tratada como un mapa, además de el código anteriormente descrito, debe incluir en la tag de imagen correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa".
Así pues, un mapa de imagen esta compuesto de dos partes:
- La imagen propiamente dicha que estará situada como de costumbre dentro de la etiqueta <body> de nuestro documento HTML.
- Un código, situado en el interior de la etiqueta <map>, que delimitara por medio de líneas geométricas imaginarias cada una de las áreas de los enlaces presentados en 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.
%5B1%5D.gif)
.gif&imgrefurl=http://www.gifandgif.es/gifs_animados/Gatos/&usg=__xyK_CQapRct5CB9oc20wsEBoZWA=&h=250&w=390&sz=14&hl=es&start=0&tbnid=eiBpTiHLDk896M:&tbnh=158&tbnw=194&prev=/images%3Fq%3Dgif%2Banimados%26hl%3Des%26biw%3D1276%26bih%3D823%26gbv%3D2%26tbs%3Disch:1&itbs=1&iact=rc&dur=828&ei=eqpqTOu5CIOosQPDpaDFDw&oei=eqpqTOu5CIOosQPDpaDFDw&esq=1&page=1&ndsp=24&ved=1t:429,r:22,s:0&tx=109&ty=85){kind=link}