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 la versión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozo@conclase.net. Gracias por su colaboración.
Véase el Aviso de copyright de la traducción.
Contenidos
Las características multimedia de HTML permiten a los autores incluir en sus páginas imágenes, aplicaciones (programas que se descargan automáticamente y se ejecutan en la máquina del usuario), videoclips, y otros documentos HTML en sus páginas.
Por ejemplo, para incluir una imagen PNG en un documento, los autores pueden escribir:
<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 IMG) y aplicaciones (por medio de APPLET). Estos elementos tienen varias limitaciones:
Para solucionar estos problemas, HTML 4 introduce el elemento OBJECT, que ofrece una solución universal para la inclusión de objetos genéricos. El elemento OBJECT permite a los autores HTML especificar todo lo que necesita un agente de usuario para la representación de un objeto: código fuente, valores iniciales, 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 los documentos HTML; otros términos usados habitualmente son: applets, plug-ins, controladores de medios, etc.
El nuevo elemento OBJECT asume así algunas de las tareas realizadas por los elementos 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ífica y una general. El elemento genérico OBJECT servirá como solución de implementación de los tipos de medios futuros.
Para incluir imágenes, los autores pueden usar el elemento OBJECT o el elemento IMG.
Para incluir aplicaciones, los autores deberían usar el elemento OBJECT ya que el elemento APPLET está desaprobado.
Para incluir un documento HTML en otros, los autores pueden usar o bien el nuevo elemento IFRAME o bien el elemento OBJECT. En ambos casos, el documento incluido sigue siendo independiente del documento principal. Los agentes de usuario visuales pueden presentar el documento incluido en una ventana diferenciada del documento principal. Consulte las notas sobre documentos incluidos para una comparación entre OBJECT e IFRAME en lo que a inclusión de documentos se refiere.
Las imágenes y otros objetos incluidos pueden tener hipervínculos asociados a ellos, tanto a través de los mecanismos de vinculación estándar, como también a través de mapas de imágenes. Un mapa de imágenes especifica las regiones geométricas activas de un objeto incluido, y asigna un vínculo a cada región. Cuando se activan, estos vínculos pueden hacer que se abra un documento, que se ejecute un programa en el servidor, etc.
En las secciones siguientes, hablamos sobre los distintos mecanismos que están a disposición de los autores para inclusiones multimedia y para crear mapas 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 --> <!ELEMENT IMG - 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) -- name CDATA #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 elemento IMG incluye una imagen en el documento actual en la posición de la definición del elemento. El elemento IMG no tiene contenido; normalmente se reemplaza en línea por la imagen designada por el atributo src, con la única excepción de las imágenes alineadas a la izquierda o a la 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 elemento OBJECT como 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 atributo alt especifica un texto alternativo que se representa cuando la imagen no puede ser mostrada (ver abajo para más información sobre cómo especificar texto alternativo). Los agentes de usuario deben representar el texto alternativo cuando no puedan soportar imágenes, cuando no puedan soportar un tipo de imágenes, o cuando estén configurados para no mostrar imágenes.
El siguiente ejemplo muestra cómo puede utilizarse el atributo longdesc para una descripción más rica:
<BODY>
<P>
<IMG src="mapadelsitio.gif"
alt="Mapa del Sitio de Laboratorios HP"
longdesc="mapadelsitio.html">
</BODY>
El atributo alt proporciona una descripción corta de la imagen. Esta información debería ser suficiente como para que los usuarios puedan decidir si quieren seguir el vínculo dado por el atributo longdesc hacia la descripción más larga, en este caso "mapadelsitio.html".
Consulte la sección sobre la presentación visual de objetos, imágenes y aplicaciones para información sobre tamaño de la imagen, alineación y bordes.
<!ELEMENT OBJECT - - (PARAM | %flow;)* -- objeto genérico inlcuido --> <!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 -- archive CDATA #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 -- name CDATA #IMPLIED -- enviar como parte de un formulario -- tabindex NUMBER #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 mecanismos integrados para representar tipos de datos comunes como texto, imágenes GIF, colores, fuentes, y un puñado de elementos gráficos. Para representar tipos de datos para los cuales no tienen soporte nativo, los agentes de usuario suelen ejecutar aplicaciones externas. El elemento OBJECT permite a los autores controlar si los datos deberían ser representados externamente por algún programa, especificado por 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 especificar tres tipos de información:
El elemento OBJECT permite a los autores especificar estos tres tipos de datos, pero los autores no tienen que especificar necesariamente los tres a la vez. Por ejemplo, algunos objetos pueden no necesitar datos (p.ej., una aplicación autónoma que realice una pequeña animación). Otros pueden no necesitar una inicialización en tiempo de ejecución. Y otros pueden no necesitar información adicional sobre la implementación, es decir, el propio agente de usuario puede ya saber cómo representar ese tipo de datos (p.ej., imágenes GIF).
Los autores especifican la implementación de un objeto y la localización de los datos a representar por medio del objeto OBJECT. Sin embargo, para especificar valores en tiempo de ejecución, los autores usan el elemento PARAM, del cual se habla en la sección sobre inicialización de objetos.
El elemento OBJECT también puede aparecer en el contenido del elemento HEAD. Ya que los agentes de usuario en general no representan los elementos del HEAD, los autores deberían asegurarse de que los elementos OBJECT en el HEAD no especifiquen contenido que pueda ser representado. Consulte la sección sobre compartir datos de un marco para un ejemplo de inclusión del elemento OBJECT en el elemento HEAD.
Consulte la sección sobre controles de formulario para información sobre elementos OBJECT en formularios.
Este documento no especifica el comportamiento de elementos OBJECT que usen tanto el atributo classid para identificar una implementación como el atributo data para especificar los datos para esa implementación. Para asegurar la portabilidad, los autores deberían usar el elemento PARAM para decir a las implementaciones dónde obtener los datos adicionales.
Un agente de usuario debe interpretar un elemento OBJECT de acuerdo con las siguientes reglas de precedencia:
Los autores no deberían incluir contenido en los elementos OBJECT que aparezcan en el elemento HEAD.
En el siguiente ejemplo, insertamos una aplicación de reloj analógico en un documento por medio del elemento OBJECT. La aplicación, escrita en el lenguaje Python, no necesita datos adicionales ni valores en tiempo de ejecución. El atributo classid especifica 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 usuario represente esta declaración OBJECT. Es posible retrasar la representación del objeto declarando el objeto en primer lugar (según se describe más abajo).
Los autores deberían completar esta declaración con un texto alternativo como contenido de OBJECT 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ño del elemento OBJECT es que ofrece un mecanismo para especificar representaciones alternativas del objeto; cada declaración OBJECT anidada puede especificar tipos de contenido alternativos. Si un agente de usuario no puede representar el primer OBJECT, intenta representar los contenidos, que a su vez pueden ser otro elemento OBJECT, etc.
En el siguiente ejemplo, anidamos varias declaraciones OBJECT para ilustrar el funcionamiento de las representaciones alternativas. Un agente de usuario intentará representar el primer elemento OBJECT que pueda, en el orden siguiente: (1) una aplicación LaTierra escrita en el lenguaje Python, (2) una animación MPEG de 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 necesita datos ni valores iniciales. La segunda declaración especifica una animación MPEG, y como no define la localización de ninguna implementación que procese MPEG, depende de que el agente de usuario represente la animación. También establecemos el atributo type para que los agentes de usuario que 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 GIF y proporciona un texto alternativo por si todos los mecanismos anteriores fallaran.
Datos en línea frente a datos externos. Los datos a representar pueden proporcionarse de dos maneras: en línea y desde un recurso externo. Si bien el primer método resultará generalmente en una representación má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 elemento OBJECT datos en línea:
<P>
<OBJECT id="reloj1"
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="data:application/x-oleobject;base64, ...datos en base64...">
Un reloj.
</OBJECT>
Consulte la sección sobre la representación visual de objetos, imágenes y aplicaciones para información sobre tamaño de objetos, alineación y bordes.
<!ELEMENT PARAM - O EMPTY -- valor de propiedad con nombre --> <!ATTLIST PARAM id ID #IMPLIED -- identificador único a nivel de documento -- name CDATA #REQUIRED -- nombre de la propiedad -- value CDATA #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 elementos PARAM especifican un conjunto de valores que pueden ser necesarios para un objeto en tiempo de ejecución. Puede aparecer cualquier número de elementos PARAM en el contenido de un elemento OBJECT o APPLET, y en cualquier orden, pero deben ser colocados al principio del contenido del elemento OBJECT o APPLET que los contienen.
Se supone que la sintaxis de nombres y valores es entendida por la implementación del objeto. Este documento no especifica cómo deberían obtener los agentes de usuario los pares nombre/valor ni cómo deberían interpretar los nombres de parámetros que aparezcan dos veces.
Volvemos al ejemplo del reloj para ilustrar la utilización de PARAM: supongamos que la aplicación es capaz de manejar dos parámetros de ejecución que definen su altura y anchura iniciales. Podemos establecer las dimensiones iniciales en 40x40 píxeles con dos elementos PARAM.
<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 para el parámetro "Valores_inic" del objeto como recurso externo (un fichero GIF). El valor del atributo valuetype se establece por tanto a "ref" y value 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 atributo standby de modo que el agente de usuario pueda mostrar un mensaje mientras se carga el mecanismo de representación.
Cuando representen un elemento OBJECT, los agentes de usuario sólo deben buscar el contenido de aquellos elementos PARAM que sean hijos directos y dárselos al OBJECT.
Así, en el ejemplo siguiente, si se representa "obj1", "param1" se aplica a "obj1" (y no a "obj2"). Si "obj1" no se representa y "obj2" sí, "param1" no se tiene en cuenta, y "param2" se aplica a "obj2". Si ninguno de los OBJECT se representa, ninguno de los PARAM se aplica.
<P>
<OBJECT id="obj1">
<PARAM name="param1">
<OBJECT id="obj2">
<PARAM name="param2">
</OBJECT>
</OBJECT>
La localización de la implementación de un objeto viene dada por un URI. Como vimos en la introducción a los URIs, el primer segmento de un URI absoluto especifica el esquema de nombres usado para transferir los datos designados por el URI. Para documentos HTML, este esquema es normalmente "http". Algunas aplicaciones podrían usar otros esquemas de nombres. Por ejemplo, cuando se especifica una aplicación Java, los autores 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 codetype, un agente de usuario puede decidir si obtener la aplicación Java según su capacidad de hacerlo.
<OBJECT codetype="application/java-archive"
classid="java:program.start">
</OBJECT>
Algunos esquemas de representación necesitan información adicional para identificar su implementación, y hay que decirles dónde encontrar esa información. Los autores pueden dar la información de la ruta de acceso a la implementación del objeto a través del atributo codebase.
<OBJECT codetype="application/java-archive"
classid="java:program.start">
codebase="http://bla.bla.com/java/miimplementacion/"
</OBJECT>
El siguiente ejemplo especifica (con el atributo classid) un objeto ActiveX a través de un URI que comienza con el esquema de nombres "clsid". El atributo data 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 lea el agente de usuario, se establece el atributo booleano declare del elemento OBJECT. Al mismo tiempo, los autores deben identificar la declaración estableciendo el atributo id del elemento OBJECT en un valor único. Las creaciones posteriores del objeto se referirán a este identificador.
Un OBJECT declarado debe aparecer en un documento antes de la primera creación de ese OBJECT.
Se crea un objeto definido con el atributo declare cada vez que un elemento que se refiera a ese objeto necesite que sea representado (p.ej., se activa un vínculo que se refiere a él, se activa un objeto que se refiere a él, etc.).
En el siguiente ejemplo, declaramos un OBJECT y hacemos que se cree haciendo referencia a él desde un vínculo. Así, el objeto puede activarse haciendo clic en un texto resaltado, por ejemplo.
<P><OBJECT declare
id="tierra.declaracion"
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ón que son otros objetos. En este ejemplo, enviamos texto (concretamente un poema) a un hipotético mecanismo para ver poemas. El objeto reconoce un parámetro llamado "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 que no representa) el objeto fuente. La relación entre el objeto fuente y el objeto visor de poemas se consigue (1) asignando el id "tribuna" a la declaración del objeto y (2) refiriéndose a él desde el elemento PARAM del objeto visor de poemas (con valuetype y value).
<P><OBJECT declare
id="tribuna"
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 atributo declare deben representar los contenidos de la declaración OBJECT.
Ver el DTD Transicional para la definición formal.
Definiciones de atributos
Cuando el applet es "deserializado", se invoca el método
Deben estar presentes o bien code o bien object. Si se dan tanto code como object y proporcionan nombres de clases diferentes, se produce un error.
Atributos definidos en otros lugares
Este elemento, admitido por todos los browsers con soporte Java, permite a los diseñadores incluir un applet Java en un documento HTML. Ha sido desaprobado en favor del elemento OBJECT.
El contenido de APPLET actúa como información alternativa para agentes de usuario que no soporten este elemento o que estén configurados para no soportar applets. En cualquier otro caso los agentes de usuario deben ignorar el contenido.
EJEMPLO DESAPROBADO:
En el siguiente ejemplo, el elemento APPLET incluye un applet Java en el documento.
Al no haberse suministrado un codebase, se supone que el applet
está 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 con OBJECT 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 elemento PARAM.
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 con OBJECT:
<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 independiente del documento en el cual se incluye. Por ejemplo, los URIs relativos del documento incluido se completan de 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 de incluye_me.html en el lugar en que aparece la definición OBJECT.
...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 de OBJECT sólo deben ser representados si no se puede cargar el fichero especificado por el atributo data.
El comportamiento de un agente de usuario en los casos en que un fichero se incluye a sí mismo queda sin definir.
Los mapas de imágenes permiten a los autores especificar regiones en una imagen u 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, se ejecuta la acción.
Un mapa de imágenes se crea asociando un objeto con una especificación de 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 que los mapas de imágenes en el servidor por dos razones: son accesibles a las personas que utilizan agentes de usuario no gráficos y permiten saber en todo momento si el apuntador está sobre una región activa o no.
<!ELEMENT MAP - - ((%block;) | AREA)+ -- mapa de imágenes en el lado del cliente --> <!ATTLIST MAP %attrs; -- %coreattrs, %i18n, %events -- name CDATA #REQUIRED -- como referencia para usemap -- >
Etiqueta inicial: obligatoria, Etiqueta final: obligatoria
<!ELEMENT AREA - 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 -- tabindex NUMBER #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 son longitudes. Todos los valores van separados por comas.
N.T.: La especificación no aclara si las coordenadas x,y se miden respecto al cero 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 elemento MAP especifica un mapa de imágenes en el lado del cliente (u otro mecanismo de navegación) que puede ser asociado con otros elementos (IMG, OBJECT, o INPUT). Un mapa de imágenes se asocia a un elemento a través del atributo usemap del elemento. El elemento MAP puede ser utilizado sin una imagen asociada por mecanismos generales de navegación.
La presencia del atributo usemap en un elemento OBJECT implica que el objeto que incluye es una imagen. Además, cuando el elemento OBJECT tenga asociado un mapa de imágenes en el lado del cliente, los agentes de usuario pueden permitir la interacción del usuario con el elemento OBJECT sólo en lo que se refiere al mapa de imágenes en el lado del cliente. Esto permite a los agentes de usuario (tales como un navegador de audio o un robot) interactuar con el OBJECT sin tener que procesarlo; el agente de usuario puede incluso optar por no obtener (o procesar) el objeto. Cuando un OBJECT tenga asociado un mapa de imágenes, los autores no deberían esperar que el objeto sea obtenido o procesado por todos los agentes de usuario.
El modelo de contenido del elemento MAP permite a los autores lo siguiente:
Cuando un elemento MAP contenga contenido mixto (tanto elementos AREA como contenido en bloque), los agentes de usuario deberían ignorar los elementos AREA.
Los autores deberían especificar la geometría de un mapa de imágenes completamente con elementos AREA, o completamente con elementos A, o completamente con ambos si el contenido es mixto. Los autores pueden querer usar contenido mixto para que los agentes de usuario antiguos utilicen la geometría del mapa especificada por los elementos AREA y que los agentes de usuario modernos saquen partido de la riqueza del contenido en bloque.
Si dos o más regiones se superponen, tiene prioridad la región definida por el elemento que aparece antes en el documento.
Los agentes de usuario y los autores deberían ofrecer alternativas textuales a los mapas de imágenes gráficos para los casos en que los gráficos no estén disponibles o en que el usuario no pueda acceder a ellos. Por ejemplo, los agentes de usuario pueden usar el texto alt para crear vínculos textuales en lugar de un mapa de 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 usuario HTML 2.0.
En el ejemplo siguiente, creamos un mapa de imágenes en el lado del cliente para el elemento OBJECT. No queremos representar los contenidos del mapa de imágenes cuando se represente el OBJECT, así que "ocultamos" el elemento MAP dentro del contenido del elemento OBJECT. En consecuencia, los contenidos del elemento MAP sólo serán representados si el OBJECT 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 incluso si el agente de usuario puede representar el OBJECT. Por ejemplo, podemos querer asociar un mapa de imágenes con un elemento OBJECT e incluir una barra de navegación textual en la parte inferior de la página. Para ello, definimos el elemento MAP fuera del OBJECT:
<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 vez utilizando el elemento AREA. Obsérvese el uso del texto alt:
<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 elemento IMG en lugar de OBJECT (con la misma declaración MAP):
<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 elementos OBJECT 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 la imagen GIF. Si no soporta GIF (es decir, es un agente de usuario por voz), utiliza la descripción textual proporcionada como contenido del elemento OBJECT interior. Cuando los elementos OBJECT se anidan de esta manera, los autores pueden compartir mapas 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 elementos A para crear zonas inactivas dentro de un mapa de imágenes. El primer vínculo especifica una pequeña región circular sin vínculo asociado. El segundo vínculo especifica una región circular más grande con el mismo centro. La combinación de ambos define un anillo cuyo centro es inactivo y cuya corona es activa. El orden de las definiciones de los vínculos es importante, ya que el círculo menor debe prevalecer 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 nohref del elemento AREA declara que una región geométrica no tiene un vínculo asociado.
Los mapas de imágenes en el lado del servidor puede ser interesantes en aquellos casos en que el mapa de imágenes sea demasiado 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 servidor para los elementos IMG e INPUT. En el caso de IMG, el IMG debe estar dentro de un elemento A y debe establecerse el atributo booleano ismap ([CI]). En el caso de INPUT, el INPUT debe ser del tipo "image".
Cuando el usuario activa el vínculo haciendo clic sobre la imagen, las coordenadas de pantalla se envían directamente al servidor donde se aloja el documento. Las coordenadas de pantalla se expresan como píxeles de pantalla relativos a la imagen. Para información normativa sobre la definición de un píxel y cómo escalarlo, consulte [CSS1].
En el siguiente ejemplo, la región activa define un vínculo en el lado 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 lugar del clic se pasa al servidor como sigue. El agente de usuario crea un nuevo URI a partir del URI especificado por el atributo href del elemento A, añadiendo un '?' seguido de las coordenadas x e y, separadas por una coma. A continuación se sigue el vínculo especificado por el nuevo URI. Por ejemplo, en el ejemplo dado, 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 especificar unas coordenadas específicas (p.ej., agentes de usuario no gráficos que reciban la entrada por teclado, agentes de usuario por voz, etc.) deberían enviar las coordenadas "0,0" al servidor cuando se activa el link.
Definiciones de atributos
Si se especifican, los atributos width y height dicen a los agentes de usuario que invaliden el tamaño original de la imagen u objeto en favor de estos valores.
Cuando el objeto es una imagen, se escala. Los agentes de usuario deberían hacer lo posible para escalar el objeto o imagen de modo que se respeten la anchura y altura especificadas por el autor. Obsérvese que las longitudes expresadas como porcentajes se basan el espacio horizontal o vertical disponible actualmente, no en el tamaño original de la imagen, objeto o aplicación.
Los atributos height y width dan a los agentes de usuario una idea del tamaño de una imagen u objeto para que puedan reservar espacio para ellos y continuar la representación del documento mientras esperan a los datos de la imagen.
Definiciones de atributos
Una imagen u objeto puede estar rodeada de un borde (p.ej., cuando se especifica un borde por el usuario o cuando la imagen es el contenido de un elemento A).
Definiciones de atributos
Definiciones de atributos
Los siguientes valores de align se refieren a la posición del objeto con respecto al texto que le rodea:
Hay otros dos valores, left y right, que hacen que la imagen "flote" hacia el margen izquierdo o derecho actual. Se habla sobre ellos en la sección sobre objetos flotantes.
Diferentes interpretaciones de align. Los agentes de usuario pueden interpretar de manera diferente el atributo align. Algunos sólo tienen en cuenta lo que haya ocurrido en la línea antes del elemento, algunos tienen en cuenta el texto que hay a ambos lados del elemento.
Definiciones de atributos
Varios elementos no textuales (IMG, AREA, APPLET e INPUT) permiten a los autores especificar texto alternativo que sirva como contenido cuando el elemento no pueda ser representado normalmente. El especificar texto alternativo ayuda a los usuarios que no tengan terminales gráficas, a los usuarios cuyos navegadores no soporten formularios, a los usuarios con discapacidades visuales, a aquellos que utilicen sintetizadores de voz, a aquellos que hayan configurado sus agentes de usuario para no mostrar imágenes, etc.
El atributo alt debe especificarse para los elementos IMG y AREA. Es opcional para los elementos INPUT y APPLET.
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 sobre accessibilidad para información sobre cómo tratar los casos en que se omite el texto alternativo.