Nota: Este documento es parte de una traducción al castellano de la Recomendación del W3C "HTML 4.01 Specification" (más información). Puede consultar laversión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozoarroba conclase punto net. Gracias por su colaboración.
Véase elAviso de copyright de la traducción.
Contenidos
Las características multimedia de HTML permiten a los autores incluir ensus páginas imágenes, aplicaciones (programas que se descargan automáticamente yse ejecutan en la máquina del usuario), videoclips, y otros documentos HTML ensus páginas.
Por ejemplo, para incluir una imagen PNG en un documento, los autores puedenescribir:
<BODY><P>Aquí tienen un primer plano del Gran Cañón:<OBJECT data="canyon.png" type="image/png">Esto es un <EM>primer plano</EM> del Gran Cañón.</OBJECT></BODY>
Las versiones anteriores de HTML permitían a los autores incluir imágenes(por medio de
Para solucionar estos problemas, HTML 4 introduce el elementoOBJECT,que ofrece una solución universal para la inclusión de objetos genéricos. ElelementoOBJECT permite a los autores HTML especificar todo lo que necesita unagente de usuario para la representación de un objeto: código fuente, valoresiniciales, y datos en tiempo de ejecución. En esta especificación, el término"objeto" se utiliza para describir las cosas que la gente quiere colocar en losdocumentos HTML; otros términos usados habitualmente son: applets, plug-ins,controladores de medios, etc.
El nuevo elementoOBJECT asume así algunas de las tareas realizadas por loselementos existentes. Considérese la siguiente tabla de funcionalidades:
| Tipo de inclusión | Elemento específico | Elemento genérico |
|---|---|---|
| Imagen | IMG | OBJECT |
| Aplicación | APPLET(Desaprobado) | OBJECT |
| Otro documento HTML | IFRAME | OBJECT |
La tabla indica que cada tipo de inclusión tiene una solución específicay una general. El elemento genérico
Para incluir imágenes, los autores pueden usar el elementoOBJECTo el elementoIMG.
Para incluir aplicaciones, los autores deberían usar elelementoOBJECTya que el elementoAPPLET estádesaprobado.
Para incluir un documento HTML en otros, los autorespueden usar o bien el nuevo elementoIFRAME o bien el elementoOBJECT.En ambos casos, el documento incluido sigue siendo independiente del documentoprincipal. Los agentes de usuario visuales pueden presentar el documento incluidoen una ventana diferenciada del documento principal. Consulte las notassobre documentos incluidos para una comparación entreOBJECT eIFRAME en lo que a inclusión de documentosse refiere.
Las imágenes y otros objetos incluidos pueden tener hipervínculos asociadosa ellos, tanto a través de losmecanismos de vinculación estándar,como también a través demapas de imágenes.Un mapa de imágenes especifica las regiones geométricas activas de un objetoincluido, y asigna un vínculo a cada región. Cuando se activan, estos vínculospueden hacer que se abra un documento, que se ejecute un programa en el servidor, etc.
En las secciones siguientes, hablamos sobre los distintos mecanismos queestán a disposición de los autores para inclusiones multimedia y para crearmapas de imágenes de dichas inclusiones.
<!-- Para evitar problemas con AAUU de sólo texto así como para hacer el contenido de las imágenes inteligibles y navegables para los usuarios de AAUU no visuales, es necesario proporcionar una descripción con ALT, y evitar mapas de imágenes en el lado del servidor --><!ELEMENTIMG - O EMPTY -- Imagen incluida --><!ATTLIST IMG%attrs; --%coreattrs,%i18n,%events --src%URI; #REQUIRED -- URI de la imagen a incluir --alt%Text; #REQUIRED -- descripción corta --longdesc%URI; #IMPLIED -- vínculo a descripción larga (complementa a alt) --nameCDATA #IMPLIED -- nombre de la imagen para los scripts --height%Length; #IMPLIED -- especificar nueva altura --width%Length; #IMPLIED -- especificar nueva anchura --usemap%URI; #IMPLIED -- usar mapa de imágenes en el cliente --ismap (ismap) #IMPLIED -- usar mapa de imágenes en el servidor -- >
Etiqueta inicial:obligatoria, Etiqueta final:prohibida
Definiciones de atributos
Atributos definidos en otros lugares
El elementoIMG incluye una imagen en el documento actual en la posición de ladefinición del elemento. El elementoIMG no tiene contenido; normalmente sereemplaza en línea por la imagen designada por el atributosrc, con la única excepción de las imágenes alineadas a la izquierda o ala derecha y que están"flotando"fuera de línea.
En un ejemplo anterior, definimos un vínculo a una fotografía de familia.Aquí, insertamos la foto directamente en el documento actual:
<BODY><P>¡Acabo de volver de mis vacaciones! Aquí os pongo una foto de mi familia en el lago:<IMG src="http://www.algunsitio.com/Gente/Juan/vacaciones/familia.png" alt="Una foto de mi familia en el lago."></BODY>
Esta inclusión también puede realizarse con el elementoOBJECTcomo sigue:
<BODY><P>¡Acabo de volver de mis vacaciones! Aquí os pongo una foto de mi familia en el lago:<OBJECT data="http://www.algunsitio.com/Gente/Juan/vacaciones/familia.png" type="image/png">Una foto de mi familia en el lago.</OBJECT></BODY>
El atributoalt especifica un texto alternativo que se representa cuando la imagenno puede ser mostrada (ver abajo para más información sobrecómo especificar texto alternativo). Los agentes de usuariodeben representar el texto alternativo cuando no puedan soportar imágenes, cuandono puedan soportar un tipo de imágenes, o cuando estén configurados para no mostrarimágenes.
El siguiente ejemplo muestra cómo puede utilizarse el atributolongdescpara una descripción más rica:
<BODY><P><IMG src="mapadelsitio.gif" alt="Mapa del Sitio de Laboratorios HP" longdesc="mapadelsitio.html"></BODY>
El atributoalt proporciona una descripción corta de la imagen. Esta informacióndebería ser suficiente como para que los usuarios puedan decidir si quieren seguirel vínculo dado por el atributolongdesc hacia la descripción más larga, en este caso "mapadelsitio.html".
Consulte la sección sobre lapresentación visual de objetos,imágenes y aplicaciones para información sobre tamaño de la imagen, alineacióny bordes.
<!ELEMENTOBJECT - - (PARAM |%flow;)* -- objeto genérico incluido --><!ATTLIST OBJECT%attrs; --%coreattrs,%i18n,%events --declare (declare) #IMPLIED -- declarar pero no crear --classid%URI; #IMPLIED -- identifica una implementación --codebase%URI; #IMPLIED -- URI base para classid, data, archive--data%URI; #IMPLIED -- referencia a los datos del objeto --type%ContentType; #IMPLIED -- tipo de contenido de los datos --codetype%ContentType; #IMPLIED -- tipo de contenido del código --archiveCDATA #IMPLIED -- lista de URIs separados por espacios --standby%Text; #IMPLIED -- mensaje a mostrar mientras se carga --height%Length; #IMPLIED -- especificar nueva altura --width%Length; #IMPLIED -- especificar nueva anchura --usemap%URI; #IMPLIED -- usar mapa de imágenes en el cliente --nameCDATA #IMPLIED -- enviar como parte de un formulario --tabindexNUMBER #IMPLIED -- posición en el orden de tabulación -- >
Etiqueta inicial:obligatoria, Etiqueta final:obligatoria
Definiciones de atributos
Atributos definidos en otros lugares
La mayoría de los agentes de usuario tienen mecanismosintegrados para representar tipos de datos comunes como texto,imágenes GIF, colores, fuentes, y un puñado de elementos gráficos. Para representartipos de datos para los cuales no tienen soporte nativo, los agentes de usuario suelenejecutar aplicaciones externas. El elementoOBJECT permite a los autores controlarsi los datos deberían ser representados externamente por algún programa, especificadopor el autor, que represente los datos dentro del agente de usuario.
En el caso más general, puede ser necesario que el autor tenga que especificartres tipos de información:
El elementoOBJECT permite a los autores especificar estos tres tipos de datos,pero los autores no tienen que especificar necesariamente los tres a la vez. Porejemplo, algunos objetos pueden no necesitar datos (p.ej., una aplicación autónomaque realice una pequeña animación). Otros pueden no necesitar una inicializaciónen tiempo de ejecución. Y otros pueden no necesitar información adicional sobrela implementación, es decir, el propio agente de usuario puede ya saber cómorepresentar ese tipo de datos (p.ej., imágenes GIF).
Los autores especifican la implementación de un objetoy la localización de los datos a representar por medio del objetoOBJECT.Sin embargo, para especificar valores en tiempo de ejecución, los autores usanel elemento
El elementoOBJECT también puede aparecer en el contenido del elementoHEAD.Ya que los agentes de usuario en general no representan los elementos delHEAD,los autores deberían asegurarse de que los elementosOBJECT en elHEAD noespecifiquen contenido que pueda ser representado. Consulte la sección sobrecompartir datos de un marcopara un ejemplo de inclusión del elementoOBJECT en el elementoHEAD.
Consulte la sección sobrecontrolesde formulario para información sobre elementosOBJECT en formularios.
Este documento no especifica el comportamiento de elementosOBJECTque usen tanto el atributoclassid para identificar una implementación comoel atributodata para especificar los datos para esa implementación. Para asegurarla portabilidad, los autores deberían usar el elementoPARAM para decir a las implementacionesdónde obtener los datos adicionales.
Un agente de usuario debe interpretar un elementoOBJECT de acuerdo con las siguientesreglas de precedencia:
Los autores no deberían incluir contenido en los elementosOBJECTque aparezcan en el elementoHEAD.
En el siguiente ejemplo, insertamos una aplicación de reloj analógico en undocumento por medio del elementoOBJECT. La aplicación, escrita en el lenguaje Python,no necesita datos adicionales ni valores en tiempo de ejecución. El atributoclassidespecifica la localización de la aplicación:
<P><OBJECT classid="http://www.miamachina.it/relojanalogico.py"></OBJECT>
Obsérvese que el reloj será representado tan pronto como el agente de usuariorepresente esta declaración
Los autores deberían completar esta declaración con un texto alternativocomo contenido deOBJECT por si el agente de usuario no puede representar el reloj.
<P><OBJECT classid="http://www.miamachina.it/relojanalogico.py">Un reloj animado.</OBJECT>
Una consecuencia significativa del diseñodel elementoOBJECT es que ofrece un mecanismo para especificar representaciones alternativasdel objeto; cada declaraciónOBJECT anidada puede especificar tiposde contenido alternativos. Si un agente de usuario no puede representar el primerOBJECT, intenta representar los contenidos, que a su vez pueden ser otroelementoOBJECT, etc.
En el siguiente ejemplo, anidamos varias declaracionesOBJECTpara ilustrar el funcionamiento de las representaciones alternativas. Unagente de usuario intentará representar el primer elementoOBJECT que pueda, en el orden siguiente:(1) una aplicación LaTierra escrita en el lenguaje Python, (2) una animación MPEGde la Tierra, (3) una imagen GIF de la Tierra, (4) texto alternativo.
<P> <!-- Primero, intentarlo con la aplicación Python --><OBJECT title="La Tierra vista desde el espacio" classid="http://www.observer.mars/LaTierra.py"> <!-- Si no, intentarlo con el vídeo MPEG --> <OBJECT data="LaTierra.mpeg" type="application/mpeg"> <!-- Si no, intentarlo con la imagen GIF --> <OBJECT data="LaTierra.gif" type="image/gif"> <!-- Si no, representar el texto --> <STRONG>La Tierra</STRONG> vista desde el espacio. </OBJECT> </OBJECT></OBJECT>
La declaración más externa especifica una aplicación que no necesitadatos ni valores iniciales. La segunda declaración especifica una animaciónMPEG, y como no define la localización de ninguna implementación que proceseMPEG, depende de que el agente de usuario represente la animación. Tambiénestablecemos el atributotype para que los agentes de usuarioque sepan que no pueden procesar MPEG no se molesten en obtener "LaTierra.mpeg"de la red. La tercera declaración especifica la localización de un fichero GIFy proporciona un texto alternativo por si todos los mecanismos anteriores fallaran.
Datos en línea frente a datos externos. Los datos arepresentar pueden proporcionarse de dos maneras: en línea y desde un recursoexterno. Si bien el primer método resultará generalmente en una representaciónmás rápida, no es conveniente cuando se representan grandes cantidades de datos.
Aquí tenemos un ejemplo que ilustra cómo se puede servir a un elementoOBJECT datos en línea:
<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="data:application/x-oleobject;base64,...datos en base64..."> Un reloj.</OBJECT>
Consulte la sección sobre larepresentación visual de objetos,imágenes y aplicaciones para información sobre tamaño de objetos, alineacióny bordes.
<!ELEMENTPARAM - O EMPTY -- valor de propiedad con nombre --><!ATTLIST PARAMidID #IMPLIED -- identificador único a nivel de documento --nameCDATA #REQUIRED -- nombre de la propiedad --valueCDATA #IMPLIED -- valor de la propiedad --valuetype (DATA|REF|OBJECT) DATA -- cómo interpretar el valor --type%ContentType; #IMPLIED -- tipo de contenido para el valor cuando valuetype=ref -- >
Etiqueta inicial:obligatoria, Etiqueta final:prohibida
Definiciones de atributos
Atributos definidos en otros lugares
Los elementosPARAM especifican un conjunto de valores que pueden ser necesariospara un objeto en tiempo de ejecución. Puede aparecer cualquier número de elementosPARAMen el contenido de un elementoOBJECT oAPPLET, y en cualquier orden, pero deben ser colocadosal principio del contenido del elementoOBJECT oAPPLETque los contienen.
Se supone que la sintaxis de nombres y valores es entendida por laimplementación del objeto. Este documento no especifica cómo deberían obtenerlos agentes de usuario los pares nombre/valor ni cómo deberían interpretar losnombres de parámetros que aparezcan dos veces.
Volvemos al ejemplo del reloj para ilustrar la utilización dePARAM:supongamos que la aplicación es capaz de manejar dos parámetros de ejecuciónque definen su altura y anchura iniciales. Podemos establecer las dimensionesiniciales en 40x40 píxeles con dos elementosPARAM.
<P><OBJECT classid="http://www.miamachina.it/relojanalogico.py"><PARAM name="altura" value="40" valuetype="data"><PARAM name="anchura" value="40" valuetype="data">Este agente de usuario no puede representar aplicaciones Python.</OBJECT>
En el siguiente ejemplo, se especifican los datos de ejecución parael parámetro "Valores_inic" del objeto como recurso externo (un fichero GIF).El valor del atributovaluetype se establece por tanto a "ref"yvalue es un URI que designa el recurso.
<P><OBJECT classid="http://www.gifstuff.com/aplicgif" standby="Cargando Elvis..."><PARAM name="Valores_inic" value="./imagenes/elvis.gif"> valuetype="ref"></OBJECT>
Obsérvese que también hemos establecido el atributostandby de modo que elagente de usuario pueda mostrar un mensaje mientras se carga el mecanismo derepresentación.
Cuando representen un elementoOBJECT, los agentes de usuario sólo deben buscar el contenido deaquellos elementos
Así, en el ejemplo siguiente, si se representa "obj1", "param1" se aplicaa "obj1" (y no a "obj2"). Si "obj1" no se representa y "obj2" sí, "param1" nose tiene en cuenta, y "param2" se aplica a "obj2". Si ninguno de losOBJECTse representa, ninguno de los
<P><OBJECT> <PARAM name="param1"> <OBJECT> <PARAM name="param2"> </OBJECT></OBJECT>
La localización de la implementación de un objeto viene dada por un URI.Como vimos en laintroducción a losURIs, el primer segmento de un URI absoluto especifica el esquema de nombresusado para transferir los datos designados por el URI. Para documentos HTML,este esquema es normalmente "http". Algunas aplicaciones podrían usar otrosesquemas de nombres. Por ejemplo, cuando se especifica una aplicación Java, losautores pueden usar URIs que comiencen con java, y para aplicaciones ActiveX,los autores pueden usar "clsid".
En el ejemplo siguiente, insertamos una aplicación Java en un documento HTML.
<P><OBJECT classid="java:program.start"></OBJECT>
Al establecer el atributo
<OBJECT codetype="application/java-archive" classid="java:program.start"></OBJECT>
Algunos esquemas de representación necesitan información adicionalpara identificar su implementación, y hay que decirles dónde encontraresa información. Los autores pueden dar la información de la ruta de acceso a laimplementación del objeto a través del atributocodebase.
<OBJECT codetype="application/java-archive" classid="java:program.start"> codebase="http://bla.bla.com/java/miimplementacion/"</OBJECT>
El siguiente ejemplo especifica (con el atributoclassid) un objeto ActiveX a través de un URI que comienza con elesquema de nombres "clsid". El atributodata localiza los datos a representar(otro reloj).
<P><OBJECT classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502" data="http://www.acme.com/ole/reloj.stm">Esta aplicación no está soportada.</OBJECT>
Para declarar un objeto de modo que no sea ejecutado cuando lo leael agente de usuario, se establece el atributo booleanodeclare del elementoOBJECT. Al mismo tiempo,los autores deben identificar la declaración estableciendo el atributoiddel elementoOBJECT en un valor único. Las creaciones posteriores delobjeto se referirán a este identificador.
UnOBJECT declarado debe aparecer en un documento antesde la primera creación de eseOBJECT.
Se crea un objeto definido con el atributodeclare cada vez que un elemento que serefiera a ese objeto necesite que sea representado (p.ej., se activa un vínculoque se refiere a él, se activa un objeto que se refiere a él, etc.).
En el siguiente ejemplo, declaramos unOBJECT y hacemos que se creehaciendo referencia a él desde un vínculo. Así, el objeto puede activarsehaciendo clic en un texto resaltado, por ejemplo.
<P><OBJECT declare data="LaTierra.mpeg" type="application/mpeg"> <STRONG>La Tierra</STRONG> vista desde el espacio.</OBJECT>...más abajo en el documento...<P>¡Una preciosa <A href="#tierra.declaracion"> animación de la Tierra!</A>
Otra manera de crear un objeto declarado de esta forma es:
<OBJECT data="#tierra.declaracion"></OBJECT>
El siguiente ejemplo ilustra cómo especificar valores de ejecuciónque son otros objetos. En este ejemplo, enviamos texto (concretamente un poema)a un hipotético mecanismo para ver poemas. El objeto reconoce un parámetrollamado "fuente" (por ejemplo para representar el poema con una cierta fuente).El valor de este parámetro es a su vez un objeto que inserta (pero queno representa) el objeto fuente. La relación entre el objeto fuente y elobjeto visor de poemas se consigue (1) asignando elid "tribuna" a la declaracióndel objeto y (2) refiriéndose a él desde el elementoPARAM del objeto visor depoemas (convaluetype yvalue).
<P><OBJECT declare type="application/x-webfont" data="tribuna.gif"></OBJECT>...ver el problema de KublaKhan.txt aquí...<P><OBJECT classid="http://bla.bla.com/visordepoemas" data="KublaKhan.txt"><PARAM name="fuente" valuetype="object" value="#tribuna"><P>Te estás perdiendo un visor de poemas realmente estupendo ...</OBJECT>
Los agentes de usuario que no soporten el atributodeclare deben representar loscontenidos de la declaraciónOBJECT.
Ver elDTD Transicional para ladefinición formal.
Definiciones de atributos
Cuando el applet es "deserializado", se invoca el métodostart(),pero no el métodoinit(). Los atributos que eran válidos cuandoel objeto original fue serializadono son restaurados. Cualquieratributo que se pase a esta instanciaAPPLET estará a disposición del applet.Los autores deberían usar esta característica con extrema cautela. Un appletdebería ser detenido antes de ser serializado.
Deben estar presentes o biencode o bien
Atributos definidos en otros lugares
Este elemento, admitido por todos los browsers con soporte Java, permitea los diseñadores incluir un applet Java en un documento HTML. Ha sidodesaprobado en favor del elementoOBJECT.
El contenido de
EJEMPLO DESAPROBADO:
En el siguiente ejemplo, el elementoAPPLET incluye un applet Java en el documento.Al no haberse suministrado uncodebase, se supone que el appletestá en el mismo directorio que el documento actual.
<APPLET code="Burbujas.class" width="500" height="500">Applet Java que dibuja burbujas animadas.</APPLET>
Este ejemplo puede reformularse conOBJECT de esta forma:
<P><OBJECT codetype="application/java" classid="java:Burbujas.class" width="500" height="500">Applet Java que dibuja burbujas animadas.</OBJECT>
Se pueden proporcionar valores iniciales al applet por medio del elementoPARAM.
EJEMPLO DESAPROBADO:
El siguiente ejemplo de applet Java:
<APPLET code="AudioItem" width="15" height="15"><PARAM name="snd" value="Hola.au|Bienvenido.au">Applet Java que reproduce un sonido de bienvenida.</APPLET>
puede reformularse de la siguiente manera conOBJECT:
<OBJECT codetype="application/java" classid="AudioItem" width="15" height="15"><PARAM name="snd" value="Hola.au|Bienvenido.au">Applet Java que reproduce un sonido de bienvenida.</OBJECT>
Un documento incluido es completamente independientedel documento en el cual se incluye. Por ejemplo, los URIs relativos deldocumento incluidose completande acuerdo con el URI base del documento incluido, no con el del documento principal.Un documento incluido sólo se representa dentro de otro documento (p.ej., en una subventana); por lo demás sigue siendo independiente.
Por ejemplo, la línea siguiente incluye los contenidos deincluye_me.html en el lugar en que aparece la definiciónOBJECT.
...texto antes...<OBJECT data="incluye_me.html">Atención: no se pudo incluir incluye_me.html.</OBJECT>...texto después...
Recuérdese que los contenidos deOBJECT sólo deben ser representadossi no se puede cargar el fichero especificado por el atributodata.
El comportamiento de un agente de usuario en los casos en que un ficherose incluye a sí mismo queda sin definir.
Los mapas de imágenes permiten a los autores especificar regiones en una imagenu objeto y asignar una acción específica a cada región (p.ej., abrir un documento,ejecutar un programa, etc.). Cuando la región es activada por el usuario, seejecuta la acción.
Un mapa de imágenes se crea asociando un objeto con una especificaciónde las áreas geométricas sensibles del objeto.
Hay dos tipos de mapas de imágenes:
Se prefieren los mapas de imágenes en el cliente quelos mapas de imágenes en el servidor por dos razones: son accesibles a laspersonas que utilizan agentes de usuario no gráficos y permiten saber entodo momento si el apuntador está sobre una región activa o no.
<!ELEMENTMAP - - ((%block;) | AREA)+ -- mapa de imágenes en el lado del cliente --><!ATTLIST MAP%attrs; --%coreattrs,%i18n,%events --nameCDATA #REQUIRED -- como referencia para usemap -- >
Etiqueta inicial:obligatoria, Etiqueta final:obligatoria
<!ELEMENTAREA - O EMPTY -- área de un mapa de imágenes en el cliente--><!ATTLIST AREA%attrs; --%coreattrs,%i18n,%events --shape%Shape; rect -- controla la interpretación de las coords --coords%Coords; #IMPLIED -- lista de longitudes separadas por comas --href%URI; #IMPLIED -- URI del recurso vinculado --nohref (nohref) #IMPLIED -- esta región no tiene acción --alt%Text; #REQUIRED -- descripción corta --tabindexNUMBER #IMPLIED -- posición en el orden de tabulación --accesskey%Character; #IMPLIED -- carácter de la tecla de accesibilidad --onfocus%Script; #IMPLIED -- el foco se dirigió hacia el elemento --onblur%Script; #IMPLIED -- el elemento perdió el foco -- >
Etiqueta inicial:obligatoria, Etiqueta final:prohibida
Definiciones de atributos de MAP
Definiciones de atributos de AREA
Las coordenadas son relativas a la esquina superior izquierda del objeto.Todos los valores sonlongitudes.Todos los valores van separados por comas.
N.T.:Laespecificación no aclara si las coordenadas x,y se miden respecto alcero o al uno, es decir, si las coordenadas de la esquina superior izquierda son(0,0) o (1,1).
Atributo para asociar un mapa de imágenes con un elemento
Atributos definidos en otros lugares
El elementoMAP especifica un mapa de imágenes en el lado del cliente (u otromecanismo de navegación) que puede ser asociado con otros elementos (IMG,OBJECT, oINPUT). Un mapa de imágenes se asociaa un elemento a través del atributousemap del elemento. El elementoMAPpuede ser utilizado sin una imagen asociada por mecanismos generales de navegación.
La presencia del atributo
El modelode contenido del elementoMAPpermite a los autores lo siguiente:
Cuando un elementoMAP contenga contenido mixto (tanto elementosAREAcomo contenido en bloque), los agentes de usuario deberían ignorar loselementosAREA.
Los autores deberían especificar la geometría de un mapa de imágenescompletamente con elementosAREA,o completamente con elementos
Si dos o más regiones se superponen, tieneprioridad la región definida por el elemento que aparece antes en el documento.
Los agentes de usuarioy los autores deberían ofrecer alternativas textuales a losmapas de imágenes gráficos para los casos en que los gráficos no estén disponibleso en que el usuario no pueda acceder a ellos. Por ejemplo, los agentes de usuariopueden usar el textoalt para crear vínculos textuales en lugar de un mapade imágenes gráfico. Estos vínculos pueden ser activados de diferentes maneras(con el teclado, activación por voz, etc.).
Nota.MAP no es compatible con los agentes de usuarioHTML 2.0.
En el ejemplo siguiente, creamos un mapa de imágenes en el lado del clientepara el elementoOBJECT.No queremos representar los contenidos del mapa de imágenes cuando se representeelOBJECT,así que "ocultamos" el elementoMAP dentro del contenido del elementoOBJECT.En consecuencia, los contenidos del elementoMAP sólo serán representados si elOBJECT no puede ser representado.
<HTML> <HEAD> <TITLE>¡El sitio chévere!</TITLE> </HEAD> <BODY> <P><OBJECT data="barranav1.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navegar por este sitio: <A href="guia.html" shape="rect" coords="0,0,118,28">Acceder a la Guía</a> | <A href="atajo.html" shape="rect" coords="118,0,184,28">Ir</A> | <A href="buscar.html" shape="circle" coords="184,200,60">Buscar</A> | <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A> </MAP> </OBJECT> </BODY></HTML>
Podemos querer representar los contenidos del mapa de imágenes inclusosi el agente de usuario puede representar elOBJECT. Por ejemplo, podemosquerer asociar un mapa de imágenes con un elementoOBJECTe incluir una barra de navegación textual en la parteinferior de la página. Para ello, definimos el elementoMAP fuera delOBJECT:
<HTML> <HEAD> <TITLE>¡El sitio chévere!</TITLE> </HEAD> <BODY> <P><OBJECT data="barranav1.gif" type="image/gif" usemap="#map1"> </OBJECT>...aquí el resto de la página... <MAP name="map1"> <P>Navegar por este sitio: <A href="guia.html" shape="rect" coords="0,0,118,28">Acceder a la Guía</a> | <A href="atajo.html" shape="rect" coords="118,0,184,28">Ir</A> | <A href="busca.html" shape="circle" coords="184,200,60">Buscar</A> | <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A> </MAP> </BODY></HTML>
En el siguiente ejemplo, creamos un mapa de imágenes similar, esta vezutilizando el elementoAREA. Obsérvese el uso del textoalt:
<P><OBJECT data="barranav1.gif" type="image/gif" usemap="#map1"> <P>Esto es una barra de navegación. </OBJECT><MAP name="map1"> <AREA href="guia.html" alt="Acceder a la Guía" shape="rect" coords="0,0,118,28"> <AREA href="buscar.html" alt="Buscar" shape="rect" coords="184,0,276,28"> <AREA href="atajo.html" alt="Ir" shape="circle" coords="184,200,60"> <AREA href="top10.html" alt="Top Ten" shape="poly" coords="276,0,276,28,100,200,50,50,276,0"></MAP>
Aquí tenemos una versión similar usando el elementoIMG en lugar deOBJECT(con la misma declaraciónMAP):
<P><IMG src="barranav1.gif" usemap="#map1" alt="barra de navegación">
El siguiente ejemplo ilustra cómo pueden compartirse los mapas de imágenes.
Los elementosOBJECT anidados son útiles para proporcionar "redes de seguridad"en caso de que un agente de usuario no soporte ciertos formatos. Por ejemplo:
<P><OBJECT data="barranav.png" type="image/png"> <OBJECT data="barranav.gif" type="image/gif">texto que describe la imagen... </OBJECT></OBJECT>
Si el agente de usuario no soporta el formato PNG, intenta representar laimagen GIF. Si no soporta GIF (es decir, es un agente de usuario por voz), utilizala descripción textual proporcionada como contenido del elementoOBJECTinterior. Cuando los elementosOBJECT se anidan de esta manera, los autores pueden compartirmapas de imágenes entre ellos:
<P><OBJECT data="barranav.png" type="image/png" usemap="#map1"> <OBJECT data="barranav.gif" type="image/gif" usemap="#map1"> <MAP name="map1"> <P>Navegar por este sitio: <A href="guia.html" shape="rect" coords="0,0,118,28">Acceder a la Guía</a> | <A href="atajo.html" shape="rect" coords="118,0,184,28">Ir</A> | <A href="buscar.html" shape="circle" coords="184,200,60">Buscar</A> | <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A> </MAP> </OBJECT></OBJECT>
El siguiente ejemplo ilustra cómo pueden especificarse elementosA para crearzonas inactivas dentro de un mapa de imágenes. El primer vínculo especificauna pequeña región circular sin vínculo asociado. El segundo vínculo especificauna región circular más grande con el mismo centro. La combinación de ambosdefine un anillo cuyo centro es inactivo y cuya corona es activa. El orden delas definiciones de los vínculos es importante, ya que el círculo menor debeprevalecer sobre el círculo mayor.
<MAP name="map1"><P><A shape="circle" coords="100,200,50">Yo soy inactivo.</A><A href="vinculo-circulo-externo.html" shape="circle" coords="100,200,250">Yo soy activo.</A></MAP>
Análogamente, el atributo
Los mapas de imágenes en el lado del servidorpuede ser interesantes en aquellos casos en que el mapa de imágenes seademasiado complicado para un mapa de imágenes en el lado del cliente.
Sólo es posible definir un mapa de imágenes el lado del servidorpara los elementosIMG eINPUT. En el caso deIMG, elIMG debeestar dentro de un elementoA y debe establecerse el atributo booleano
Cuando el usuario activa el vínculo haciendo clic sobre la imagen,las coordenadas de pantalla se envían directamente al servidor dondese aloja el documento. Las coordenadas de pantalla se expresan como píxelesde pantalla relativos a la imagen. Para información normativa sobre ladefinición de un píxel y cómo escalarlo, consulte[CSS1].
En el siguiente ejemplo, la región activa define un vínculo en ellado del servidor. Así, un clic en cualquier parte de la imagen haráque las coordenadas del clic sean enviadas al servidor.
<P><A href="http://www.acme.com/cgi-bin/competicion"> <IMG src="juego.gif" ismap alt="diana"></A>
El lugardel clic se pasa al servidor como sigue. El agente de usuariocrea un nuevo URI a partir del URI especificado por el atributohref del elementoA, añadiendoun '?' seguido de las coordenadas x e y, separadas por una coma. A continuaciónse sigue el vínculo especificado por el nuevo URI. Por ejemplo, en el ejemplodado, si el usuario hace clic en x=10, y=27, entonces el URI creado es"http://www.acme.com/cgi-bin/competicion?10,27".
Los agentes de usuario que no ofrezcan al usuario medios para especificarunas coordenadas específicas (p.ej., agentes de usuario no gráficos que recibanla entrada por teclado, agentes de usuario por voz, etc.) deberíanenviar las coordenadas "0,0" al servidor cuando se activa el link.
Definiciones de atributos
Si se especifican, los atributoswidth yheight dicen a los agentes de usuario que invaliden el tamañooriginal de la imagen u objeto en favor de estos valores.
Cuando el objeto es una imagen, se escala. Los agentes de usuario deberíanhacer lo posible para escalar el objeto o imagen de modo que se respeten laanchura y altura especificadas por el autor. Obsérvese que las longitudesexpresadas como porcentajes se basan el espacio horizontal o verticaldisponible actualmente, no en el tamaño original de la imagen, objeto oaplicación.
Los atributosheight ywidth dan a los agentes de usuariouna idea del tamaño de una imagen u objeto para que puedan reservar espacio paraellos y continuar la representación del documento mientras esperan a los datosde la imagen.
Definiciones de atributos
Una imagen u objeto puede estar rodeada de un borde (p.ej., cuando seespecifica un borde por el usuario o cuando la imagen es el contenido de unelementoA).
Definiciones de atributos
Definiciones de atributos
Los siguientes valores dealign se refieren a la posición delobjeto con respecto al texto que le rodea:
Hay otros dos valores,left yright, que hacen que laimagen "flote" hacia el margen izquierdo o derecho actual. Se habla sobre ellosen la sección sobreobjetos flotantes.
Diferentes interpretaciones de align. Los agentes de usuariopueden interpretar de manera diferente el atributoalign. Algunos sólo tienen en cuentalo que haya ocurrido en la línea antes del elemento, algunos tienen en cuenta eltexto que hay a ambos lados del elemento.
Definiciones de atributos
Varios elementos no textuales (IMG,AREA,APPLET eINPUT) permiten a los autoresespecificar texto alternativo que sirva como contenido cuando el elementono pueda ser representado normalmente. El especificar texto alternativoayuda a los usuarios que no tengan terminales gráficas, a los usuarios cuyosnavegadores no soporten formularios, a los usuarios con discapacidades visuales,a aquellos que utilicen sintetizadores de voz, a aquellos que hayan configuradosus agentes de usuario para no mostrar imágenes, etc.
El atributoalt debe especificarse para los elementosIMG yAREA. Es opcional para los elementosINPUT y
Si bien el texto alternativo puede ser muy útil, hay que tratarlo con cuidado.Los autores deberían seguir las siguientes pautas:
Los implementadores deberían consultar la sección sobreaccessibilidad para información sobrecómo tratar los casos en que se omite el texto alternativo.