Nuova pagina 2

Le immagini e le mappe di immagine

Inserire le immagini

Finora abbiamo visto come inserire e formattare il testo all’interno delle nostre pagine Web. Naturalmente possiamo inserire anche delle immagini: diagrammi e grafici, fotografie, e in genere immagini create con un programma di elaborazione grafica (come The GIMP, Photoshop o Paint Shop Pro).

I formati ammessi nel Web sono sostanzialmente tre:

GIF (Graphic Interchange Format): le GIF sono immagini con non più di 256 colori (dunque con colori piatti e senza sfumature), come grafici o icone
JPG: è l’acronimo del gruppo di ricerca che ha ideato questo formato (il Joint Photographic Experts Group), idoneo per le immagini di qualità fotografica
PNG (Portable Network Graphic). Il PNG è un tipo di immagine introdotto più recentemente, elaborato dal W3C per risolvere i problemi di copyright del formato GIF (che è appunto proprietario); tuttavia oggi il PNG è letto oramai da tutti i browser e offre alcune caratteristiche che gli altri formati non hanno (come il supporto al canale alfa, caratteristica questa non ancora perfettamente supportata da ogni browser).

Non provate dunque a inserire un file “.psd” (è il formato nativo di Photoshop) all’interno della vostra pagina HTML: con grande probabilità il browser non vi caricherà il file che vorreste includere (dovete infatti prima convertire il file in uno dei formati sopra-indicati).

Inoltre è importante ricordare che il codice HTML fornisce delle indicazioni al browser su come visualizzare il testo e le immagini - ed eventualmente i video e i suoni - all’interno della pagina: il testo (come abbiamo visto) è scritto direttamente nel file HTML, le immagini invece sono caricate insieme alla pagina.

Attenzione dunque a non inserire immagini troppo pesanti (ricordatevi di ottimizzare sempre i file); bisogna evitare inoltre di sovraccaricare la pagina con troppe immagini. Allo stato attuale dell’arte infatti molti utenti (e non soltanto quelli italiani) navigano ancora con un modem analogico da 56 Kbs: inserire troppe immagini significa dunque creare pagine lente da caricare.

Per ottenere un sito web dalla grafica accattivante, spesso è sufficiente giocare con i colori dello sfondo e delle scritte.

La sintassi per inserire una immagine è:

dove:

img significa image, cioè immagine
src significa source, cioè origine

Il tag <img> è un tag “vuoto”, che non ha la necessità di essere chiuso.

Ecco ad esempio come inserire il logo di isolajava in una pagina dallo sfondo blu (si presuppone che il logo si trovi nella stessa cartella del file HTML):

Resta valido il discorso sui percorsi relativi ed assoluti visto in precedenza. Avremo ad esempio:

Dal momento che il browser normalmente non sa quali siano le dimensioni dell’immagine, finché questa non sia caricata completamente, è un’ottima abitudine quella di indicare già nel codice la larghezza (width) e l’altezza (height) dell’immagine: in questo modo si evita di vedere la pagina costruirsi man mano che viene caricata, poiché stiamo dando al browser un’idea dell’ingombro. Ad esempio:

L’attributo alt è utile per specificare il testo alternativo (alternative text), fintanto che l’immagine non viene caricata o nel caso in cui non lo sia affatto:

L’attributo alt è di estrema utilità per rendere il sito accessibile a tutti gli utenti: i disabili che non sono in grado di vedere nitidamente le immagini sullo schermo potrebbero avere delle difficoltà, nel caso in cui l’attributo alt non sia specificato.

Gli ipo-vedenti e i non-vedenti sono infatti in grado di comprendere il contenuto delle immagini grazie a dei software appositi (gli screen reader) che “leggono” lo schermo tramite un programma di sintesi vocale. Non specificare il testo alternativo significa rendere impossibile la navigazione.

Nel caso in cui la spiegazione dell’immagine sia particolarmente lunga, è possibile espandere la descrizione sintetica - fornita tramite l’attributo "alt" - grazie ad un altro attributo: si tratta di longdesc (long description), che permette di specificare un file con una spiegazione estesa dell’immagine. Ecco la sintassi:

