Le immagini possono rendere un sito Web più attraente e conviviale, tuttavia è importante non esagerare dato che le immagini possono implicare un tempo di caricamento piuttosto lungo e possono in alcuni casi nuocere alla leggibilità.
Il tag IMG del linguaggio HTML permette di inserire delle immagini in una pagina HTML. L'immagine può essere posta sullo stesso server della pagina nella quale è inserita ma anche su un altro server specificando il suo URL completo.
Seuls les formats d'images suivants sont acceptés en standard dans les spécifications
du W3C :
Gli attributi principali del tag IMG sono i seguenti :
Quindi per inserire un'immagine bisognerà digitare un tag di questo tipo :
<IMG SRC="url_dell_image" ALT="Testo sostitutivo all'immagine" TITLE="Testo da visualizzare">
| Attributo | Valore | Risultato | Effetto visivo |
|---|---|---|---|
| ALIGN | bottom center left middle top right |
Allineamento dell'immagine | |
| ALT | Testo alternativo all'immagine nel caso in cui l'immagine non si visualizza | ||
| BORDER | Numero intero | Numero di pixel del bordo. Il colore del bordo può essere definito dall'attributo LINK o TEXT del tag <BODY>. Per default l'attributo BORDER vale 1, il che crea una piccola cornice intorno all'immagine. Per non avere questo problema pensate di definirlo come uguale a 0. |  |
| HEIGHT | Numero intero | Altezza della linea (in pixel o in %). Quando questo attributo precisa una dimensione diversa dall'originale del grafico, il navigatore la ridimensiona in modo dinamico, cosa che può provocare una visualizzazione di minore qualità. | |
| HSPACE | Numero intero | Numero di pixel di adattamento tra l'immagine e il testo adiacente (orizzontalmente). | Testo |
| LONGDESC | URL della descrizione dell'immagine. | ||
| LOWSRC | URL | immagine alternativa (generalmente più piccola) visualizzata mentre la vera sia caricata dal navigatore. |  |
| NAME | Permette di definire un nome per l'immagine. Questo attributo è utile soprattutto per la gestione delle immagini in JavaScript. | ||
| SRC | URL | URL dell'immagine | |
| TITLE | Testo alternativo nel caso in cui l'immagine non si visualizza | ||
| USEMAP | URL o nome dell'ancoraggio che definisce l'immagine reattiva. | ||
| VSPACE | Numero di pixel di adattamento tra l'immagine e il testo (verticalmente). | Prova di testo |
|
| WIDTH | Numero intero | Larghezza dell'immagine (in pixel o in %). Quando questo attributo precisa una dimensione diversa dall'originale del grafico, il navigatore la ridimensiona in modo dinamico, cosa che può provocare una visualizzazione di minore qualità. | |
Le immagini si inseriscono nel testo come un carattere, così sembra possibile far scorrere del testo lungo un'immagine.
Esistono in effetti più possibilità, vediamone due :
E' possibile creare delle zone cliccabili anche all'interno di un'immagine con l'attributo USEMAP usato congiuntamente al tag MAP.
L'attributo USEMAP del tag <IMG> punta verso un tag <MAP> che contiene la descrizione della divisione dell'immagine in zone cliccabili.
Il tag <MAP> ha un attributo NAME che definisce il suo nome (NAME="nome") e contiene le zone cliccabili dichiarate grazie ai tag AREA.
| Tag | Attributo | Valore | Effetto visivo |
|---|---|---|---|
| MAP | NAME | ||
| AREA | SHAPE | RECT
CIRCLE
POLY |
Rettangolo (le sue coordinate sono: "ascissa sup sinistra, ordinata sup sinistra, ascissa inf destra, ordinata inf destra") Cerchio (le sue coordinate sono: Poligono (le sue coordinate sono: |
| HREF | URL | Link verso l'URL | |
| COORDS | "XX,XX,XX,XX" | Contiene le coordinate della zona cliccabile, separate da virgole. |
Qui sotto un esempio di immagine reattiva :
<IMG SRC="immagini/immagine.gif" WIDTH=150 HEIGHT=70 USEMAP="#Map"> <MAP NAME="Map"> <AREA SHAPE="rect" HREF="inizio.html" COORDS="0,0,48,28"> <AREA SHAPE="circle" HREF="precedente.html" COORDS="50,30,10"> <AREA SHAPE="poly" HREF="seguente.html" COORDS="60,50,80,30,100,40,50,100"> </MAP>
