Realizzare un menu con una mappa di immagini

Tramite l’uso delle mappe d’immagine si ha la possibilita di rendere un’immagine cliccabile in più punti. Le mappe possono essere lato client o lato server, in questo articolo è stato preferito l’uso di mappe lato client per la loro maggiore semplicità d’uso.

Innanzitutto bisogna creare l’immagine con un programma di grafica, in questo caso utilizzeremo un’immagine di 285×30 pixel.

Ora che è stata creata l’immagine, la si deve inserire nella pagina web con il classico tag <img>, ma bisogna specificarne il nome tramite l’attributo usemap.

<img src="menu.gif" usemap="#menu" border="0">

Dopo aver inserito l’immagine si devono specificare le coordinate x e y che delimitano le parti "cliccabili" dell’immagine in questo modo:

<map name="menu" id="menu">
    <area shape="rect" coords="0,0,57,30" href="http://www.vinzplanet.com" alt="Home">
</map> 

Tramite il tag <map> si apre la mappa di immagine e il tag <area> serve a determinare le coordinate della mappa: con l’attributo shape viene specificata la forma dell’area sensibile che può essere quadrangolare (rect), circolare (circle) e poligonale (poly). Per specificare le coordinate della mappa viene utilizzato l’attributo coords in cui vengono impostati i valori in quest’ordine:

• la x del lato di sinistra
• la y del lato alto
• la x del lato destro
• la y del lato in basso 

Per ricavare le coordinate si può utilizzare un programma di grafica, quindi, dopo aver posizionato la freccia del mouse sul punto desiderato si potranno leggere le sue coordinate sui righelli. Nel nostro caso l’area sensibile deve partire dall’estrema sinistra dell’immagine (0px) e dal basso (0px), per poi estendersi di 57px orizzontalmente (x) e 30px verticalmente(y).

Ora possiamo fare lo stesso per gli altri pulsanti:

<map name="menu" id="menu">
   <area shape="rect" coords="0,0,57,30" href="http://www.vinzplanet.com" alt="Home">
   <area shape="rect" coords="57,0,114,30" href="#pagina1" alt="Bio">
   <area shape="rect" coords="114,0,171,30" href="#pagina2" alt="Link1">
   <area shape="rect" coords="171,0,228,30" href="#pagina3" alt="Link2">
   <area shape="rect" coords="228,0,285,30" href="#pagina4" alt="E-mail">
</map>

Utilizzando Internet explorer noterete che dopo aver cliccato sull’area sensibile, verrrà visualizato un fastidioso tratteggio intorno ad essa, per ovviare a questo problema si può aggiungere al tag <area> questa porzione di codice javascript :

onFocus='this.blur()'

Comunque è bene sapere che ci sono dei software appositi per creare mappe di immagini in modo automatico.

Ecco un esempio del codice : mappa di immagini

Popularity: 10% [?]

Vuoi essere sempre aggiornato???  Iscriviti  ai feed o invia un  trackback