Imagen con áreas enlazables

24/Sep/2010 HTML , 1 Comentario

En este ejemplo vamos a ver como podemos crear una imagen la cual tenga diferentes partes (o áreas) con enlaces diferentes. Para ello nos vamos a apoyar en los elementos MAP y AREA de HTML.

Lo primero ver la imagen sobre la que vamos a crear las áreas...

La idea es que cada logo de la imagen redirija a un enlace diferente. Lo primero que hacemos es cargar la imagen en la página:

  1. <img usemap="#navegadores" src="navegadores.png" border="0" alt="Navegadores" width="821" height="152" />

Como se puede apreciar hemos utilizado el atributo usemap para indicarle el nombre del mapa que contendrá la definición de las áreas enlazables. En este caso el mapa se llama navegadores.

Pasemos a definir el mapa. El mapa se define mediante el elemento MAP:

  1. <map id="navegadores" name="navegadores">
  2. ...
  3. </map>

Dentro del mapa es donde definiremos las áreas, mediante elementos AREA. Un elemento AREA tiene varios atributos, pero los más importantes son:

  • href, es el enlace donde se irá al pinchar sobre ese área.
  • shape, es el tipo de figura que queremos que represente el área: default|rect|circle|poly
  • coords, los las coordenadas de la imagen que representan los vértices de la figura. O centro y rádio en el caso de que sea un círculo

En este caso, sobre la imagen definiríamos los siguientes áreas:

  1. <area shape="rect" coords="0,0,157,147" href="/que-es-internet-explorer/" alt="Internet Explorer" />
  2. <area shape="rect" coords="164,0,321,147" href="/que-es-firefox/" alt="Firefox" />
  3. <area shape="rect" coords="340,0,497,147" href="/que-es-google-chrome/" alt="Google Chrome" />
  4. <area shape="rect" coords="507,0,664,147" href="/que-es-safari/" alt="Safari" />
  5. <area shape="rect" coords="659,0,816,147" href="/que-es-opera/" alt="Opera" />

En nuestro caso hemos utilizado todo rectángulos.

Lo más complicado en estos casos es encontrar las coordenadas del área. Para ello te recomiendo que utilices herramientas como Image Map Creator la cual genera las coordenadas y el código HTML.

Vídeos sobre HTML


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

Un comentario en “Imagen con áreas enlazables”

Víctor Cuervo

Angela

Hola quisiera poner un link externo a este slider pero cunado lo pongo se me pierde las imagenes.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*