HTML/Immagini: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
importo da w:Area (XML DOM) |
|||
Riga 60:
== Mappa d'immagine ==
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 <tt>area</tt>.
'''Area''' è un oggetto [[XML|XML DOM]] utilizzato per creare una ''mappa immagine'' ovvero per rendere ''attiva''<ref>L'area ''attiva'' dell'immagine produce un [[w:Programmazione ad eventi|evento]] quando il [[w:cursore|puntatore]] del [[w:mouse|]] viene posizionato sopra o viene cliccato, dopo aver posizionato il puntatore, un pulsante del mouse (o un tasto della [[w:Tastiera (informatica)|tastiera]] se impostato).</ref> una (o una o più porzioni di) [[w:Immagine#Immagini digitali|immagine]] in un documento [[HTML]].
=== Proprietà ===
{| {{prettytable}}
!Proprietà
!Funzione
|-
| ''accessKey'' || Imposta o restituisce un tasto per l'accesso all'area attiva da [[w:Tastiera (informatica)|tastiera]]
|-
| ''alt'' || Imposta o restituisce un testo alternativo per i [[w:browser|browser]] che non supportano l'oggetto ''Area''
|-
| ''coords'' || Imposta o restituisce una sequenza di lunghezze (separate da virgole) che costituiscono le [[w:coordinata|coordinate]] dell'area interattiva.
|-
| ''hash'' || Imposta o restituisce la parte dell'[[w:URL|URL]] costituita dal [[w:Collegamento ipertestuale|link]] (preceduto da #) impostato all'interno dell'oggetto.
|-
| ''host'' || Imposta o restituisce il nome dell'[[w:host|host]] e la [[w:Porta (reti)|porta]] dell'URL.
|-
| ''hostname'' || Imposta o restituisce il nome dell'host e l'[[w:Indirizzo IP|Indirizzo IP]] dello stesso.
|-
| ''href'' || Imposta o restituisce l'intero URL.
|-
| ''id'' || Imposta o restituisce l'[[w:Identificatore|id]] associato all'oggetto.
|-
| ''noHref'' || Imposta o restituisce lo stato di inattività dell'area
|-
| ''pathname '' || Imposta o restituisce il [[w:pathname|pathname]] dell'URL
|-
| ''port'' || Imposta o restituisce la porta dell'URL.
|-
| ''protocol'' || Imposta o restituisce il [[w:Protocollo di rete|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 [[w:Tabulatore|tab]].
|-
| ''target'' || Imposta o restituisce il nome di destinazione del link dell'URL.
|}
=== Eventi ===
{| {{prettytable}}
!Evento
!Funzione
|-
| ''onClick'' || Esegue una porzione di [[w:Codice (teoria dell'informazione)|codice]] dopo un singolo click del mouse sull'area attiva.
|-
| ''onDblClick'' || Esegue una porzione di [[w:Codice (teoria dell'informazione)|codice]] dopo un doppio click del mouse sull'area attiva.
|-
| ''onMouseOut'' || Esegue una porzione di [[w:Codice (teoria dell'informazione)|codice]] all'uscita del puntatore del mouse dall'area attiva.
|-
| ''onMouseOver'' || Esegue una porzione di [[w:Codice (teoria dell'informazione)|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):
Line 83 ⟶ 137:
Precedemente favicon era un elemento supportato solamente da Internet Explorer e per poterlo utilizzare era necessaria la seguente sintassi: <code><link rel="icon" href="http://<percorso>/favicon.ico"></code>. Tuttavia come già detto, questa sintassi è stata dichiarata deprecata dal W3C e il primo esempio che vi abbiamo mostrato è quello definito negli standard.
==Note==
{{avanzamento|50%}}▼
<references/>
[[Categoria:HTML|Immagini]]
[[en:HTML Programming/Images]]
▲{{avanzamento|50%}}
| |||