Mapas de imagenes con HTML

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 de nuestro documento HTML.
Un código, situado enel interior de la etiqueta , 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 losenlaces, 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 definidopor 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 coordenadasX,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.
Dentro de ella queremosintroducir un enlace a cada uno de los elementos que la componen. Para ello, definiremos nuestros enlaces como zonas circulares de pequeño tamaño que serán distribuidas a lo largo y ancho de laimagen.
Veamos a continuación el código que utilizaremos:










Pulsa en los círculos para acceder a las secciones!


Nota: Los href de las áreas van a #
Este es un ejemploparcial de utilización de los mapas, faltaría colocar los href con valores reales y no con la #. Cada uno de los enlaces de las áreas -atributo href de la etiqueta - deberían llevar a una página web. Elejemplo quedaría completo si creasemos todas las páginas donde enlazar las áreas y colocasemos los href dirigidos hacia dichas páginas. Como no hemos hecho las páginas "destino" hemos colocadoenlaces que no llevan a ningún sitio, que, como puedes ver, se indica con el caracter "#".
Podéis observar, tal y como hemos explicado antes, que nuestro mapa consta de dos partes principales: la imagen...