Argomenti
Le caratteristiche multimediali dell'HTML consentono agli autori di includere immagini, applet (programmi che vengono automaticamente scaricati ed eseguiti sulla macchina dell'utente), video e altri documenti HTML nelle loro pagine.
Per esempio, per includere un'immagine PNG in un documento, gli autori possono scrivere:
<BODY> <P>Questo è un primo piano del Grand Canyon: <OBJECT data="canyon.png" type="image/png"> Questo è un <EM>primo piano</EM> del Grand Canyon. </OBJECT> </BODY>
Le versioni precedenti dell'HTML consentivano agli autori di includere immagini (per mezzo di IMG) e applet (per mezzo di APPLET). Questi elementi hanno parecchi limiti:
Per ovviare a questi inconvenienti, l'HTML 4.0 introduce l'elemento OBJECT, che offre una soluzione per tutti gli usi al problema dell'inclusione generica degli oggetti. L'elemento OBJECT consente agli autori di HTML di specificare tutto ciò che è richiesto da un oggetto per la sua rappresentazione da parte dell'interprete: codice sorgente, valori iniziali e dati di esecuzione. In questa specifica, il termine "oggetto" è usato per descrivere le cose che le persone vogliono inserire nei documenti HTML; altri termini comunemente usati per queste cose sono: applet, plug-in, gestori di media, ecc.
L'elemento OBJECT include così alcuni dei compiti svolti da altri elementi esistenti. Consideriamo la seguente tabella delle funzionalità:
| Tipo di inclusione | Elemento specifico | Elemento generico |
|---|---|---|
| Immagine | IMG | OBJECT |
| Applicazione | APPLET (disapprovato.) | OBJECT |
| Un altro documento HTML | IFRAME | OBJECT |
La tabella indica che ogni tipo di inclusione ha una soluzione specifica e una generale. L'elemento generico OBJECT servirà come soluzione per implementare i futuri tipi di media.
Per includere immagini, gli autori possono usare l'elemento OBJECT o l'elemento IMG.
Per includere applet, gli autori dovrebbero usare l'elemento OBJECT dato che l'elemento APPLET è disapprovato.
Per includere un documento HTML in un altro, gli autori possono usare sia il nuovo elemento IFRAME o l'elemento OBJECT. In entrambi casi, il documento incorporato resta independente dal documento principale. I browser visuali possono presentare il documento incorporato in una finestra distinta all'interno del documento. Consultare le note sui documenti incorporati per un paragone di OBJECT e IFRAME per l'inclusione dei documenti.
Le immagini e gli altri oggetti inclusi possono essere associati a collegamenti sia tramite il meccanismo di collegamento predefinito, sia anche attraverso Mappe sensibili. Una immagine sensibile specifica regioni geometriche attive di un oggetto incluso e assegna un collegamento ad ognuna di tali regioni. Quando attivati, questi collegamenti possono recuperare un documento, eseguire un programma sul server, ecc.
Nei paragrafi seguenti discutiamo i vari meccanismi a disposizione degli autori per includere oggetti multimediali e creare Mappe sensibili per quelle inclusioni.
<!-- Per evitare problemi agli interpreti testuali e anche per produrre un contenuto di immagine comprensibile e navigabile agli interpreti non visuali, è neccessario provvedere una descrizione con ALT ed evitare immagini sensibili sul lato server --> <!ELEMENT IMG - O VUOTO -- Immagine incorporata --> <!ATTLIST IMG %attrs; -- %coreattrs, %i18n, %events -- src %URI; #REQUIRED -- URI dell'immagine da includere -- alt %Text; #REQUIRED -- descrizione breve -- longdesc %URI; #IMPLIED -- collegamento alla descrizione estesa (complementare ad alt) -- height %Length; #IMPLIED -- sovrapposizione di un comando di altezza -- width %Length; #IMPLIED -- sovrapposizione di un comando di ampiezza -- usemap %URI; #IMPLIED -- usa immagine sensibile sul lato cliente -- ismap (ismap) #IMPLIED -- immagine sensibile sul lato server -- >
Tag iniziale: richiesto, Tag finale: proibito
Definizioni degli attributi
Attributi definiti altrove
L'elemento IMG incorpora un'immagine nel documento corrente alla locazione nella definzione dell'elemento. IMG non ha contenuto; è di solito rimpiazzato in linea dall'immagine indicata dall'attributo src; fanno eccezione le immagini allineate a destra o a sinistra che sono "fluttuanti" non in linea.
In un esempio precedente avevamo definito un collegamento a una foto di famiglia. Qui inseriamo una foto direttamente nel documento corrente:
<BODY>
<P>Sono appena tornato dalle vacanze! Ecco una foto della mia famiglia al lago:
<IMG src="http://www.somecompany.com/People/Ian/vacation/family.png"
alt="Una foto della mia famiglia al lago.">
</BODY>
Tale inclusione può essere ottenuta anche con l'elemento OBJECT come segue:
<BODY>
<P>Sono appena tornato dalle vacanze! Ecco una foto della mia famiglia al lago:
<OBJECT data="http://www.somecompany.com/People/Ian/vacation/family.png"
type="image/png">
Una foto della mia famiglia al lago.
</OBJECT>
</BODY>
L'attributo alt specifica un testo alternativo che viene presentato quando l'immagine non può essere visualizzata (vedere sotto le informazioni su come specificare un testo alternativo). Gli interpreti devono visualizzare il testo alternativo quando non possono supportare le immagini, non possono supportare un certo tipo di immagine o quando sono configurati per non visualizzare le immagini.
L'esempio seguente mostra come l'attributo longdesc può essere usato per collegare una descrizione più completa:
<BODY>
<P>
<IMG src="sitemap.gif"
alt="Mappa del sito degli HP Labs"
longdesc="sitemap.html">
</BODY>
L'attributo alt fornisce una descrizione breve dell'immagine. Dovrebbe essere sufficiente per permettere agli utenti di decidere se vogliono seguire il collegamento indicato dall'attributo longdesc a una descrizione estesa, in questo caso "sitemap.html".
Si prega di consultare il paragrafo sulla visualizzazione degli oggetti, immagini e applet per informazioni su dimensioni, allineamento e bordi delle immagini.
<!ELEMENT OBJECT - - (PARAM | %flow;)* -- oggetto generico incorporato --> <!ATTLIST OBJECT %attrs; -- %coreattrs, %i18n, %events -- declare (declare) #IMPLIED -- dichiara, ma non istanzia flag -- classid %URI; #IMPLIED -- identifica un'implementazione -- codebase %URI; #IMPLIED -- URI di base per l'identificazione di classe, dati, archivio -- data %URI; #IMPLIED -- riferimento ai dati dell'oggetto -- type %ContentType; #IMPLIED -- tipo di contenuto per i dati -- codetype %ContentType; #IMPLIED -- tipo di contenuto per il codice -- archive %URI; #IMPLIED -- lista di archivi separati tra loro da uno spazio -- standby %Text; #IMPLIED -- messaggio da mostrare durante il caricamento -- height %Length; #IMPLIED -- sovrapposizione di un comando di altezza -- width %Length; #IMPLIED -- sovrapposizione di un comando di ampiezza -- usemap %URI; #IMPLIED -- immagine sensibile sul lato cliente -- name CDATA #IMPLIED -- inviare come parte di un modulo -- tabindex NUMBER #IMPLIED -- posizione nell'ordine di tabulazione -- >
Tag iniziale: richiesto, Tag finale: richiesto
Definizioni degli attributi
Attributi definiti altrove
La maggior parte degli interpreti hanno meccanismi interni per presentare tipi di dati comuni come testo, immagini GIF, colori, caratteri e una manciata di elementi grafici. Per presentare tipi di dati che non supportano nativamente, gli interpreti generalmente eseguono applicazioni esterne. L'elemento OBJECT permette agli autori di controllare se i dati debbano essere presentati esternamente o da un qualche programma, specificato dall'autore, che presenta i dati all'interno dell'interprete.
Nel caso più generale, un autore può avere bisogno di specificare tre tipi di informazione:
L'elemento OBJECT permette agli autori di specificare tutti e tre i tipi di dati, ma gli autori possono non dovere specificarli tutti e tre allo stesso tempo. Per esempio, alcuni oggetti possono non richiedere dati (ad es. un'applet in sé conclusa che produce una piccola animazione). Altri possono non richiedere inizializzazione d'esecuzione. Ancora, altri possono non richiedere informazione addizionale di implementazione, cioè, l'interprete stesso può già sapere come rendere quel tipo di dati (ad es. immagini GIF).
Gli autori specificano un'implementazione dell'oggetto e la locazione dei dati da rendere tramite l'elemento OBJECT. Per specificare i valori di esecuzione, comunque, gli autori usano l'elemento PARAM, che è discusso nel paragrafo inizializzazione degli oggetti.
L'elemento OBJECT può apparire anche contenuto dell'elemento HEAD. Dato che gli interpreti generalmente non rendono elementi nell'HEAD, gli autori dovrebbero assicurarsi che ognuno degli elementi OBJECT nell'HEAD non specifichino contenuto da presentare. Si prega di consultare il paragrafo sulla condivisione di dati tra frame per un esempio di come includere un elemento OBJECT nell'elemento HEAD.
Si prega di consultare il paragrafo controlli del modulo per informazioni inerenti l'elemento OBJECT nei moduli.
Un interprete deve interpretare un elemento OBJECT in accordo con le seguenti regole di precedenza:
Gli autori non dovrebbero includere contenuto nell'elemento OBJECT che compare nell'elemento HEAD.
Nell'esempio seguente, inseriamo un'applet di orologio analogico in un documento tramite l'elemento OBJECT. L'applet, scritta in linguaggio Python, non richiede dati aggiuntivi per i valori di esecuzione. L'attributo classid specifica la locazione dell'applet:
<P><OBJECT classid="http://www.miamacchina.it/analogclock.py"> </OBJECT>
Si noti che l'orologio sarà presentato non appena l'interprete elabora questa dichiarazione OBJECT. è possibile ritardare la resa di un oggetto dichiarando prima l'oggetto (come descritto sotto).
Gli autori dovrebbero completare questa dichiarazione includendo testo alternativo come contenuto dell'OBJECT nel caso in cui l'interprete non possa presentare l'orologio.
<P><OBJECT classid="http://www.miamacchina.it/analogclock.py"> Un orologio animato. </OBJECT>
Una conseguenza significativa della struttura dell'elemento OBJECT è che offre un meccanismo per specificare presentazioni alternative per l'oggetto; ciascuna dichiarazione di OBJECT incorporato può specificare alternativi tipi di contenuto. Se un interprete non può presentare l'OBJECT più esterno, tenta di presentare i contenuti, che possono essere un altro elemento OBJECT ecc.
Nell'esempio seguente, incorporiamo parecchie dichiarazioni OBJECT per illustrare come funzionano le presentazioni alternative. Un interprete cercherà di rendere il primo elelemnto OBJECT che può, nel seguente ordine: (1) un'applet Terra scritta in linguaggio Python, (2) un'animazione MPEG della Terra, (3) un'immagine GIF della Terra, (4) testo alternativo.
<P> <!-- Prima, prova con l'applet in Python-->
<OBJECT title="La Terra vista dallo spazio"
classid="http://www.observer.mars/TheEarth.py">
<!-- Altrimenti, prova con il video MPEG -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- Altrimenti, prova con l'immagine GIF
<OBJECT data="TheEarth.gif" type="image/gif">
<!-- Altrimenti visualizza il testo -->
La <STRONG>Terra</STRONG> vista dallo spazio.
</OBJECT>
</OBJECT>
</OBJECT>
La dichiarazione più esterna specifica un'applet che non richiede dati o valori iniziali. La seconda dichiarazione specifica un'animazione MPEG e, dato che non definisce una locazione di implementazione per gli MPEG, si affida all'interprete per gestire l'animazione. Abbiamo impostato anche l'attributo type così che l'interprete che sappia che non può presentare gli MPEG non perderà tempo a recuperare "TheEarth.mpeg" dalla rete. La terza dichiarazione specifica la locazione del file GIF e fornisce del testo alternativo in caso tutti gli altri meccanismi falliscano.
Dati in linea piuttosto che esterni. I dati da rendere possono essere forniti in due modi: in linea e da una risorsa esterna. Mentre il primo metodo generalmente porterà a una resa più rapida, non è conveniente quando si debba rendere una grande quantità di dati.
Ecco un esempio che illustra come dati in linea possano essere passati a un OBJECT:
<P>
<OBJECT id="clock1"
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="data:application/x-oleobject;base64, ...base64 data...">
Un orologio.
</OBJECT>
Si prega di consultare il paragrafo sulla visualizzazione di oggetti, immagini e applet per informazioni sulle dimensioni, l'allineamento e i bordi di un oggetto.
<!ELEMENT PARAM - O VUOTO -- valore di proprietà denominato --> <!ATTLIST PARAM id ID #IMPLIED -- identificativo unico per tutto il documento -- name CDATA #REQUIRED -- nome di proprietà -- value CDATA #IMPLIED -- valore di proprietà -- valuetype (DATA|REF|OBJECT) DATA -- Come interpretare il valore -- type %ContentType; #IMPLIED -- tipo di contenuto per il valore quando valuetype=ref -- >
Tag iniziale: richiesto, Tag finale: proibito
Definizioni degli attributi
Attributi definiti altrove
Gli elementi PARAM specificano un insieme di valori che può essere richiesto da un oggetto al momento dell'esecuzione. Un numero qualunque di elementi PARAM può comparire nel contenuto di un elemento OBJECT o APPLET, in qualunque ordine, ma deve essere posto all'inizio del conteunto dell'elemento OBJECT o APPLET che li include.
La sintassi dei nomi e dei valori si assume sia intesa dall'implementazione dell'oggetto. Questo documento non specifica come gli interpreti dovrebbero recuperare le coppie nome/valore né come dovrebbero interpretare i nomi dei parametri che compaiono due volte.
Torniamo all'esempio dell'orologio per illustrare l'uso di PARAM: supponiamo che l'applet sia in grado di gestire due parametri di esecuzione che definiscono la sua inziale altezza e ampiezza. Possiamo impostare le dimensioni iniziali a 40x40 pixel con due elementi PARAM.
<P><OBJECT classid="http://www.miamacchina.it/analogclock.py"> <PARAM name="height" value="40" valuetype="data"> <PARAM name="width" value="40" valuetype="data"> Questo interprete non può rendere le applet in Python. </OBJECT>
Nell'esempio seguente, i dati di esecuzione per il parametro "Init_values" dell'oggetto sono specificati come risorsa esterna (un file GIF). Il valore dell'attributo valuetype è così impostato a "ref" e il value è un URI che designa la risorsa.
<P><OBJECT classid="http://www.gifstuff.com/gifappli"
standby="Carica Elvis...">
<PARAM name="Init_values"
value="./images/elvis.gif">
valuetype="ref">
</OBJECT>
Si noti che abbiamo anche impostato l'attributo standby in modo tale che l'interprete possa visualizzare un messaggio mentre il meccanismo di presentazione carica.
Quando un elemento OBJECT viene presentato, gli interpreti devono cercare il contenuto solo per quegli elementi PARAM che sono "figli" diretti e passarli all'OBJECT.
Così, nell'esempio seguente, se "obj1" è presentato, "parama1" si applica a "obj1" (e non a "obj2"). Se "obj1" non viene presentato e "obj2" sì, il "param1" viene ignorato e "param2" si applica a "obj2". Se nessuno dei due OBJECT vengono presentati, nessuno dei due PARAM si applica.
<P>
<OBJECT id="obj1">
<PARAM name="param1">
<OBJECT id="obj2">
<PARAM name="param2">
</OBJECT>
</OBJECT>
La locazione dell'implementazione di un oggetto è data da un URI. Come abbiamo discusso nell'introduzione agli URI, il primo segmento di un URI assoluto specifica lo schema di denominazione usato per trasferire i dati designati dall'URI. Per i documenti HTML questo schema è frequentemente "http". Alcune applet potrebbero impiegare altri schemi di denominazione. Per esempio, specificando un'applet Java, gli autori possono usare URI che comincino con "java" e per i controlli ActiveX, gli autori possono usare "clsid".
Nell'esempio seguente, inseriamo un'applet Java in un documento HTML.
<P><OBJECT classid="java:program.start"> </OBJECT>
Impostando l'attributo codetype, un interprete può decidere se recuperare l'applet Java in base alla sue possibilità di farlo.
<OBJECT codetype="application/java-archive"
classid="java:program.start">
</OBJECT>
Alcuni schemi di presentazione richiedono informazioni addizionali per identificare la loro implementazione e devono essere istruiti su dove trovare questa informazione. Gli autori possono dare l'informazione di percorso all'implementazione dell'oggetto tramite l'attributo codebase.
<OBJECT codetype="application/java-archive"
classid="java:program.start">
codebase="http://foooo.bar.com/java/myimplementation/"
</OBJECT>
L'esempio seguente specifica (con l'attributo classid) un oggetto ActiveX tramite un URI che comincia con uno schema di denominazione "clsid". L'attributo data localizza i dati da presentare (un altro orologio).
<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="http://www.acme.com/ole/clock.stm">
Questa applet non è supportata.
</OBJECT>
Per dichiarare un oggetto in modo che non sia eseguito, quando letto da un interprete, impostare l'attributo booleano declare nell'elemento OBJECT. Allo stesso tempo, gli autori devono identificare la dichiarazione, impostando l'attributo id nell'elemento OBJECT su un valore unico. Le istanziazioni successive dell'oggetto faranno riferimento a questo identificativo.
Un OBJECT dichiarato deve comparire in un documento prima della prima istanza di tale OBJECT.
Un oggetto definito con l'attributo declare è istanziato ogni volta che l'elemento che si riferisce a tale oggetto richiede che sia presentato (ad es. un collegamento che vi si riferisce è attivato, un oggetto che vi si riferisce è attivato, ecc.).
Nell'esempio seguente, dichiariamo un OBJECT e lo facciamo istanziare facendovi riferimento da un collegamento. Così, l'oggetto può essere attivato cliccando su del testo evidenziato, per esempio.
<P><OBJECT declare
id="earth.declaration"
data="TheEarth.mpeg"
type="application/mpeg">
La <STRONG>Terra</STRONG> vista dallo spazio.
</OBJECT>
...più avanti nel documento...
<P>Una graziosa <A href="#earth.declaration"> animazione della Terra!</A>
L'esempio seguente illustra come specificare i valori di esecuzione che sono altri oggetti. In questo esempio, inviamo del testo (una poesia, nella fattispecie) ad un ipotetico meccanismo per visualizzare poesie. L'oggetto riconosce un parametro di esecuzione chiamato "font" (diciamo, per presentare il testo della poesia con un determinato carattere). Il valore di questo parametro è in sé un oggetto che inserisce (ma non presenta) l'oggetto carattere. La relazione fra l'oggetto carattere e l'oggetto che visiualizza la poesia è messo in atto (1) assegnando l'id "tribune" alla dichiarazione dell'oggetto carattere e (2) riferendosi ad esso dall'elemento PARAM dell'oggetto che visualizza la poesia (con valuetype e value).
<P><OBJECT declare
id="tribune"
type="application/x-webfont"
data="tribune.gif">
</OBJECT>
...veduta del poema in KublaKhan.txt qui...
<P><OBJECT classid="http://foo.bar.com/poem_viewer"
data="KublaKhan.txt">
<PARAM name="font" valuetype="object" value="#tribune">
<P>Vi siete persi un visualizzatore di poesie molto carino ...
</OBJECT>
Gli interpreti che non supportano l'attributo declare devono presentare i contenuti della dichiarazione di OBJECT.
Vedere la DTD Transitoria per la definizione formale.
Definizioni degli attributi
Quando l'applet è "deserializzata" il metodo start() è invocato, ma non il metodo init(). Gli attributi che erano validi quando l'oggetto originale era serializzato non sono ripristinati. Tutti gli attributi passati a questa istanza APPLET saranno disponibili all'applet. Gli autori dovrebbero usare questa caratteristica con estrema cautela. Un'applet dovrebbe essere fermata prima che sia serializzata.
Un code o object devono essere presenti. Se entrambi code e object sono dati, ne risulta un errore se indicano differenti nomi di classe.
Attributi definiti altrove
Questo elemento, supportato da tutti gli interpreti abilitati Java, permette ai progettisti di incorporare un'applet Java in un documento HTML. è stato disapprovato in favore dell'elemento OBJECT.
Il contenuto dell'elemento APPLET agisce come informazione alternativa per gli interpreti che non supportano questo elemento o sono correntemente configurati per non supportare le applet. Altrimenti, gli interpreti devono ignorare il contenuto.
ESEMPIO DISAPPROVATO:
Nell'esempio seguente, l'elemento APPLET include un'applet Java
nel documento. Dal momento che nessun codebase è fornito, si assume che l'applet sia
nella stessa directory del documento corrente.
<APPLET code="Bubbles.class" width="500" height="500"> Applet Java che disegna bolle animate. </APPLET>
Questo esempio può essere riscritto come segue con OBJECT :
<P><OBJECT codetype="application/java"
classid="java:Bubbles.class"
width="500" height="500">
Applet Java che disegna bolle animate.
</OBJECT>
I valori iniziali possono essere forniti all'applet tramite l'elemento PARAM.
ESEMPIO DISAPPROVATO:
Il seguente esempio di applet Java:
<APPLET code="AudioItem" width="15" height="15"> <PARAM name="snd" value="Hello.au|Welcome.au"> Applet Java che emette un suono di benvenuto. </APPLET>
Può essere riscritto come segue con OBJECT:
<OBJECT codetype="application/java"
classid="AudioItem"
width="15" height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
Applet Java che emette un suono di benvenuto.
</OBJECT>
Un documento incorporato è interamente indipendente dal documento in cui è incorporato. Per esempio, gli URI relativi all'interno del documento incorporato si risolvono in accordo con l'URI di base del documento incorporato, non di quello del documento principale. Un documento incorporato è presentato solo all'interno di un altro documento (ad es., in una sotto-finestra); per il resto rimane indipendente.
Per esempio, la riga seguente incorpora i contenuti di incorporami.html alla locazione in cui ricorre la definizione di OBJECT.
...testo precedente... <OBJECT data="incorporami.html"> Attenzione: incorporami.html potrebbe non incorporarsi. </OBJECT> ...testo successivo...
Si tenga presente che i contenuti di un OBJECT devono essere presentati solo se il file specificato dall'attributo data non può essere caricato.
Il comportamento di un interprete nei casi dove un file che include se stesso non è definito.
Una mappa d'immagine è creata dall'associazione di un oggetto a delle specificate aree geometriche sensibili nell'oggetto.
Ci sono due tipi di Mappe sensibili:
Le Mappe sensibili sul lato cliente sono preferite a quelle sul lato server per almeno due ragioni: sono accessibili a chi naviga con interpreti non grafici e offrono un riscontro immediato al dubbio se il puntatore sia o meno sulla regione attiva.
<!ELEMENT MAP - - ((%block;)+ | AREA+) -- Mappa d'immagine sul lato cliente --> <!ATTLIST MAP %attrs; -- %coreattrs, %i18n, %events -- name CDATA #REQUIRED -- per referenza da usemap -- >
Tag iniziale: richiesto, Tag finale: richiesto
<!ELEMENT AREA - O VUOTO -- area di mappa d'immagine sul lato cliente --> <!ATTLIST AREA %attrs; -- %coreattrs, %i18n, %events -- shape %Shape; rect -- controllo d'interpretazione delle coordinate -- coords %Coords; #IMPLIED -- lista di lunghezze separate tra di loro da una virgola -- href %URI; #IMPLIED -- URI per risorsa collegata -- nohref (nohref) #IMPLIED -- questa regione non ha azioni -- alt %Text; #REQUIRED -- descrizione breve -- tabindex NUMBER #IMPLIED -- posizione nell'ordine di tabulazione -- accesskey %Character; #IMPLIED -- tasti di scelta rapida per l'accessibilità -- onfocus %Script; #IMPLIED -- l'elemento ottiene il focus -- onblur %Script; #IMPLIED -- l'elemento perde il focus -- >
Tag iniziale: richiesto, Tag finale: proibito
MAPPA - Definizioni degli attributi
AREA - Definizioni degli attributi
Le coordinate sono relative al lato superiore sinistro dell'oggetto. Tutti i valori sono lunghezze. Tutti i valori sono separati da virgole.
Attributo per associare una mappa d'immagine ad un elemento
Attributi definiti altrove
L'elemento MAP specifica una mappa d'immagine sul lato cliente che può essere associata ad uno o più elementi (IMG, OBJECT, o INPUT). Una mappa d'immagine è associata ad un elemento tramite l'attributo usemap
La presenza dell'attributo usemap per un OBJECT implica che l'oggetto che viene incluso è un'immagine. Per di più, quando l'elemento OBJECT ha associata una mappa d'immagine sul lato cliente, gli interpreti possono implementare l'interazione dell'utente con l'elemento OBJECT esclusivamente nei termini della mappa d'immagine sul lato cliente. Questo permette agli interpreti (come un interprete audio o un robot) di interagire con l'elemento OBJECT senza doverlo processare; l'interprete può anche scegliere di non recuperare (o processare) l'oggetto. Quando un OBJECT ha associata una mappa d'immagine, gli autori non dovrebbero aspettarsi che l'oggetto sarà recuperato o processato da ogni interprete.
Ognuno degli elementi MAP può contenere entrambi o uno solo dei seguenti:
Se due o più regioni definite si sovrappongono, l'elemento di definizione di regione che compare per primo nel documento ha la precedenza (cioè, risponde all'input dell'utente).
Gli interpreti e gli autori dovrebbero offrire alternative testuali alle mappe d'immagini grafiche per i casi in cui la grafica non è disponibile o l'utente non può accedervi. Per esempio, gli interpreti possono usare il testo in alt per creare collegamenti testuali in luogo di una mappa d'immagine grafica. Tali collegamenti possono essere attivati in una varietà di modi (tastiera, attivazione vocale, ecc).
Nota. MAP non è compatibile all'indietro con gli interpreti HTML 2.0.
Nell'esempio seguente, creiamo una mappa d'immagine sul lato cliente per l'elemento OBJECT. Non vogliamo presentare i contenuti della mappa d'immagine quando l'elemento OBJECT è presentato, così "nascondiamo" l'elemento MAP all'interno del contenuto dell'elemento OBJECT . Di conseguenza, i contenuti dell'elemento MAP saranno presentati solo se l'elemento OBJECT non può essere presentato.
<HTML>
<HEAD>
<TITLE>Il sito carino!</TITLE>
</HEAD>
<BODY>
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>Naviga il sito:
<A href="guide.html" shape="rect" coords="0,0,118,28">Guida all'accesso</a> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">Vai</A> |
<A href="search.html" shape="circle" coords="184,200,60">Cerca</A> |
<A href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">Top Ten</A>< </MAP>
</OBJECT>
</BODY>
</HTML>
Possiamo volere rendere i contenuti della mappa d'immagine anche quando un interprete può presentare l'OBJECT. Per esempio, possiamo volere associare una mappa d'immagine con un elemento OBJECT e includere una barra di navigazione testuale in fondo alla pagina. Per farlo, definiamo l'elemento MAP all'esterno dell'OBJECT:
<HTML>
<HEAD>
<TITLE>Il sito carino!</TITLE>
</HEAD>
<BODY>
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
</OBJECT>
...qui il resto della pagina...
<MAP name="map1">
<P>Naviga il sito:
<A href="guide.html" shape="rect" coords="0,0,118,28">Guida all'accesso</a> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">Vai</A> |
<A href="search.html" shape="circle" coords="184,200,60">Cerca</A> |
<A href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">Top Ten</A>
</MAP>
</BODY>
</HTML>
Nell'esempio seguente, creiamo una mappa d'immagine simile, questa volta usando l'elemento AREA. Si noti l'uso di testo alt :
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
<P>Questa è una barra di navigazione.
</OBJECT>
<MAP name="map1">
<AREA href="guide.html"
alt="Guida all'accesso"
shape="rect"
coords="0,0,118,28">
<AREA href="search.html"
alt="Cerca"
shape="rect"
coords="184,0,276,28">
<AREA href="shortcut.html"
alt="Vai"
shape="circle"
coords="184,200,60">
<AREA href="top10.html"
alt="Top Ten"
shape="poly"
coords="276,0,373,28,50,50,276,0">
</MAP>
Questa è una versione simile usando l'elemento IMG invece di OBJECT (con la stessa dichiarazione MAP):
<P><IMG src="navbar1.gif" usemap="#map1" alt="barra di navigazione">
L'esempio seguente illustra come le Mappe sensibili possano essere condivise.
Gli elementi OBJECT annidati sono utili per provvedere un ripiego nel caso un interprete non supporti certi formati. Per esempio:
<P>
<OBJECT data="navbar.png" type="image/png">
<OBJECT data="navbar.gif" type="image/gif">
Testo descrittivo dell'immagine...
</OBJECT>
</OBJECT>
Se l'interprete non supporta il formato PNG, cerca di presentare l'immagine GIF. Se non supporta i GIF (ad es., è un interprete a base vocale), si imposta sulla descrizione testuale provvista come contenuto dell'elemento OBJECT più all'interno. Quando gli elementi OBJECT sono annidati in questo modo, gli autori possono condividere le Mappe sensibili fra questi:
<P>
<OBJECT data="navbar.png" type="image/png"
<OBJECT data="navbar.gif" type="image/gif" usemap="#map1">
<MAP name="map1">
<P>Navigare il sito:
<A href="guide.html" shape="rect" coords="0,0,118,28">Guida all'accesso</a> |
<A href="shortcut.html" shape="rect" coords="118,0,184,28">Va</A> |
<A href="search.html" shape="circle" coords="184,200,60">Cerca</A> |
<A href="top10.html" shape="poly" coords="276,0,373,28,50,50,276,0">Top Ten</A>
</MAP>
</OBJECT>
</OBJECT>
L'esempio seguente illustra come le ancore possano essere specificate per creare zone inattive dentro una mappa d'immagine. Il primo riferimento specifica una piccola regione circolare a cui non è associato alcun collegamento. Il secondo riferimento specifica una regione circolare più grande con le stesse coordinate di centro. Combinate, le due formano un anello il cui centro è inattivo e il cui orlo è attivo. L'ordine delle definizioni dei riferimenti è importante, dato che il circolo più piccolo deve essere sovrapposto al più grande.
<MAP name="map1"> <P> <A shape="circle" coords="100,200,50">Sono inattivo.</A> <A href="outer-ring-collegamento.html" shape="circle" coords="100,200,250">Sono attivo.</A> </MAP>
Allo stesso modo, l'attributo nohref per l'elemento AREA dichiara che la regione geometrica non ha associato alcun collegamento.
Le Mappe sensibili sul lato server possono essere interessanti nei casi in cui la mappa d'immagine sia troppo complicata per essere una mappa d'immagine sul lato cliente.
è possibile definire solo una mappa d'immagine sul lato server per gli elementi IMG e INPUT. Nel caso di IMG, l'IMG deve essere all'interno da un elemento A e dev'essere impostato l'attributo booleano ismap. Nel caso di INPUT, l'INPUT deve essere del tipo "immagine".
Quando l'utente attiva il collegamento cliccando sull'immagine, le coordinate dello schermo sono inviate direttamente al server su cui risiede il documento. Le coordinate dello schermo sono espresse in valori pixel di schermo relativi all'immagine. Per informazione normativa sulla definizione di un pixel e su come scalarlo, si prega di consultare [CSS1].
Nell'esempio seguente, la regione attiva definisce un collegamento sul lato server. Così, un clic ovunque sull'immagine farà sì che le coordinate del clic siano inviate al server.
<P><A href="http://www.acme.com/cgi-bin/competition">
<IMG src="game.gif" ismap alt="target"></A>
La locazione cliccata è passata al server come segue. L'interprete deriva un nuovo URI dall'URI specificato dall'attributo href dell'elemento A, appendendo `?' seguito dalle coordinate x e y, separate da una virgola. Il collegamento allora viene seguito utilizzando il nuovo URI. Per esempio, nell'esempio dato, se l'utente clicca alle coordinate x=10, y=27, l'URI che ne risulta è "http://www.acme.com/cgi-bin/competition?10,27".
Gli interpreti che non offrono all'utente mezzi per selezionare coordinate specifiche (ad es., interpreti non grafici basati su input da tastiera, su comandi vocali, ecc.) dovrebbero inviare le coordinate "0,0" al server, quando il collegamento è attivato.
Definizioni degli attributi
Quando specificati, gli attributi width e height dicono all'interprete di forzare le dimensioni naturali di un'immagine o un oggetto in favore di questi valori.
Quando l'oggetto è un'immagine, viene scalato. Gli interpreti dovrebbero fare del proprio meglio per scalare un oggetto o un'immagine al punto da collimare con l'ampiezza e l'altezza specificati dall'autore. Si noti che le lunghezze espresse in percentuali sono basate sullo spazio orizzontale o verticale disponibile, non sulle dimensioni naturali dell'immagine, oggetto o applet.
Gli attributi height e width danno agli interpreti un'idea delle dimensioni di un'immagine o un oggetto così che possano riservare dello spazio per questi e continuare a presentare il documento mentre aspettano per i dati dell'immagine.
Gli attributi vspace e hspace specificano quanto spazio bianco viene inserito alla sinistra e alla destra (hspace), sopra e sotto (vspace) un IMG, APPLET, OBJECT. Il valore predefinito per questi attributi non è specificato, ma è generalmente una lunghezza piccola, non nulla. Entrambi gli attributi prendono valori di tipo length.
Un'immagine o un oggetto possono essere circondati da un bordo (ad es., quando un bordo è specificato dall'utente o quando l'immagine è il contenuto di un elemento A).
Definizioni degli attributi
L'attributo align specifica la posizione di un IMG, OBJECT o APPLET in relazione al proprio contesto.
I valori seguenti per align riguardano la posizione dell'oggetto in relazione al testo che lo circonda:
Due altri valori, left e right, fanno sì che l'immagine si allinei al margine destro o sinistro correnti. Sono discussi nel paragrafo sugli oggetti posizionabili.
Differenti interpretazioni dell'allineamento. Gli interpreti variano quanto al modo in cui interpretano l'attributo align. Alcuni tengono conto solo di ciò che è occorso nella linea di testo precedente l'elemento, altri tengono conto del testo su entrambi i lati dell'elemento.
Definizioni degli attributi
Alcuni elementi non testuali (IMG, AREA, APPLET, e INPUT) permettono agli autori di specificare del testo alternativo che serva da contenuto quando l'elemento non può essere presentato normalmente. Specificare del testo alternativo aiuta gli utenti sprovvisti di terminali con visualizzazione grafica, gli utenti i cui interpreti non supportano moduli, utenti con deficienze visive, coloro che usano sintetizzatori vocali, quelli che hanno configurato i propri interpreti così da non visualizzare le immagini, ecc.
L'attributo alt deve essere specificato per gli elementi IMG e AREA. è opzionale per gli elementi INPUT e APPLET.
Se il testo alternativo può essere molto utile, deve però essere gestito con attenzione. Gli autori dovrebbero seguire le seguenti linee guida:
Gli sviluppatori dovrebbero consultare il paragrafo sulla generazione di testo alternativo per informazioni su come gestire casi di omissione di testo alternativo.
Nota. Per ulteriori informazioni sul disegno di documenti HTML accessibili, si prega di consultare [WAIGUIDE].