In questa lezione impareremo come impostare delle immagini impostate in modo da avere delle parti sensibili che una volta cliccate portano a vari link
Per formare questi tipi di immagini bisogna usare questi tag. < map name="nomemappa" > < area shape="valore" coords="valori" href="paginahtml" > < area shape="valore" coords="valori" href="paginahtml" > < /map >
name= : questo attributo serve a dare il nome alla vostra mappa ipertestuale.
shape= : informa il browser della forma del campo sensibile questo può essere: rect (rettangolo),circle (cerchio),poly (un poligono di n lati),default (linka i restanti spazi vuoti).
coords= : pone le coordinate dell'area del link e vanno separate le una delle altre d una virgola. Se c'è un quadrato ci saranno quattro coordinate se c'è un cerchio ci sarà le coordinate del centro x,y e il raggio. Per trovare le varie coordinate bisogna usare un qualsiasi programma di grafica. Con Photoshop, basta selezionare l'area che vogliamo rendere sensibile con qualsiasi strumento (Per esempio il rettangolo per il ritaglio) e tramite la paletta info, possiamo conoscere le coordinate. (clicca qui per vedere l'esempio)
href= : indica la pagina linkata.
Dopo di che bisogna immettere l'immagine nella pagina html percio:
< img src="file.gif" usemap=#nomemappa" >
L'unica differenza dal tag normale è l'ultimo attributo esso serve a impostare la mappa ipertestuale per quella immagine mi raccomando il # non va omesso.
Ecco lo scheletro della mappa da modificare a vostro piacimento
ATTENZIONE! Nell'esempio al posto di X,Y e raggio, vanno messe le coordinate