Diseo Web HTML Basico
En esta seccin publicamos todos los contenidos que tienen que ver con HTML, como manual de HTML, talleres, servicios, complementos, etc. Disponemos, tal vez, del mejor manual de HTML de la Web en espaol, que trata todos los temas con gran detalle y ofrece cientos de consejos para mejorar nuestras tcnicas. Buscador:
Mapas de imgenes con HTML
Explicamos detalladamente el proceso para crear mapas de imgenes, osea, imgenes que tienes varios enlaces asociados en distintas reas.
En captulos anteriores hemos podido adentrarnos en el elemento bsico de navegacin del web: El enlace hipertexto. Hemos visto que estos enlaces son palabras, textos o imgenes que, al pinchar sobre ellos, nos envan a otras pginas o zonas. Los mapas de imgenes es un nuevo planteamiento de navegacin que incorpora una serie de enlaces dentro de una misma imagen. Estos enlaces son definidos por figuras geomtricas y funcionan exactamente del mismo modo que los otros enlaces. Podis ver el funcionamiento de uno en este enlace. En un principio, estos mapas no eran directamente reconocidos por los navegadores y recurran a tecnologas de lado del servidor para ser visualizados. Hoy en da pueden ser implementados por medio de cdigo 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. Tambin puede ser muy prctico en mapas geogrficos donde cada ciudad, provincia o punto cualquiera representa un enlace a una pgina. En cualquier caso, el uso de estos mapas ha de estar sistemticamente acompaado 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 informacin" resultan muy indicativas a la hora de hacer intuitiva la navegacin por los mapas de imgenes. Por otro lado, no esta de ms introducir esa misma explicacin en el atributo alt de la imagen. 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 cdigo, situado en el interior de la etiqueta <map>, que delimitara por medio de lneas geomtricas imaginarias cada una de las reas de los enlaces presentados en la imagen.
Las lneas geomtricas 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 posicin 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 diseo grafico como Photoshop o Paint Shop Pro. La mejor forma de explicar el funcionamiento de este tipo de mapas es a partir de un ejemplo prctico. Supongamos que tenemos una imagen con un mapa como esta:
Pulsa en los crculos para acceder a las secciones!
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 pequeo tamao que sern distribuidas a lo largo y ancho de la imagen. Veamos a continuacin el cdigo que utilizaremos: <table border=0 width=450><tr><td align="center"> <map name="mapa1"> <area alt="Pulsa para ver la pgina de mis amigos" shape="CIRCLE" coords="44,36,29" href="#">
<area alt="Pulsa para ver mi novia" shape="CIRCLE" coords="140,35,31" href="#"> <area alt="Pulsa para conocer a mi Familia" shape="circle" coords="239,37,30" href="#"> <area alt="Pulsa para conocer mi trabajo" shape="CIRCLE" coords="336,36,31" href="#"> </map> <img src="images/html/[Link]" width="380" height="72" alt="Mapa de imgenes. Pulsa en cada una de los crculos." border="0" usemap="#mapa1"> <br> Pulsa en los crculos para acceder a las secciones! </td></tr></table> Nota: Los href de las reas van a # Este es un ejemplo parcial de utilizacin de los mapas, faltara colocar los href con valores reales y no con la #. Cada uno de los enlaces de las reas -atributo href de la etiqueta <area>- deberan llevar a una pgina web. El ejemplo quedara completo si creasemos todas las pginas donde enlazar las reas y colocasemos los href dirigidos hacia dichas pginas. Como no hemos hecho las pginas "destino" hemos colocado enlaces que no llevan a ningn sitio, que, como puedes ver, se indica con el caracter "#". Podis observar, tal y como hemos explicado antes, que nuestro mapa consta de dos partes principales: la imagen y la etiqueta <map> que define las reas de cada enlace. Cada rea se indica con una etiqueta <area>, que tiene los siguientes atributos: alt Para indicar un texto que se mostrar cuando situemos el ratn en el rea. shape Indica el tipo de rea. coords Las coordenadas que definen el rea. Sern un grupo de valores numricos distintos dependiendo del tipo de rea (shape) que estemos definiendo. href Para indicar el destino del enlace correspondiente al rea. En este caso hemos utilizado unas reas circulares (shape="CIRCLE"), que se definen indicando el centro del crculo -una coordenada (X,Y) y el radio, que es un nmero entero que se corresponde con el nmero de pixels desde el centro hasta el borde del crculo.
Tipos de reas: shape distintas. Existen tres tipos de reas distintas, suficientes para hacer casi cualquier tipo de figura. En el dibujo que acompaa estas lneas se puede ver una representacin de las reas, que detallamos a continuacin. shape="RECT" Crea un rea rectangular. Para definirla se utilizan las coordenadas de los puntos de la esquina superior izquierda y la esquina inferior derecha. Tal como estn nombradas dichas coordenadas en nuestro dibujo, el rea tendra la siguiente etiqueta: <area shape="RECT" coords="X1,Y1,X2,Y2" href="#"> shape="CIRCLE" Crea un rea circular, que se indica con la coordenada del centro del crculo y el radio. A la vista de nuestro dibujo, la etiqueta de un rea circular tendra esta forma: <area shape="CIRCLE" coords="X1,Y1,R" href="#"> shape="POLY" Este tipo de rea, poligonal, es la ms compleja de todas. Un polgono queda definido indicando todos sus puntos, pero atencin, los tenemos que indicar en orden, siguiendo el camino marcado por el permetro del polgono. A la vista del dibujo y los nombres que hemos dado a los puntos del polgono, la etiqueta <area> quedara de esta forma. <area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">
Mapas de imgenes
<MAP> <AREA>
Puede hacer que parte de la imagen sea un enlace a otra pgina, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces. Las tags usadas para esto son: 1. Las tags <map>.....</map> identifican que vamos a crear un mapa de imgenes. Generalmente, lleva asociado el atributo name= al que le sigue entre comillas el nombre del mapa. 2. La tag <area> define las reas que vamos a poder activar en esa imagen. A esta tag le acompaan los siguientes atributos: o shape= Entre comillas estableceremos el tipo de rea a definir. Puede tratarse de rect (rectangular), poly (poligonal) o circle (circular). o Coords= Entre comillas indicaremos los pares de coordenadas de cada punto del rea a activar. Estas coordenadas las podemos averiguar utilizando un programa de edicin de imgenes. 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 vrtices del rea. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio. o Href= Como ya sabe, indica la direccin, entre comillas, de la pgina web a la que accede si pinchamos en un rea determinada. Finalmente, debe saber que para que una imagen sea tratada como un mapa, adems de el cdigo anteriormente descrito, debe incluir en la tag de imagen correspondiente a la imagen a mapear el atributo usemap="#nombre del mapa".
<IMG SRC="/graficos/[Link]" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un beb" USEMAP="#bebe1"> <MAP NAME="bebe1"> <AREA SHAPE=CIRCLE COORDS="60,56,47" HREF="#" ALT="Cabeza"> <AREA SHAPE=POLY COORDS="3,182,36,178, 44,165,60,169,66,184,62,196, 43,201,35,190,0,193,0,183" HREF="#" ALT="Sonajero"> </MAP>
<HTML> <HEAD> <TITLE>Ejemplo 13</TITLE> </HEAD> <BODY> <H1>Mapas de imágenes</H1> <IMG SRC="/graficos/[Link]" WIDTH=140 HEIGHT=210 BORDER=0 ALT="Un bebé" USEMAP="#bebe1"> <MAP NAME="bebe1"> <AREA SHAPE=CIRCLE COORDS="60,56,47" HREF="#" ALT="Cabeza"> <AREA SHAPE=POLY COORDS="3,182,36, 178,44,165, 60,169,66, 184,62,196, 43,201,35, 190,0,193,0,183" HREF="#" ALT="Sonajero"> </MAP> </BODY> </HTML>
