HTML/Immagini

Wikibooks, manuali e libri di testo liberi.

Inserire un'immagine[modifica]

La sintassi di base per inserire un'immagine all'interno di una pagina web è la seguente <img src="url dell'immagine" alt="testo alternativo">

Attributo Significato
border identifica il bordo che a 0 non è presente, salendo con i numeri aumenta di spessore
title testo informativo, visualizzato posizionando il cursore sopra l'immagine
width forza la dimensione della foto in larghezza
height forza la dimensione della foto in altezza
alt permette di specificare un testo alternativo, descrittivo dell'immagine

È fortemente consigliato inserire testo alternativo per ogni immagine, in modo da migliorare l'accessibilità del sito per i non vedenti in quanto il suo contenuto può essere 'letto' da browser adatti.
Il testo alternativo verrà inoltre visualizzato in automatico se il browser non riesce a visualizzare l'immagine.

I valori di width e height possono essere espressi in pixel o come percentuale della larghezza della pagina.

Esempio di inserimento di un'immagine:

<body>
  <img src="http://it.wikibooks.org/skins-1.5/monobook/user.gif" alt="immagine utente" 
  height="30" width="20" title="Immagine Utente" />
</body>
Nota
Il tag <img> non prevede un tag di chiusura, quindi richiede la barra prima del > finale, per la validazione da parte del WWW Consortium per l'XHTML





Definire l'allineamento[modifica]

L'HTML permette di definire l'allineamento delle immagini rispetto al testo tramite l'attributo align che può assumere i seguenti valori:

  • bottom (default): il bordo inferiore dell'immagine risulta allineato verticalmente con la prima linea del testo.
  • middle: la prima riga del testo è allineato con il centro dell'immagine. Dopo la prima riga, il testo scorre sotto l'immagine.
  • top: la prima riga del testo è allineata con il bordo superiore dell'immagine.
  • left: l'immagine risulta allineata a sinistra del testo
  • right: l'immagine risulta allineata a destra del testo

Immagine come link[modifica]

Se si vuole creare un collegamento ipertestuale su di un'immagine bisogna inserire il tag <img> incluso tra i tag <a href="url"> e </a>.

Ecco un esempio:

<body>
 <a href="http://wikimediafoundation.org">
  <img src="http://it.wikibooks.org/images/wikimedia-button.png" alt="immagine di wikimedia" 
  height="50" width="50" title="Wikimedia" />
 </a> 
</body>

Mappa d'immagine[modifica]

Le mappe d'immagine sono delle mappe costituite da un'immagine sulla cui area sono disposti diversi link. L'esempio più eclatante è la penisola italiana: cliccando, ad esempio, sull'immagine del Lazio si verrà indirizzati verso le pagine inerenti al Lazio; al contrario, cliccando sull'immagine della Sardegna si verrà indirizzati verso le pagine inerenti alla Sardegna. Per ottenere ciò si usa il tag area.

Area è un oggetto XML DOM utilizzato per creare una mappa immagine ovvero per rendere attiva[1] una (o una o più porzioni di) immagine in un documento HTML.

Proprietà[modifica]

Proprietà Funzione
accessKey Imposta o restituisce un tasto per l'accesso all'area attiva da tastiera
alt Imposta o restituisce un testo alternativo per i browser che non supportano l'oggetto Area
coords Imposta o restituisce una sequenza di lunghezze (separate da virgole) che costituiscono le coordinate dell'area interattiva.
hash Imposta o restituisce la parte dell'URL costituita dal link (preceduto da #) impostato all'interno dell'oggetto.
host Imposta o restituisce il nome dell'host e la porta dell'URL.
hostname Imposta o restituisce il nome dell'host e l'Indirizzo IP dello stesso.
href Imposta o restituisce l'intero URL.
id Imposta o restituisce l'id associato all'oggetto.
noHref Imposta o restituisce lo stato di inattività dell'area
pathname Imposta o restituisce il pathname dell'URL
port Imposta o restituisce la porta dell'URL.
protocol Imposta o restituisce il protocollo dell'URL (ad esempio: "http:" o "https:").
search Imposta o restituisce la query-string dell'URL, preceduta dal carattere '?'.
shape Imposta o restituisce la forma (rect, circle, poly) dell'area attiva.
tabIndex Imposta o restituisce un indice sequenziale delle aree attive dell'immagine per spostarsi dall'una all'altra con il tasto tab.
target Imposta o restituisce il nome di destinazione del link dell'URL.

Eventi[modifica]

Evento Funzione
onClick Esegue una porzione di codice dopo un singolo click del mouse sull'area attiva.
onDblClick Esegue una porzione di codice dopo un doppio click del mouse sull'area attiva.
onMouseOut Esegue una porzione di codice all'uscita del puntatore del mouse dall'area attiva.
onMouseOver Esegue una porzione di codice all'ingresso del puntatore del mouse dall'area attiva.

Ecco un esempio (è stata definita l'area dell'immagine da mappare e inserita la mappa da usare, map1, all'interno del tag immagine):

<map name="map1">
<area href="pagina.html" alt="Pagina" title="Pagina" shape="rect" coords="6,116,97,184">
</map>
<img src="esempio.jpg" usemap="#map1">

Immagine nella barra degli indirizzi[modifica]

L'HTML ci permette attraverso il tag <link> di inserire un'immagine nella barra degli indirizzi accanto all'url del sito che si sta visitando (in Mozilla Firefox l'immagine verrà visualizzata anche accanto al titolo della pagina nei tab). L'immagine che vorremmo usare a tale scopo dovrà avere necessariamente il nome di favicon, dovrà essere grande 16x16px o maggiore e potrà essere dei seguenti formati: .gif, .ico o .jpg.

Ecco un esempio su come utilizzare favicon:

<head>  
  <link rel="icon" href="http://<percorso>/favicon.ico">
</head>

Precedemente favicon era un elemento supportato solamente da Internet Explorer e per poterlo utilizzare era necessaria la seguente sintassi: <link rel="icon" href="http://<percorso>/favicon.ico">. Tuttavia come già detto, questa sintassi è stata dichiarata deprecata dal W3C e il primo esempio che vi abbiamo mostrato è quello definito negli standard.

Note[modifica]

  1. L'area attiva dell'immagine produce un evento quando il puntatore del mouse viene posizionato sopra o viene cliccato, dopo aver posizionato il puntatore, un pulsante del mouse (o un tasto della tastiera se impostato).