Immagini e mappe

Immagini

Le immagini sono uno degli oggetti più frequenti di una pagina Web: è comunque opportuno non esagerare con le dimensioni o i colori, in quanto devono essere di ausilio al navigatore e non causare eccessivo ritardo nella presentazione della pagina.

Inoltre, bisogna sempre considerare che il contenuto informativo di un'immagine non è sempre accessibile (non vedenti, screeen di dimensioni ridotte).

I browser visualizzano due tipi di immagini, .gif e .jpg (le GIF animate sono una soluzione per creare effetti visuali dinamici ripetitivi con poca occupazione di memoria).


Per inserire un'immagine in una pagina si usa il tag:

<img src="URI" | "name" [height="n"] [width="n"] alt="string" 
[align="top" | "center" | "bottom"] [usemap="URI"] >

Le dimensioni sono facoltative e se inserite permettono al browser di riservare uno spazio adeguato all'immagine.

E' opportuno definire l'attributo ALT="string", per indicare al browser una stringa alternativa da visualizzare al posto dell'immagine in caso di ridotta accessibilità.

Le immagini possono essere usate anche nei collegamenti ipertestuali:

<a href="URI"><img src="imagename" .. ></a>

Per riempire lo sfondo della pagina con un'immagine si usa l'attributo:

<body background="URI">

Image Map

Le image map costituiscono un metodo sofisticato per creare collegamenti ipertestuali. Una image map è un'immagine divisa in aree, ognuna delle quali è un'ancora.

Per associare una mappa ad un'immagine, si usa l'attributo usemap:

<img src="URI" usemap="URI" .. >

La mappa, generalmente definita all'interno dello stesso documento, è un elemento equivalente ad un'ancora di destinazione:

<map name="URI">

all'interno del quale è vengono definite le aree attive sull'immagine:

<area shape="circle" | "rect" | "poly" | "default"  
href="URI" coords="string" alt="string">


SHAPE definisce la forma dell'area, HREF l'ancora di destinazione del collegamento, COORDS la posizione dell'area nella mappa. Il testo ALT viene visualizzato dal browser per indicare dove porta il link, ed è obbligatorio.


Esempio 1

I documenti a.html e b.html sono rispettivamente una pagina verde e una blu

<html>
<head>
<title>Image Map</title>
</head>
<body>

<img src="../immagini/uno.jpg" usemap="#map" height=300 width=300
alt="Tutto rosso">

<map name="map">
<area shape="rect" href="./a.html" alt="uno" coords="0,0,100,100" >
<area shape="circle" href="b.html" alt="due" coords="200,200,50" >
</map>

</body>
</html>


Esempio 2

<html>
<head>
<title>Image Map</title>
</head>
<body>

<img src="../immagini/famiglia.gif" usemap="#map" alt=" La famiglia Simpson al completo.">
<map name="map">
<area href="incostruzione.html" alt="Mio Padre" shape="circle" coords="56,78,30">
<area href="incostruzione.html" alt="Mia madre" shape="circle" coords="112,94,30">
<area href="incostruzione.html" alt="Mio fratello" shape="circle" coords="40,182,30">
<area href="lisa.html" alt="Io, Lisa" shape="circle" coords="143,201,30">
<area href="incostruzione.html" alt="Mia sorella" shape="circle" coords="67,237,30">
</map>
</body>
</html>