Scribd
Cargar
60 vistas

PR6 HTML Mapas Sensitivos

Este documento explica cómo crear mapas sensitivos en HTML para definir áreas sensibles en una imagen que enlacen a otras páginas o secciones. Se definen las áreas utilizando la etiqueta <AREA> y los atributos shape, coords y href. Luego, la imagen se asigna a los mapas mediante el atributo usemap en la etiqueta <IMG>. De esta forma, al hacer clic en un área definida se activa el enlace correspondiente.

Cargado por

metharsis
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
60 vistas

PR6 HTML Mapas Sensitivos

Este documento explica cómo crear mapas sensitivos en HTML para definir áreas sensibles en una imagen que enlacen a otras páginas o secciones. Se definen las áreas utilizando la etiqueta <AREA> y los atributos shape, coords y href. Luego, la imagen se asigna a los mapas mediante el atributo usemap en la etiqueta <IMG>. De esta forma, al hacer clic en un área definida se activa el enlace correspondiente.

Cargado por

metharsis
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

Práctica 6 HTML

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 <AREA>.

Atributos de dicha etiqueta:

1
Práctica 6 HTML

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:

<MAP name="mapa_figuras">
<AREA href="#circulo" shape=circle coords="321,105,70" title="ir a la definición del círculo"
tabindex="3"
</MAP>

- Polygon: se definirá una zona poligonal (tantas coordenadas como necesite la figura).
Ejemplo:

<MAP name="mapa_figuras">
<AREA href="#poligono" shape=polygon
coords="46,219,106,157,200,214,112,238,108,206,68,228" title="ir a la definición del

2
Práctica 6 HTML

polígono" tabindex="2">
</MAP>

Una vez definidas las áreas, nos queda definir la imagen y asignarle los mapas creados. Para ello la
etiqueta IMG tiene un atributo llamado usemap. Su valor será el name de los MAPS creados.

Ejemplo:

<IMG src="graficos/formas.gif" width="400" height="264" usemap="#mapa_figuras" border="0"


title="figuras geométricas">

En este ejemplo hacemos uso de los mapas creados en los ejemplos anteriores.

Ejemplo de lo visto

Vamos a aclararlo todo perfectamente con un ejemplo. Crea la Web figuras.html y pega el siguiente
código:

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY bgcolor="#C0C0C0" text="#008080">

<MAP name="mapa_figuras">
<AREA href="#rectangulo" shape=rect coords="19,28,136,96" title="ir a la definición de
rectángulo" tabindex="1"
</MAP>
<MAP name="mapa_figuras">
<AREA href="#circulo" shape=circle coords="321,105,70" title="ir a la definición del círculo"
tabindex="3"
</MAP>
<MAP name="mapa_figuras">
<AREA href="#poligono" shape=polygon
coords="46,219,106,157,200,214,112,238,108,206,68,228" title="ir a la definición del polígono"
tabindex="2">
</MAP>

<h1 Align="center">Utilización de mapas sensitivos</h1>

<IMG src="formas.gif" width="400" height="264" usemap="#mapa_figuras" border="0"


title="figuras geométricas">
<br><br>

3
Práctica 6 HTML

<p>Es imprescindible saber localizar las coordenadas de un punto dentro del gráfico, para ello es
necesario utilizar una<br>
aplicación o un programa gráfico. El punto correspondiente a las coordenadas 0, 0 es la esquina
superior izquierda de la<br>
imagen. El sistema de coordenadas es el sistema cartesiano con valores absolutos.</p>
<hr>
<br>
<h3 id="rectangulo">Rectángulo</h3>
<p>Para definir un rectángulo sólo son necesarios 4 valores: las dos coordenadas de la esquina
superior izquierda (punto A)<br>
y las dos de la esquina inferior derecha (punto B).</p><br>

<h3 id="circulo">Círculo</h3>
<p>Para la definición de un círculo únicamente hacen falta 3 valores: las coordenadas del centro y
la dimensión del radio.<br>

<h3 id="poligono">Polígono</h3>
<p>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 <br>
anterioridad. El número de valores necesarios será distinto según la cantidad de puntos
seleccionados (dos valores por punto).</p><br>

</BODY>
</HTML>

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.
4
Práctica 6 HTML

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.

También podría gustarte