Nell’esempio allegato è possibile visualizzare il codice di una pagina con la descrizione estesa dell’immagine. Nel caso in cui si utilizzi questo attributo è anche buona norma utilizzare un link esplicito alla pagina della descrizione.

longdesc dovrebbe essere utilizzato soprattutto nel caso in cui si usino delle immagini mappate (argomento che analizzeremo in seguito), in modo da fornirne una spiegazione esauriente in ogni contesto.

In realtà l'attributo alt non serve, come molti credono, a visualizzare un etichetta esplicativa dell’immagine nel caso in cui il cursore del mouse si soffermi sopra essa: questo semmai è un effetto collaterale che si verifica con Internet Explorer. L’attributo corretto per far visualizzare un testo che commenti l’immagine è infatti title:

È inoltre possibile specificare la grandezza (in pixel) del bordo attorno all’immagine:

Si noti che i link lasciano sempre di default un bordo di un pixel attorno all’immagine (il colore sarà quello espresso nel body dall’attributo link, oppure quello default – quindi blu – se non specificato altrimenti):

Dunque, nel caso dei link se non si desidera avere i bordi, sarà necessario impostarli a “0”:

Disporre le immagini in un contesto

Se inserita in un testo, normalmente una immagine è inserita nel testo. Così:

Esempio di immagine nel testo

isolajava.com è il sito italiano sul web publishing <img src="logo.gif" width="224" height="69" border="0"> con centinaia di esempi e guide esplicative

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Abbiamo tuttavia la possibilità di allineare l'mmagine e il testo come preferiamo, utilizzando l’attributo align. Vediamo di seguito come vengono visualizzati align="left" e align="right":

Esempio di immagine allineata a sinistra

<img src="logo.gif" width="224"height="69"border="1"align="left">
isolajava.com èil sito italiano sul web publishing, con centinaia di esempi e guide esplicative

Esempio con immagine allineata a destra

<img src="logo.gif" width="224" height="69" border="1" align="right">
isolajava.com è il sito italiano sul web publishing, con centinaia di esempi e guide esplicative

Altri valori possibili sono:

Valore di align	Visualizzazione
bottom	allinea la prima riga di testo sulla sinistra nella parte bassa dell'immagine (è così di default).
middle	allinea la prima riga di testo sulla sinistra al centro dell'immagine.
top	allinea la prima riga di testo sulla sinistra nel lato superiore dell'immagine.

Da notare che, mentre align=”left” e align=”right”, sono utili per spostare l’immagine a sinistra o a destra, gli altri valori servono piuttosto per disporre le posizioni verticali di testo e immagini.

Infine con hspace (horizontal space, cioè "spazio orizzontale") e vspace (vertical space, cioè “spazio veritcale”) possiamo impostare lo spazio (in pixel) che deve essere lasciata tra l’immagine e cioè che la circonda.

Nel caso di hspace impostiamo uno spazio orizzontale da ambo i lati, come in questo caso:

Nel caso di vspace lo spazio è verticale, ma sempre da ambo i lati:

cioè:

Un attributo importante - di cui non vedrete nessun effetto "pratico" di formattazione, ma che vi servirà ad esempio per creare un effetto di "scambio immagine" grazie a JavaScript - è quello che permette di specificare il nome dell'immagine:

Approfondimenti

Ovviamente sarebbe meglio impostare lo spessore e il colore dei bordi, gli spazi e la disposizione del testo attorno alle immagini attraverso i fogli di stile.

Le mappe di immagine

A volte è necessario far sì che solo una determinata parte di un'immagine sia collegata a un link. È il tipico caso delle Regioni d’Italia: abbiamo una cartina e abbiamo la necessità che alla sagoma di ciascuna regione corrisponda un differente link.

In questo caso possiamo utilizzare le mappe. Ne esistono di due tipi:

le mappe lato client
le mappe lato server (non più utilizzate)

Le mappe lato-client

Questo tipo di mappa è contraddistinto dall’attributo usemap del tag img:

come valore dell’attributo usemap bisogna specificare il nome della mappa a cui l'immagine fa riferimento.

A questo punto non ci resta che creare la mappa:

