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 documentoi HTML nelle loro
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 multifunzionale al problema dell'inclusione generica. L'elemento OBJECT consente agli autori di HTML di specificare tutto ciò che è richiesto da un oggetto per la sua rappresentazione da parte dell'agente di un utente: codice-sorgente, valori iniziali e dati di run-time. In questa specificazione, il termine "oggetto" è usato per descrivere le cose che la gente vuole mettere nei documentoi HTML; altri termini comunemente usati per queste cose sono: applet, plug-in, gestori di media etc.
In questo modo il nuovo elemento OBJECT si assume i compiti svolti da altri elementi esistenti. consideri il seguente specchietto delle funzionalità:
| Tipo di inclusione | Elemento specifico | Elemento generico |
|---|---|---|
| Immagine | IMG | OBJECT |
| Applicazione | APPLET (disapprovato.) | OBJECT |
| Un altro documento HTML | IFRAME | OBJECT |
Lo specchietto indica che ogni tipo di inclusione ha una soluzione specifica e una generale. L'elemento generico OBJECT servirà come soluzione per implementare futuri tipi di media.
Per includere immagini, gli autori possono usare l'elementoOBJECT 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 standard, sia anche attraverso immagini 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 far caricare un documento, eseguire un programma sul server etc.
Nei paragrafi seguenti discutiamo i vari meccanismi disponibili agli autori per includere elementi multimediali e creare immagini sensibili per quegli inserimenti.
<!-- Per evitare problemi ai browser testuali e anche per rendere comprensibile e navigabile ai browser 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 (è di complemento ad alt) -- height %Length; #IMPLIED -- dimensionamento in altezza -- width %Length; #IMPLIED -- dimensionamento in ampiezza -- usemap %URI; #IMPLIED -- usa immagine sensibile sul lato client -- 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 posizione indicata nella definzione. IMG non ha contenuto; è di solito rimpiazzato alla linea dall'immagine indicata dall'attributo src; fanno eccezione le immagini allineate a destra o a sinistra che sono "sospese" fuori
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 coll'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 reso 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 supportano le immagini, non supportano 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 più 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 classid, data, archive-- 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 separata da spazi -- standby %Text; #IMPLIED -- messaggio da mostrare durante il caricamento -- height %Length; #IMPLIED -- altezza di sovrapposizione -- width %Length; #IMPLIED -- ampiezza di sovrapposizione -- usemap %URI; #IMPLIED -- immagine sensibile sul lato client -- 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 rendere tipi di dati comuni come testo, immagini GIF, colori, font e certuni elementi grafici. Per rendere tipi di dati che non supportano nativamente, gli interpreti generalmente eseguono applet esterne. L'elemento OBJECT permette agli autori di controllare se i dati debbano essere resi esternamente da un qualche programma, specificato dall'autore che restituisce 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 alcuni 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 rendere. Si prega di consultare il paragrafo sulla condivisione di dati tra frame data per un esempio di come includere un elemento OBJECT nell'elemento HEAD.
Si prega di consultare il paragrafo controlli del modulo per informazioni su elementi OBJECT nelle
Un interprete deve interpretare un elemento OBJECT secondo le seguenti regole di precedenza:
Gli autori non dovrebbero includere contenuto negli elementi OBJECT che compaiono 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à visualizzato 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 l'interprete non possa rendere 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 visualizzazioni alternative per l'oggetto; ciascuna dichiarazione di OBJECT incorporato può specificare alternativi tipi di contenuto. Se un interprete non può rendere l'OBJECT più esterno, tenta di rendere i contenuti, che possono essere un altro elemento OBJECT etc.
Nell'esempio seguente, incorporiamo parecchie dichiarazioni OBJECT per illustrare come funzionano le rese 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 coll'applet in Python-->
<OBJECT title="La Terra vista dallo spazio"
classid="http://www.observer.mars/TheEarth.py">
<!-- Altrimenti, prova col video MPEG -->
<OBJECT data="TheEarth.mpeg" type="application/mpeg">
<!-- Altrimenti, prova coll'imagine 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ò rendere 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: contestualmente 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 contestuali 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 restituire un messaggio mentre il meccanismo di visualizzazione carica.
Quando un elemento OBJECT viene visualizzato, gli interpreti devono cercare il contenuto solo per quegli elementi PARAM che sono "figli" diretti e passarli all'OBJECT.
Perciò, nell'esempio seguente, se "obj1" viene reso, "parama1" si applica a "obj1" (e non a "obj2"). Se "obj1" non viene reso e "obj2" sì, "param1" viene ignorato e "param2" si applica a "obj2". Se nessuno dei due OBJECT viene reso, 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 visualizzazione 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 (coll'attributo classid) un oggetto ActiveX tramite un URI che comincia con uno schema di denominazione "clsid". L'attributo data localizza i dati da rendere (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 coll'attributo declare è istanziato ogni volta che l'elemento che si riferisce a tale oggetto richiede che sia reso (ad es. un collegamento che vi si riferisce è attivato etc.).
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>
...il resto del 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 visionare poesie. L'oggetto riconosce un parametro di esecuzione chiamato "carattere" (diciamo, per rendere il testo della poesia con un determinato carattere). Il valore di questo parametro è in sé un oggetto che inserisce (ma non rende) l'oggetto carattere. La relazione fra l'oggetto carattere e l'oggetto che visiona la poesia messa in atto (1) assegnando l'id "tribune" alla dichiarazione dell'oggetto carattere e (2) riferendosi ad esso dall'elemento PARAM dell'oggetto che visiona 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 visore di poesie molto carino ...
</OBJECT>
Gli interpreti che non supportano l'attributo declare devono rendere 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(). Attributi validi quando l'oggetto originale era serializzato non sono ripristinati. Ogni attributo passato a questa istanza di APPLET saranno disponibili all'applet. Gli autori dovrebbero usare questa possibilità con estrema cautela. Un'applet dovrebbe essere fermata prima che sia serializzata.
O 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 i browser compatibili con Java, permette ai progettisti di incorporare un'applet a Java applet 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:
La seguente applet Java d'esempio:
<APPLET code="AudioItem" width="15" height="15"> <PARAM name="snd" value="Hello.au|Welcome.au"> Applet Java che emette un saluto 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 saluto 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 secondo l'URI di base del documento incorporato, non di quello dell'intero documento. Un documento incorporato è reso solo all'interno di un altro documento (ad es., in una sottofinestra); per il resto rimane independente.
Per esempio, la riga seguente incorpora i contenuti di incorporami.html alla locazione in cui ricorre la definizione di OBJECT.
...testo che viene prima... <OBJECT data="incorporami.html"> Attenzione: incorporami.html potrebbe non incorporarsi. </OBJECT> ...testo che viene dopo...
Si tenga presente che i contenuti di un OBJECT devono solo essere resi se il file specificato dall'attributo data non possono essere caricati.
Il comportamento di un interprete nei casi in cui un file include se stesso non è definito.
Una immagine sensibile si crea associando a un oggetto una specificazione di aree geometriche sensibili sull'oggetto.
Ci sono due tipi di immagini sensibili:
Le immagini sensibili sul lato client 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+) -- immagine sensibile sul lato client--> <!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 immagine sensibile sul lato client --> <!ATTLIST AREA %attrs; -- %coreattrs, %i18n, %events -- shape %Shape; rect -- interpretazione di coordinate -- coords %Coords; #IMPLIED -- lista di lunghezze separate da 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 in ordine di tabulazione (TAB) -- 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
MAP - 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 un'immagine sensibile ad un elemento
Attributi definiti altrove
L'elemento MAP specifica un'immagine sensibile sul lato client che può essere associata ad uno o più elementi (IMG, OBJECT, o INPUT). Una immagine sensibile è 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 un'immagine sensibile sul lato client, gli interpreti possono implementare l'interazione dell'utente coll'elemento OBJECT esclusivamente nei termini della immagine sensibile sul lato client. Questo permette agli interpreti (come un browser audio o un robot) di interagire coll'elemento OBJECT senza doverlo processare; l'interprete può anche scegliere di non recuperare (o processare) l'oggetto. Quando un OBJECT ha associata un'immagine sensibile, 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è, corrisponde all'input dell'utente).
Gli interpreti e gli autori dovrebbero offrire alternative testuali alle immagini sensibili 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 un'immagine sensibile grafica. Tali collegamenti possono essere attivati in una varietà di modi (tastiera, attivazione vocale etc).
Nota. MAP non è compatibile all'indietro coi browser HTML 2.0.
Nell'esempio seguente, creiamo un'immagine sensibile sul lato client per l'elemento OBJECT. Non vogliamo rendere i contenuti della immagine sensibile quando l'elemento OBJECT è reso, così "nascondiamo" l'elemento MAP all'interno del contenuto dell'elemento OBJECT . Di conseguenza, i contenuti dell'elemento MAP saranno resi solo se l'elemento OBJECT non può essere reso.
<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 immagine sensibile anche quando un interprete può rendere l'OBJECT. Per esempio possiamo volere associare un'immagine sensibile con un elemento OBJECT e includere una barra di testo di navigazione 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 immagine sensibile 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>
Qui c'è 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 immagini 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 rendere 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 immagini sensibili fra questi:
<P>
<OBJECT data="navbar.png" type="image/png"
<OBJECT data="navbar.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">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 i riferimenti possano essere specificati per creare zone inattive dentro un'immagine sensibile. 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 stare sopra il 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 immagini sensibili sul lato server possono essere interessanti nei casi in cui la immagine sensibile sia troppo complicata per un'immagine sensibile sul lato client.
È possibile definire solo un'immagine sensibile sul lato server per gli elementi IMG e INPUT. Nel caso di IMG, l'IMG deve essere racchiuso 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 del 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 o su comandi vocali, etc.) 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 coll'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 rendere 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 di un oggetto in relazione al testo che li circonda:
Due altri valori, left e right, fanno sì che l'immagine si allineino al margine destro o sinistro correnti. Sono discussi nel paragrafo sugli oggetti posizionabili.
Differenti interpretazioni dell'allineamento. Gli interpreti variano quanto alla maniera di rendere 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 reso normalmente. Specificare del testo alternativo aiuta gli utenti sprovvisti di terminali a interfaccia grafica, gli utenti i cui browser non supportano moduli, gli utenti con deficienze visive, coloro che usano sintetizzatori vocali, quelli che hanno configurato i propri interpreti così da non visualizzare le immagini etc.
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 di 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].