Html & XHtml
Articoli xhtml
Realizzare un menu con una mappa di immagini | Realizzare un menu con una mappa di immagini |
|
|
| Scritto da Vincenzo | |
|
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 285x30 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:
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:
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:
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 :
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 |
| Pros. > |
|---|
Articoli correlati
- Cosa è il linguaggio html?
- Da html a xhtml, come trasformare il codice
- Inserire i commenti nel codice html
- Il colore di sfondo
- Inserire un immagine di sfondo
- Come è strutturata la pagina html
- I margini della pagina html
- Modificare il colore del testo e dei link
- Inserire il testo in un documento html
- Allineare e suddividere il testo ed i paragrafi nella pagina
- Gli stili fisici del testo
- Gli stili logici del testo
- Il font, il colore e le dimensioni del testo
- Gli elenchi in html
Tag
vuota linguaggi insert negativo dello svariati superiore percorso indice viviani originale primary molte pconnect mantenere esplorare basso riconoscere fornite somma| Corso HTML Il linguaggio di marcatura per il Web. Corso con tutor ed attestato finale! |
| Corso CSS e XHTML Web Design ed Accessibilità secondo il W3C. Corso con tutor ed attestato finale! |








