HTML/Immagini
Inserire un'immagine
[modifica | modifica sorgente]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
Definire l'allineamento
[modifica | modifica sorgente]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 testoright: l'immagine risulta allineata a destra del testo
Immagine come link
[modifica | modifica sorgente]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 | modifica sorgente]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 | modifica sorgente]| 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 | modifica sorgente]| 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 | modifica sorgente]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 | modifica sorgente]- ↑ 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).