Sommario
Le caratteristiche multimediali di HTML consentono agli autori di includere nelle loro pagine immagini, applet (programmi che sono automaticamente scaricati ed eseguiti sulla macchina dell'utente), brani video ed altri documenti HTML.
Ad esempio, per includere un'immagine PNG in un documento, gli autori possono scrivere:
<BODY> <P>Ecco un primo piano del Gran Canyon: <OBJECT data="canyon.png" type="image/png"> Questo è un <EM>primo piano</EM> del Gran Canyon. </OBJECT> </BODY>
Le precedenti versioni di HTML consentivano agli autori di includere immagini (tramite IMG) e applet (tramite APPLET). Questi elementi hanno numerose limitazioni:
Per risolvere questi problemi, HTML 4 introduce l'elemento OBJECT, che offre una soluzione globale per l'inclusione generica di oggetti. L'elemento OBJECT consente agli autori che scrivono HTML di specificare tutto ciò che è necessario ad un oggetto per la sua presentazione da parte di un programma utente: codice sorgente, valori iniziali e dati per l'esecuzione. In queste specifiche il termine "oggetto" è usato per descrivere le cose che le persone desiderano inserire nei documenti HTML; altri termini comunemente usati per queste cose sono: applet, plug-in, gestori di media, ecc.
Il nuovo elemento OBJECT comprende pertanto alcune delle funzioni svolte dagli elementi esistenti. Si consideri il seguente grafico di funzionalità:
| Tipo di inclusione | Elemento specifico | Elemento generico |
|---|---|---|
| Immagine | IMG | OBJECT |
| Applet | APPLET (Disapprovato.) | OBJECT |
| Un altro documento HTML | IFRAME | OBJECT |
Il diagramma indica che ciascun tipo di inclusione ha una soluzione specifica ed una generale. L'elemento generico OBJECT servirà come soluzione per implementare 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 dal momento che l'elemento APPLET è disapprovato.
Per includere un documento HTML all'interno di un altro, gli autori possono usare sia il nuovo elemento IFRAME sia l'elemento OBJECT. In entrambi i casi il documento incorporato rimane indipendente dal documento principale. I programmi utente di tipo visuale possono presentare il documento incorporato in una finestra distinta all'interno del documento principale. Si consultino le note sui documenti incorporati per un confronto tra OBJECT e IFRAME per quanto riguarda l'inclusione di documenti.
Immagini ed altri oggetti inclusi possono avere collegamenti ipertestuali associati con essi, sia attraverso il meccanismo di collegamento standard sia anche attraverso le mappe immagine. Una mappa immagine specifica regioni geometriche attive di un oggetto incluso e assegna un collegamento a ciascuna regione. Quando attivati, questi collegamenti possono causare il recupero di un documento, possono eseguire un programma sul server, ecc.
Nelle sezioni successive, si discutono i vari meccanismi disponibili agli autori per inclusioni di oggetti multimediali e per creare mappe immagine per quelle inclusioni.
<!-- Per evitare problemi con i programmi utente solo testuali come pure per rendere i contenuti immagine comprensibili e navigabili per gli utilizzatori di programmi utente non visuali, è necessario fornire una descrizione tramite ALT ed evitare mappe immagine sul lato server --> <!ELEMENT IMG - O EMPTY -- Immagine incorporata --> <!ATTLIST IMG %attrs; -- %coreattrs, %i18n, %events -- src %URI; #REQUIRED -- URI di immagine da incorporare -- alt %Text; #REQUIRED -- breve descrizione -- longdesc %URI; #IMPLIED -- collegamento ad una descrizione estesa (integra alt) -- name CDATA #IMPLIED -- nome dell'immagine per l'uso da parte di script -- height %Length; #IMPLIED -- ridefinisce l'altezza -- width %Length; #IMPLIED -- ridefinisce la larghezza -- usemap %URI; #IMPLIED -- per l'uso con mappe immagine sul lato cliente -- ismap (ismap) #IMPLIED -- per l'uso con mappe immagine sul lato server -- >
Marcatore iniziale: obbligatorio, Marcatore finale: proibito
Definizioni di attributo
Attributi definiti altrove
L'elemento IMG incorpora un'immagine nel documento corrente alla posizione corrispondente alla definizione dell'elemento. L'elemento IMG non ha contenuto; esso è di solito rimpiazzato in riga dall'immagine designata dall'attributo src, con l'eccezione delle immagini allineate a sinistra o a destra, che "fluttuano" al di fuori della riga.
In un esempio precedente, abbiamo definito un collegamento ad una foto di famiglia. Qui inseriamo la foto direttamente nel documento corrente:
<BODY>
<P>Sono appena ritornato dalle vacanze! Ecco una foto della mia famiglia al lago:
<IMG src="http://www.unaditta.com/Gente/Gianni/vacanze/famiglia.png"
alt="Una foto della mia famiglia al lago.">
</BODY>
Questa inclusione può anche essere ottenuta per mezzo dell'elemento OBJECT nel modo seguente:
<BODY>
<P>Sono appena ritornato dalle vacanze! Ecco una foto della mia famiglia al lago:
<OBJECT data="http://www.unaditta.com/Gente/Gianni/vacanze/famiglia.png"
type="image/png">
Una foto della mia famiglia al lago.
</OBJECT>
</BODY>
L'attributo alt specifica il testo alternativo che è riprodotto quando l'immagine non può essere visualizzata (si veda più sotto per informazioni su come specificare un testo alternativo ). I programmi utente devono riprodurre il testo alternativo quando non possono supportare le immagini, quando non possono supportare un certo tipo di immagine o quando sono configurati per non visualizzare immagini.
L'esempio seguente mostra come l'attributo longdesc può essere adoperato per creare un collegamento ad una descrizione più ricca:
<BODY>
<P>
<IMG src="mappasito.gif"
alt="Mappa del sito dei Laboratori HP"
longdesc="mappasito.html">
</BODY>
L'attributo alt fornisce una descrizione breve dell'immagine. Questo dovrebbe essere sufficiente per consentire agli utenti di decidere se vogliono seguire il collegamento dato dall'attributo longdesc ad una descrizione più lunga, in questo caso "mappasito.html".
Si consulti la sezione sulla presentazione visuale di oggetti, immagini e applet per informazioni circa dimensione, allineamento e bordi di un'immagine.
<!ELEMENT OBJECT - - (PARAM | %flow;)* -- oggetto generico incorporato --> <!ATTLIST OBJECT %attrs; -- %coreattrs, %i18n, %events -- declare (declare) #IMPLIED -- dichiara, ma non istanzia, un indicatore [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 la codifica -- archive CDATA #IMPLIED -- elenco di URI separato da spazi -- standby %Text; #IMPLIED -- messaggio da mostrare durante il caricamento -- height %Length; #IMPLIED -- ridefinisce l'altezza -- width %Length; #IMPLIED -- ridefinisce la larghezza -- usemap %URI; #IMPLIED -- per l'uso con mappe immagine sul lato cliente -- name CDATA #IMPLIED -- invia come parte di un modulo -- tabindex NUMBER #IMPLIED -- posizione in ordine di tabulazione -- >
Marcatore iniziale: obbligatorio, Marcatore finale: obbligatorio
Definizioni di attributo
Attributi definiti altrove
La maggior parte dei programmi utente possiede meccanismi incorporati per la rappresentazione di tipi di dati comuni quali testo, immagini GIF, colori, caratteri ed un piccolo numero di elementi grafici. Per rappresentare tipi di dati che essi non supportano nativamente, i programmi utente lanciano generalmente delle applicazioni esterne. L'elemento OBJECT consente agli autori di controllare se i dati debbano essere riprodotti esternamente oppure da un qualche programma, indicato dall'autore, che rappresenta i dati all'interno del programma utente.
Nella situazione più comune, può essere necessario per un autore specificare tre tipi di informazioni:
L'elemento OBJECT consente agli autori di specificare tutti e tre i tipi di dati, ma gli autori non devono specificarli necessariamente tutti e tre in una volta. Alcuni oggetti, per esempio, possono non richiedere dati (ad es. un applet autosufficiente che esegue una piccola animazione). Altri possono non richiedere un'inizializzazione al momento dell'esecuzione. Altri ancora possono non richiedere informazioni aggiuntive per l'implementazione: lo stesso programma utente, cioè, può già sapere come rappresentare quel certo tipo di dati (ad es., le immagini GIF).
Gli autori specificano l'implementazione di un oggetto e la posizione dei dati che devono essere riprodotti per mezzo dell'elemento OBJECT. Tuttavia, per specificare valori in vista dell'esecuzione, gli autori usano l'elemento PARAM, che è trattato nella sezione dedicata all'inizializzazione di un oggetto.
L'elemento OBJECT può apparire anche nel contenuto dell'elemento HEAD. Dal momento che i programmi utente generalmente non riproducono gli elementi all'interno di HEAD, gli autori dovrebbero accertarsi che nessuno degli elementi OBJECT all'interno di HEAD specifichi un contenuto che può essere riprodotto. Si consulti per favore la sezione sulla condivisione di dati tra frame per un esempio di inclusione dell'elemento OBJECT all'interno dell'elemento HEAD.
Si consulti per favore la sezione sui controlli nei moduli per informazioni circa gli elementi OBJECT nei moduli.
Questo documento non specifica il comportamento degli elementi OBJECT che usano sia l'attributo classid per identificare un'implementazione sia l'attributo data per specificare i dati relativi a quella implementazione. Al fine di garantire la portabilità, gli autori dovrebbero usare l'elemento PARAM per comunicare alle implementazioni dove recuperare i dati aggiuntivi.
Un programma utente deve interpretare un elemento OBJECT in base alle seguenti regole di precedenza:
Gli autori non dovrebbero includere negli elementi OBJECT dei contenuti che compaiono nell'elemento HEAD.
Nell'esempio seguente, inseriamo in un documento un applet che riproduce un orologio analogico tramite l'elemento OBJECT. L'applet, scritto nel linguaggio Python, non richiede dati aggiuntivi o valori per l'esecuzione. L'attributo classid specifica la posizione dell'applet:
<P><OBJECT classid="http://www.lamiamacchina.it/orologioanalogico.py">
</OBJECT>
Si noti che l'orologio viene riprodotto non appena il programma utente interpreta questa dichiarazione di OBJECT. È possibile ritardare la riproduzione di un oggetto dichiarando prima l'oggetto (come descritto più sotto).
Gli autori dovrebbero integrare questa dichiarazione includendo un testo alternativo per descrivere il contenuto di OBJECT, nel caso che il programma utente non sia in grado di riprodurre l'orologio.
<P><OBJECT classid="http://www.lamiamacchina.it/orologioanalogico.py">
Un orologio animato.
</OBJECT>
Una significativa conseguenza delle caratteristiche progettuali dell'elemento OBJECT è che esso offre un meccanismo per specificare la rappresentazione di oggetti alternativi; ciascuna dichiarazione incorporata di OBJECT può specificare tipi di contenuto alternativi. Se un programma utente non è in grado di riprodurre l'OBJECT più esterno, esso tenta di riprodurre i contenuti; questi possono essere costituiti da un altro elemento OBJECT, e così via.
Nell'esempio successivo, incorporiamo una serie di dichiarazioni di OBJECT, per illustrare come operano le riproduzioni alternative. Un programma utente tenterà di riprodurre il primo elemento OBJECT di cui sia capace, nel seguente ordine: (1) un applet della Terra scritta nel linguaggio Python, (2) un'animazione in formato MPEG della Terra, (3) un'immagine GIF della Terra, (4) del testo alternativo.
<P> <!-- Innanzitutto prova l'applet Python -->
<OBJECT title="La Terra vista dallo spazio"
classid="http://www.observer.mars/Terra.py">
<!-- Altrimenti prova il video MPEG -->
<OBJECT data="Terra.mpeg" type="application/mpeg">
<!-- Oppure prova l'immagine GIF -->
<OBJECT data="Terra.gif" type="image/gif">
<!-- Altrimenti riproduci 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, poiché non definisce la posizione di un'implementazione in grado di trattare il formato MPEG, si affida al programma utente per quanto riguarda la gestione dell'animazione. Impostiamo anche l'attributo type, in modo che un programma utente che sappia di non poter riprodurre MPEG, eviterà di scaricare inutilmente "Terra.mpeg" dalla rete. La terza dichiarazione specifica la posizione di un file GIF e fornisce un testo alternativo nel caso che tutti gli altri meccanismi falliscano.
Dati in riga contro dati esterni. I dati da riprodurre possono essere forniti in due modi: in riga e da una risorsa esterna. Il primo metodo condurrà generalmente ad una riproduzione più rapida, tuttavia esso non risulta conveniente quando si devono riprodurre grandi quantità di dati.
Ecco un esempio che illustra come dei dati in riga possano essere forniti ad un OBJECT:
<P>
<OBJECT id="orologio1"
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="data:application/x-oleobject;base64, ...dati in base64 ...">
Un orologio.
</OBJECT>
Si consulti per favore la sezione sulla presentazione visuale di oggetti, immagini e applet per informazioni su dimensione, allineamento e bordi di un oggetto.
<!ELEMENT PARAM - O EMPTY -- valore di proprietà denominato --> <!ATTLIST PARAM id ID #IMPLIED -- identificatore unico nell'ambito del 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 -- >
Marcatore iniziale: obbligatorio, Marcatore finale: proibito
Definizioni di attributo
Attributi definiti altrove
Gli elementi PARAM specificano un insieme di valori che possono essere richiesti da un oggetto al momento dell'esecuzione. Può comparire nel contenuto di un elemento OBJECT o APPLET un qualsiasi numero di elementi PARAM, in un ordine qualsiasi, ma questi devono essere posizionati all'inizio del contenuto dell'elemento OBJECT o APPLET che li racchiude.
Si assume che la sintassi dei nomi e dei valori sia compresa dall'implementazione dell'oggetto. Questo documento non specifica in che modo i programmi utente dovrebbero recuperare le coppie nome/valore né in che modo dovrebbero interpretare i nomi di parametro che compaiono due volte.
Ritorniamo all'esempio dell'orologio per illustrare l'uso di PARAM: supponiamo che l'applet sia in grado di gestire due parametri per l'esecuzione, che definiscono la sua altezza e la sua larghezza iniziali. Possiamo impostare le dimensioni iniziali a 40x40 pixel per mezzo di due elementi PARAM.
<P><OBJECT classid="http://www.lamiamacchina.it/orologioanalogico.py">
<PARAM name="altezza" value="40" valuetype="data">
<PARAM name="larghezza" value="40" valuetype="data">
Questo programma utente non è in grado di riprodurre applicazioni Python.
</OBJECT>
Nell'esempio successivo, i dati per l'esecuzione, relativi al parametro "Valori_iniziali" dell'oggetto, sono specificati come una risorsa esterna (un file GIF). Il valore dell'attributo valuetype è quindi impostato su "ref" mentre value è un URI che designa la risorsa.
<P><OBJECT classid="http://www.archiviogif.com/gifappli"
standby="Sto caricando Elvis...">
<PARAM name="Valori_iniziali"
value="./immagini/elvis.gif">
valuetype="ref">
</OBJECT>
Si noti che è stato impostato anche l'attributo standby, in modo che il programma utente possa visualizzare un messaggio mentre il sistema di riproduzione effettua il caricamento.
Quando un elemento OBJECT viene riprodotto, i programmi utente devono ricercare il contenuto solo di quegli elementi PARAM che sono discendenti diretti di OBJECT, e "passarglielo".
Pertanto, nell'esempio seguente, se "ogg1" è riprodotto, "param1" si applica a "ogg1" (e non a "ogg2"). Se invece è riprodotto "ogg2" e non "ogg1", "param1" viene ignorato, e "param2" si applica a "ogg2". Se nessuno dei due OBJECT viene riprodotto, non si applica nessuno dei due PARAM.
<P>
<OBJECT id="ogg1">
<PARAM name="param1">
<OBJECT id="ogg2">
<PARAM name="param2">
</OBJECT>
</OBJECT>
La posizione dell'implementazione di un oggetto è fornita da un URI. Come è stato esaminato 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 è comunemente "http". Alcuni applet possono impiegare altri schemi di denominazione. Per esempio, quando specificano un applet Java, gli autori possono usare URI che cominciano con "java", e, per applet ActiveX, gli autori possono usare "clsid".
Nell'esempio seguente inseriamo un applet Java all'interno di un documento HTML.
<P><OBJECT classid="java:program.start"> </OBJECT>
Tramite l'impostazione dell'attributo codetype, un programma utente può decidere se recuperare l'applicazione Java basandosi sulla propria capacità di fare ciò.
<OBJECT codetype="application/java-archive"
classid="java:program.start">
</OBJECT>
Alcuni sistemi di riproduzione richiedono informazioni aggiuntive per identificare la loro implementazione e bisogna che sia detto loro dove trovare quella informazione. Gli autori possono fornire informazioni sul percorso dell'implementazione dell'oggetto per mezzo dell'attributo codebase.
<OBJECT codetype="application/java-archive"
classid="java:program.start">
codebase="http://foooo.bar.com/java/lamiaimplementazione/"
</OBJECT>
L'esempio successivo specifica (con l'attributo classid) un oggetto ActiveX tramite un URI che comincia con lo schema di denominazione "clsid". L'attributo data determina la posizione dei dati da riprodurre (un altro orologio).
<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="http://www.acme.com/ole/orologio.stm">
Questa applicazione non è supportata.
</OBJECT>
Per dichiarare un oggetto in modo che non sia eseguito dal programma utente non appena venga letto, si imposti l'attributo booleano declare nell'elemento OBJECT. Allo stesso tempo, gli autori devono identificare la dichiarazione impostando l'attributo id nell'elemento OBJECT ad un valore univoco. Le successive istanzazioni dell'oggetto faranno riferimento a questo identificatore.
Un OBJECT dichiarato deve apparire in un documento prima della prima istanza di quell'OBJECT.
Un oggetto definito con l'attributo declare è istanziato ogni volta che un elemento che si riferisce a quell'oggetto necessita di essere riprodotto (es.: si attiva un collegamento che si riferisce ad esso, si attiva un oggetto che si riferisce ad esso, ecc.).
Nell'esempio seguente, dichiariamo un OBJECT e provochiamo la sua istanzazione tramite un riferimento ad esso da un collegamento. Pertanto l'oggetto può essere attivato cliccando per esempio su un testo sottolineato.
<P><OBJECT declare
id="terra.dichiarazione"
data="Terra.mpeg"
type="application/mpeg">
La <STRONG>Terra</STRONG> vista dallo spazio.
</OBJECT>
...più avanti nel documento...
<P>Una efficace <A href="#terra.dichiarazione"> animazione della Terra!</A>
L'esempio successivo illustra come specificare valori per l'esecuzione costituiti da altri oggetti. In questo esempio inviamo del testo (un componimento poetico, per la precisione) ad un ipotetico meccanismo per visualizzare poesie. L'oggetto riconosce un parametro per l'esecuzione chiamato "font" (diciamo per la riproduzione del testo poetico in un certo carattere). Il valore per questo parametro è esso stesso un oggetto, che introduce (ma non riproduce) l'oggetto font. La relazione tra l'oggetto font e l'oggetto per la visualizzazione di poesie è ottenuta (1) assegnando l'id "tribune" alla dichiarazione dell'oggetto font e (2) facendo riferimento ad esso dall'elemento PARAM dell'oggetto per la visualizzazione di poesie (tramite valuetype e value).
<P><OBJECT declare
id="tribune"
type="application/x-webfont"
data="tribune.gif">
</OBJECT>
...vedi il poema in KublaKhan.txt qui...
<P><OBJECT classid="http://foo.bar.com/vedi_poema"
data="KublaKhan.txt">
<PARAM name="font" valuetype="object" value="#tribune">
<P>State perdendo un visualizzatore di poesie veramente grande ...
</OBJECT>
I programmi utente che non supportano l'attributo declare devono riprodurre i contenuti della dichiarazione di OBJECT.
Si veda la DTD transitoria per la definizione formale.
Definizioni di attributo
Quando l'applet è "deserializzato", viene invocato il metodo start() ma non il metodo init(). Gli attributi validi quando l'oggetto originale era serializzato non vengono ripristinati. Tutti gli attributi passati a questa istanza dell'APPLET saranno disponibili per l'applet. Gli autori dovrebbero servirsi di questa caratteristica con estrema cautela. Un applet dovrebbe essere fermato prima di essere serializzato.
Sia code sia object devono essere presenti. Se code e object sono entrambi dati, è un errore se forniscono nomi di classe differenti.
Attributi definiti altrove
Questo elemento, supportato da tutti i browser abilitati per Java, consente ai progettisti di incorporare un applet Java in un documento HTML. È stato disappprovato in favore dell'elemento OBJECT.
Il contenuto dell'APPLET agisce come un'informazione alternativa per quei programmi utente che non supportano questo elemento o che sono attualmente configurati in modo da non supportare gli applet. In tutti gli altri casi i programmi utente devono ignorare il contenuto.
ESEMPIO DISAPPROVATO:
Nell'esempio seguente, l'elemento APPLET include un applet Java nel
documento. Poiché non è fornito alcun codebase, si assume che l'applet si
trovi nella stessa directory del documento corrente.
<APPLET code="Bolle.class" width="500" height="500"> Un applet Java che disegna bolle animate. </APPLET>
Questo esempio può essere riscritto usando OBJECT nel modo seguente:
<P><OBJECT codetype="application/java"
classid="java:Bolle.class"
width="500" height="500">
Un applet Java che disegna bolle animate.
</OBJECT>
Valori iniziali possono essere forniti all'applet tramite l'elemento PARAM.
ESEMPIO DISAPPROVATO:
Il seguente applet Java esemplificativo:
<APPLET code="AudioItem" width="15" height="15"> <PARAM name="snd" value="Ciao.au|Benvenuto.au"> Un applet Java che genera un suono di benvenuto. </APPLET>
può essere riscritto come segue usando OBJECT:
<OBJECT codetype="application/java"
classid="AudioItem"
width="15" height="15">
<PARAM name="snd" value="Ciao.au|Benvenuto.au">
Un applet Java che genera un suono di benvenuto.
</OBJECT>
Un documento incorporato è completamente indipendente dal documento all'interno del quale è incorporato. Per esempio, URI relativi presenti nel documento incorporato vengono risolti in conformità dell'URI di base del documento incorporato, non di quello del documento principale. Un documento incorporato è semplicemente riprodotto all'interno di un altro documento (ad es. in una sottofinestra); esso rimane in ogni caso indipendente.
Ad esempio, il codice seguente incorpora il contenuto di incorporami.html nel punto in cui si verifica la definizione di OBJECT.
...testo prima... <OBJECT data="incorporami.html"> Attenzione: incorporami.html potrebbe non essere incorporato. </OBJECT> ...testo dopo...
Si ricordi che il contenuto di OBJECT deve essere riprodotto soltanto se il file specificato dall'attributo data non può essere caricato.
Il comportamento di un programma utente nel caso in cui un file includa se stesso non è definito.
Una mappa immagine è creata associando un oggetto con la descrizione di aree geometriche sensibili sull'oggetto.
Vi sono due tipi di mappe immagine:
Le mappe immagine sul lato cliente sono preferite alle mappe immagine sul lato server per almeno due ragioni: risultano accessibili a persone che navigano adoperando programmi utente di tipo non grafico ed offrono una risposta immediata su se il puntatore si trovi oppure no su una regione attiva.
<!ELEMENT MAP - - ((%block;) | AREA)+ -- mappa immagine sul lato cliente --> <!ATTLIST MAP %attrs; -- %coreattrs, %i18n, %events -- name CDATA #REQUIRED -- per riferimento da parte di usemap -- >
Marcatore iniziale: obligatorio, Marcatore finale: obbligatorio
<!ELEMENT AREA - O EMPTY -- area di una mappa immagine sul lato cliente --> <!ATTLIST AREA %attrs; -- %coreattrs, %i18n, %events -- shape %Shape; rect -- controlla l'interpretazione delle coordinate -- coords %Coords; #IMPLIED -- elenco di lunghezze separate da virgole -- href %URI; #IMPLIED -- URI di una risorsa collegata -- nohref (nohref) #IMPLIED -- questa regione è inattiva -- alt %Text; #REQUIRED -- breve descrizione -- tabindex NUMBER #IMPLIED -- posizione nell'ordine di tabulazione -- accesskey %Character; #IMPLIED -- tasti chiave per l'accessibilità -- onfocus %Script; #IMPLIED -- l'elemento ha ottenuto il focus -- onblur %Script; #IMPLIED -- l'elemento perde il focus -- >
Marcatore iniziale: obbligatorio, Marcatore finale: proibito
Definzioni di attributo per MAP
Definizioni di attributo per AREA
Le coordinate sono relative all'angolo superiore sinistro dell'oggetto. Tutti i valori sono lunghezze. Tutti i valori sono separati da virgole.
Attributo per associare una mappa immagine con un elemento
Attributi definiti altrove
L'elemento MAP specifica una mappa immagine sul lato cliente (o un altro meccanismo di navigazione) che può essere associato con un altro elemento (IMG, OBJECT o INPUT). Una mappa immagine è associata con un elemento tramite l'attributo usemap dell'elemento. L'elemento MAP può essere usato senza un'immagine associata, per generici meccanismi di navigazione.
La presenza dell'attributo usemap per un elemento OBJECT implica che l'oggetto che si sta includendo sia un'immagine. Inoltre, quando l'elemento OBJECT è associato ad una mappa immagine sul lato cliente, i programmi utente possono implementare l'interazione dell'utente con l'OBJECT esclusivamente in termini di mappa immagine sul lato cliente. Questo permette a programmi utente (quali un browser vocale o un robot) di interagire con l'OBJECT senza la necessità di elaborarlo; il programma utente può anche scegliere di non recuperare (o elaborare) affatto l'oggetto. Quando un elemento OBJECT è associato con una mappa immagine, gli autori non dovrebbero aspettarsi che l'oggetto sia recuperato o elaborato da ogni programma utente.
Il modello di contenuto dell'elemento MAP consente agli autori le seguenti combinazioni:
Quando un elemento MAP presenta un contenuto misto (sia elementi AREA sia contenuti a livello di blocco), i programmi utente devono ignorare gli elementi AREA.
Gli autori dovrebbero specificare in modo completo la geometria di una mappa immagine per mezzo di elementi AREA o per mezzo di elementi A, oppure completamente per mezzo di entrambi, se il contenuto è di tipo misto. Gli autori possono voler mescolare i contenuti in modo che i programmi utente più datati possano gestire le geometrie della mappa per mezzo di elementi AREA, mentre i nuovi programmi utente possano avvantaggiarsi di un contenuto a livello di blocco più ricco.
Se due o più regioni definite si sovrappongono, l'elemento di definizione di regione che appare prima nel documento ha la precedenza (cioè risponde all'immissione di dati da parte dell'utente).
Programmi utente ed autori dovrebbero offrire alternative testuali alle mappe immagine di tipo grafico, per i casi in cui la grafica non sia disponibile o l'utente non possa accedervi. Ad esempio, i programmi utente possono usare il testo alt per creare collegamenti testuali al posto di una mappa immagine di tipo grafico. Tali collegamenti possono essere attivati in molteplici modi (tastiera, attivazione vocale, ecc.).
Nota. MAP non è compatibile all'indietro con i programmi utente HTML 2.0.
Nell'esempio successivo creiamo una mappa immagine sul lato cliente per l'elemento OBJECT. Non vogliamo che i contenuti della mappa immagine siano riprodotti quando viene riprodotto OBJECT, pertanto "nascondiamo" l'elemento MAP all'interno del contenuto dell'elemento OBJECT. Di conseguenza i contenuti dell'elemento MAP saranno riprodotti soltanto se OBJECT non può essere riprodotto.
<HTML>
<HEAD>
<TITLE>Forte questo sito!</TITLE>
</HEAD>
<BODY>
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#mappa1">
<MAP name="mappa1">
<P>Per navigare il sito:
<A href="guida.html" shape="rect" coords="0,0,118,28">Guida all'accesso</a> |
<A href="viabreve.html" shape="rect" coords="118,0,184,28">Vai</A> |
<A href="ricerca.html" shape="circle" coords="184,200,60">Ricerca</A> |
<A href="primi10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">I primi dieci</A>
</MAP>
</OBJECT>
</BODY>
</HTML>
Possiamo volere che i contenuti della mappa immagine siano riprodotti anche quando un programma utente è in grado di riprodurre l'OBJECT. Per esempio, possiamo voler associare una mappa immagine con un elemento OBJECT ed includere una barra di navigazione testuale alla fine della pagina. Per fare ciò, definiamo l'elemento MAP esternamente ad OBJECT:
<HTML>
<HEAD>
<TITLE>Forte questo sito!</TITLE>
</HEAD>
<BODY>
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#mappa1">
</OBJECT>
...qui il resto della pagina...
<MAP name="mappa1">
<P>Per navigare il sito:
<A href="guida.html" shape="rect" coords="0,0,118,28">Guida all'accesso</a> |
<A href="viabreve.html" shape="rect" coords="118,0,184,28">Vai</A> |
<A href="ricerca.html" shape="circle" coords="184,200,60">Ricerca</A> |
<A href="primi10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">I primi dieci</A>
</MAP>
</BODY>
</HTML>
Nell'esempio successivo, creiamo un'analoga mappa immagine, questa volta usando l'elemento AREA. Si noti l'uso del testo alt:
<P><OBJECT data="navbar1.gif" type="image/gif" usemap="#mappa1">
<P>Questa è una barra di navigazione.
</OBJECT>
<MAP name="mappa1">
<AREA href="guida.html"
alt="Guida all'accesso"
shape="rect"
coords="0,0,118,28">
<AREA href="ricerca.html"
alt="Ricerca"
shape="rect"
coords="184,0,276,28">
<AREA href="viabreve.html"
alt="Vai"
shape="circle"
coords="184,200,60">
<AREA href="primi10.html"
alt="I primi dieci"
shape="poly"
coords="276,0,276,28,100,200,50,50,276,0">
</MAP>
Qui abbiamo una versione analoga, che usa l'elemento IMG invece di OBJECT (con la medesima dichiarazione di MAP):
<P><IMG src="navbar1.gif" usemap="#mappa1" alt="barra di navigazione">
L'esempio seguente illustra come le mappe immagine possono essere condivise.
Elementi OBJECT annidati sono utili allo scopo di fornire dei ripieghi, nel caso che un programma utente non supporti determinati formati. Per esempio:
<P>
<OBJECT data="navbar.png" type="image/png">
<OBJECT data="navbar.gif" type="image/gif">
testo che descrive l'immagine...
</OBJECT>
</OBJECT>
Se il programma utente non supporta il formato PNG, esso tenta di riprodurre l'immagine GIF. Se non supporta GIF (ad es. è un programma utente basato sulla sintesi vocale), assume per difetto la descrizione testuale fornita come contenuto dell'elemento OBJECT interno. Quando degli elementi OBJECT sono annidati in questo modo, gli autori possono condividere delle mappe immagine tra essi:
<P>
<OBJECT data="navbar.png" type="image/png" usemap="#mappa1">
<OBJECT data="navbar.gif" type="image/gif" usemap="#mappa1">
<MAP name="mappa1">
<P>Per navigare il sito:
<A href="guida.html" shape="rect" coords="0,0,118,28">Guida all'accesso</a> |
<A href="viabreve.html" shape="rect" coords="118,0,184,28">Vai</A> |
<A href="ricerca.html" shape="circle" coords="184,200,60">Ricerca</A> |
<A href="primi10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">I primi dieci</A>
</MAP>
</OBJECT>
</OBJECT>
L'esempio successivo illustra come sia possibile specificare delle ancore in modo da creare delle zone inattive all'interno di una mappa immagine. La prima ancora specifica una piccola regione circolare senza collegamenti associati. La seconda ancora specifica una regione circolare più grande avente le medesime coordinate del centro. Combinate, le due formano un anello il cui centro è inattivo ed il cui bordo è attivo. L'ordine delle definizioni di ancora è importante, dal momento che il cerchio più piccolo deve sovrascrivere il cerchio più grande.
<MAP name="mappa1"> <P> <A shape="circle" coords="100,200,50">Io sono inattivo.</A> <A href="cerchio-esterno.html" shape="circle" coords="100,200,250">Io sono attivo.</A> </MAP>
Similmente, l'attributo nohref dell'elemento AREA dichiara che una regione geometrica non ha un collegamento associato.
Le mappe immagine sul lato server possono essere interessanti in casi in cui la mappa immagine è troppo complicata per una mappa immagine sul lato cliente.
È possibile soltanto definire una mappa immagine sul lato server per gli elementi IMG e INPUT. Nel caso di IMG, l'IMG deve essere all'interno di un elemento A e l'attributo booleano ismap ([CI]) deve essere impostato. Nel caso di INPUT, l'INPUT deve essere di tipo "image".
Quando l'utente attiva il collegamento cliccando sull'immagine, le coordinate dello schermo sono inviate direttamente al server su cui il documento risiede. Le coordinate dello schermo sono espresse come valori in pixel dello schermo relativi all'immagine. Per informazioni normative a proposito della definizione di un pixel e di come scalarlo, si consulti per favore [CSS1].
Nell'esempio seguente, la regione attiva definisce un collegamento sul lato server. Pertanto un clic su qualsiasi punto dell'immagine provocherà l'invio al server delle coordinate del clic.
<P><A href="http://www.acme.com/cgi-bin/competizione">
<IMG src="gara.gif" ismap alt="bersaglio"></A>
Il punto in cui si è cliccato viene passato al server nel modo seguente. Il programma utente deriva un nuovo URI dall'URI specificato dall'attributo href dell'elemento A, aggiungendo un '?' seguito dalle coordinate x e y, separate da una virgola. Il collegamento viene poi seguito usando il nuovo URI. Per esempio, nel caso sopra proposto, se l'utente clicca alla posizione x=10, y=27, allora l'URI derivato è "http://www.acme.com/cgi-bin/competizione?10,27".
I programmi utente che non offrono all'utente un sistema per selezionare specifiche coordinate (ad es., programmi utente di tipo non grafico che si affidano all'input da tastiera, programmi utente di tipo vocale, ecc.), dovrebbero inviare al server, quando il collegamento è attivato, le coordinate "0,0".
Definizioni di attributo
Quando specificati, gli attributi width e height dicono ai programmi utente di annullare la dimensione naturale dell'immagine o dell'oggetto in favore di questi valori.
Quando l'oggetto è un'immagine, esso viene scalato. I programmi utente dovrebbero fare del loro meglio per scalare un oggetto o un'immagine, in modo che corrispondano alla larghezza e all'altezza specificate dall'autore. Si noti che le lunghezze espresse come percentuali sono basate sullo spazio orizzontale o verticale attualmente disponibile, non sulla dimensione naturale dell'immagine, oggetto o applet.
Gli attributi height e width forniscono ai programmi utente un'idea della dimensione di un'immagine o di un oggetto, così che possano riservarvi uno spazio adeguato e continuare la riproduzione del documento, mentre sono in attesa dei dati dell'immagine.
Definizioni di attributo
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 di attributo
Definizioni di atributo
I seguenti valori di align riguardano la posizione di un oggetto rispetto al testo circostante:
Gli altri due valori, left e right, fanno sì che l'immagine fluttui lungo i margini sinistro o destro correnti. Essi vengono discussi nella sezione sugli oggetti fluttuanti.
Differenti interpretazioni di align. I programmi utente non interpretano allo stesso modo l'attributo align. Alcuni tengono conto soltanto di ciò che si trova nella riga di testo che precede l'elemento, altri invece tengono conto del testo su entrambi i lati dell'elemento.
Definizioni di attributo
Numerosi elementi di tipo non testuale (IMG, AREA, APPLET e INPUT) consentono agli autori di specificare un testo alternativo, che serva come contenuto quando l'elemento non può essere riprodotto normalmente. Specificare un testo alternativo aiuta gli utenti che non dispongono di terminali in grado di visualizzare la grafica, gli utenti i cui browser non supportano i moduli, gli utenti ipovedenti, quelli che usano sintetizzatori vocali, quelli che hanno configurato i loro programmi utente di tipo grafico in modo da non visualizzare le immagini, ecc.
L'attributo alt deve essere specificato per gli elementi IMG e AREA. È invece facoltativo per gli elementi INPUT e APPLET.
Il testo alternativo può essere di grande aiuto, ma deve essere gestito con attenzione. Gli autori dovrebbero osservare le seguenti linee guida:
Gli implementatori dovrebbero consultare la sezione sull'accessibilità per informazioni su come gestire i casi di testo alternativo omesso.