¡Descarga HTML Mapas sensitivos y más Apuntes en PDF de Desarrollo de Aplicaciones Web solo en Docsity!
Mapas sensitivos en HTML
A qué nos referimos con mapas sensitivos
Un mapa sensitivo no es más que una imagen en la que se definen ciertas áreas sensibles, de manera que se pueda hacer “clic” sobre ellas como si se tratase de un enlace cualquiera.
En la imagen anterior vemos cómo se definen estas áreas. Luego sólo queda definir qué acción se realizará al pinchar sobre ellas.
Crear las áreas sensibles
Las áreas sensibles se definen utilizando la etiqueta ****.
Atributos de dicha etiqueta:
El atributo más importante es el shape, que indica que tipo de área quiero crear:
- Rect : se definirá una zona rectangular (4 valores. Las coordenadas de Inicio y fin de la figura).
Ejemplo:
- Circle : se definirá una zona circular (3 valores. Coordenada del centro; y longitud del radio). Ejemplo:
- Polygon : se definirá una zona poligonal (tantas coordenadas como necesite la figura). Ejemplo:
Es imprescindible saber localizar las coordenadas de un punto dentro del gráfico, para ello es necesario utilizar una
aplicación o un programa gráfico. El punto correspondiente a las coordenadas 0, 0 es la esquina superior izquierda de la
imagen. El sistema de coordenadas es el sistema cartesiano con valores absolutos.
Rectángulo
Para definir un rectángulo sólo son necesarios 4 valores: las dos coordenadas de la esquina superior izquierda (punto A)
y las dos de la esquina inferior derecha (punto B).
Círculo
Para la definición de un círculo únicamente hacen falta 3 valores: las coordenadas del centro y la dimensión del radio.
Polígono
Este es el tipo de área más utilizado, se utiliza para crear áreas que no tienen una forma geométrica de las vistas con
anterioridad. El número de valores necesarios será distinto según la cantidad de puntos seleccionados (dos valores por punto).
Lo relevante en rojo. Creamos tres mapas sensitivos con el atributo “ name ” = mapa_figuras. Cada área tiene una forma diferente (atributo shape ; fíjate en cómo están creadas) y un atributo “ title ”, que sirve para ver una descripción cuando pasamos el puntero sobre el área en cuestión.
Finalmente, en el atributo usemap de la imagen (formas.gif) le asigno el name dado a los maps. Con eso le estoy diciendo a la imagen que va a tener esas áreas asociadas.
Cómo saber las coordenadas de una imagen
Para ello, basta con abrir algún editor de imágenes que nos permita conocer las coordenadas sobre la que pasa el puntero del ratón.
Mostramos un ejemplo con la aplicación de Windows “Paint”.
- Entramos en el paint y abrimos el archivo utilizado para el ejemplo anterior (adjunto en la práctica “formas.gif”).
- Si nos fijamos, en la parte inferior izquierda del editor, tenemos unas coordenadas. En concreto son las coordenadas en donde se encuentra el cursor. Estos son los valores que tendré que utilizar a la hora de definir las áreas.
- Si comprobamos los valores que nos da el paint con los vistos en el ejemplo, vemos que concuerda. Comprobadlo. Si no lo veis, preguntad porque es importante.
Ejercicio
Dada la imagen dioses.gif, crea una Web en la que pinchando en cada uno de los dioses, me enlace a su página relacionada en la Wikipedia. Además, se debe poder ver una descripción al situarse sobre cada área.
Los nombres de los dioses seleccionados en la imagen son: Hera, Afrodita, Hermes y Atenea. El que está sentado es Zeus.
