paginas HTML

Mapas en HTML
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.
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 talinformació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
Un Mapa es una imagen que permite realizar diferentes Hiperenlaces en función de la "zona" de la imagen que se pulse. Las etiquetas para crear mapas son y .
La etiqueta identifica al mapa y tiene elparámetro name para indicar el nombre del mapa.
La etiqueta define las áreas sensibles de la imagen. Tiene los siguientes parámetros obligatorios:
shape = "tipo" Indica el tipo de área a definir.
coords = "coordenadas" Indica las coordenadas de la figura indicada con shape.
href = "URL" Indica la dirección a la que se accede si se pulsa en la zona delimitada por el área indicada.
Alt = Paraindicar un texto que se mostrará cuando situemos el ratón en el área.
Los tipos de área pueden ser los siguientes:
Rect.- Área rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha.
Poly.- Polígono. Se deben especificar las coordenadas de todos los vértices del polígono. El navegador se encarga de "cerrar" la figura.Circle.- Círculo. Se debe especificar en primer lugar las coordenadas del centro del círculo y a continuación el valor del radio (en puntos).
.Así pues, un mapa de imagen está compuesto de dos partes:
• La imagen propiamente dicha que estará situada como de costumbre dentro de la etiqueta de nuestro documento HTML.
• Un código, situado en el interior de la etiqueta , que delimitara por medio delí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) nosencontramos. 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.
Tipos de áreas: shape distintas
Existen tres tipos de áreas distintas, suficientespara hacer casi cualquier tipo de figura. En el dibujo que acompaña estas líneas se puede ver una representación de las áreas, que detallamos a continuación.
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 están nombradas dichas coordenadas en nuestro dibujo, el áreatendría la siguiente etiqueta:

shape="CIRCLE"
Crea un área circular, que se indica con la coordenada del centro del círculo y el radio. A la vista de nuestro dibujo, la etiqueta de un área circular tendría esta forma:

shape="POLY"
Este tipo de área, poligonal, es la más compleja de todas. Un polígono queda definido indicando todos sus puntos, pero atención, los...