<map name=”nomeMappa”>
…
</map>

All’interno del tag <map> dobbiamo poi specificare le aree sensibili a cui corrisponderanno i nostri link, con relativi forme, coordinate e collegamenti. Per farlo si utilizza il tag <area>, per ogni zona sensibile che vogliamoc reare.

Vediamo un esempio: abbiamo preso la cartina dell’Italia e – a scopo puramente didattico – abbiamo deciso di mappare la Regione Valle D’Aosta con una forma rettangolare, la Sardegna con un cerchio, e la Sicilia con un poligono (per rendervene conto passate il mouse su una di queste regioni).

Figura 1. Esempio di immagine con mappe
Esempio di immagine con mappe

le coordinate fanno riferimento all’immagine stessa, e il vertice in alto a sinistra è l’ipotetico punto con coordinate 0,0. Le coordinate dei punti che descrivono le varie forme si riferiscono alla distanza in pixel da quel punto (si tratterà di volta in volta della x o della y).

Come si può vedere per definire un’area è necessario specificare una forma, che può essere di tre tipi:

Forma	Descrizione
rettangolare <area shape="rect">	è necessario specificare alcune coordinate del rettangolo per individuare i veritici. In particolare sono da specificare (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
circolare <area shape="circle">	è necessario specificare le coordinate del centro (x e y) e la misura del raggio (in pixel)
poligonali <area shape="poly">	è necessario specificare tutte le coordinate del poligono a coppie

In ciascun tag <area> è inoltre possibile specificare l’attributo alt per il testo alternativo (ed eventualmente il longdesc).

Per il resto, il tag <area> si comporta esattamente come il tag <a>, con la possibilità di specificare ad esempio il target in cui aprire i link.

In realtà non è difficile disegnare le mappe, perché ci sono già software che lo fanno al posto nostro. Se utilizzate un editor visuale ad (esempio Dreamweaver) potete trovare degli strumenti integrati nell’ambiente di sviluppo che vi consentono di disegnare le mappe in tutta tranquillità.

In alternativa si possono usare programmi appositi, come CoffeCup Image Mapper, CuteMap o MapEdit

Per quel che riguarda il luogo in cui posizionare la mappa così creata, dipende dalle vostre preferenze: è una buona norma però situare la mappa in prossimità dell’immagine, in modo da poterla reperire facilmente.

Approfondimenti

Con Internet Explorer le mappe a volte lasciano un fastidioso tratteggio sull'area che è stata appena cliccata. Per eliminarlo è sufficiente utilizzare la seguente sintassi:

onFocus='this.blur()'

da applicare al tag <AREA> in questo modo:

Le mappe di immagine lato server

In questo caso la mappatura dell’immagine non è visibile all’interno della pagina HTML, ma è presente all’interno di un programma sul server, ad esempio un cgi.

La presenza di una mappa sull’immagine è specificata dall’attributo ismap del tag <img> e l’indicazione della posizione in cui si trova la mappa sul server viene data attraverso un link. Ad esempio:

(notare che l’attributo ismap non ha alcun valore).

Il link fa riferimento alla locazione della mappa sul server, e quando l’utente cliccherà sul collegamento, sulla barra degli indirizzi comparirà qualcosa di questo genere:

http://www.isolajava.com/cgi-bin/menu.map?25,55

dal momento che il programma sul server avrà tradotto la mappa in coordinate da passare al mouse.

C’è da dire che le mappe lato server non vengono più usate, perché estremamente scomode (è poco pratico mantenere in differenti file le indicazioni sull’immagine e quelle sulla mappa), dunque non le vedremo nel dettaglio. Venivano utilizzate soprattutto agli albori del web, quando non tutti i browser erano in grado di interpretare le mappe lato-client: con le mappe lato-server si aveva la certezza, allora, che qualsiasi utente potesse leggere correttamente l’immagine (dal momento che il lavoro di mappatura veniva fatto dal server, appunto, e non dal computer dell’utente).

ESEMPIO DELL'ITALIA MAPPATA - Scarica lo ZIP

Approfondimenti

Le mappe lato-client

Approfondimenti

♣ © All Rights Reserved - www.isolajava.com ♣