En este ejemplo vamos a ver cómo 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:
<img src="navegadores.png" alt="Navegadores" usemap="#navegadores" width="821" height="152" border="0" />
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:
<map id="navegadores" name="navegadores"> ... </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:
<area shape="rect" coords="0,0,157,147" href="/que-es-internet-explorer/" alt="Internet Explorer"> <area shape="rect" coords="164,0,321,147" href="/que-es-firefox/" alt="Firefox"> <area shape="rect" coords="340,0,497,147" href="/que-es-google-chrome/" alt="Google Chrome"> <area shape="rect" coords="507,0,664,147" href="/que-es-safari/" alt="Safari"> <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.
El código final quedaría de la siguiente forma:
<map id="navegadores" name="navegadores"> <area shape="rect" coords="0,0,157,147" href="/que-es-internet-explorer/" alt="Internet Explorer"> <area shape="rect" coords="164,0,321,147" href="/que-es-firefox/" alt="Firefox"> <area shape="rect" coords="340,0,497,147" href="/que-es-google-chrome/" alt="Google Chrome"> <area shape="rect" coords="507,0,664,147" href="/que-es-safari/" alt="Safari"> <area shape="rect" coords="659,0,816,147" href="/que-es-opera/" alt="Opera"> </map>
