Elemento object

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento object representa contenido externo, que puede ser una imagen, un documento (contexto de navegación anidado) o un recurso cargado por un plugin. Cada una de estas implementaciones tiene un método alternativo que es, respectivamente, el elemento img, el elemento iframe y, con el arrivo de HTML5, el elemento embed.

Los atributos classid, codebase, codetype, archive, declare, standby, align, border, hspace y vspace, anteriormente válidos, se han vuelto obsoletos en HTML5.

Una implementación válida del elemento object debe tener al menos uno de los dos atributos data y type.

Ejemplos

Uno de los usos principales de este elemento es la inclusión de películas Flash dentro de un documento. En este ejemplo insertaremos una película Flash interactiva con object, mientras que proveeremos algunos parámetros para el plugin con param. En este caso, los parámetros son: la película que se requiere cargar ("movie"), la calidad que se debería usar para reproducirla ("quality") y cómo debería rellenarse su fondo ("wmode").

La representación apropiada de este ejemplo depende exclusivamente de la disponibilidad del plugin requerido en el navegador del visitante. Esta es una desventaja del contenido incrustado, ya que los plugins no son siempre globalmente soportados.

<p>Apenas puedo ver. ¿Podrías prender la luz por favor?</p>
<object data="/assets/flash/light-bulb.swf" type="application/x-shockwave-flash" width="180" height="350">
  <param name="movie" value="/assets/flash/light-bulb.swf" />
  <param name="quality" value="high"/>
  <param name="wmode" value="transparent"/>
</object>

Apenas puedo ver. ¿Podrías prender la luz por favor?

Nota que, dado que las películas Flash insertadas con el elemento object no son consistentemente soportadas por los navegadores, algunas declaraciones pueden no funcionar globalmente aún cuando el elemento y el plugin son soportados. La declaración utilizada en el ejemplo anterior, con los atributos data y type, y el elemento param indicando la ubicación del recurso ("movie"), es considerado el enfoque más compatible que funciona como se espera en todos los navegadores con soporte.

En el segundo ejemplo, exploraremos otra faceta del elemento object, al insertar un documento y crear un nuevo contexto de navegación. Nota cómo estaremos dando un nombre (name) a este object, de modo que más tarde podamos usarlo, por ejemplo, para hacer que los vínculos se abran dentro de este contexto de navegación, al especificar este nombre en el atributo target del vínculo.

Aquí estaremos incrustando un documento, preparado específicamente para este ejemplo, mediante el atributo data. Verás como el navegador aplica una altura predeterminada y provee convenientemente las barras de desplazamiento para acceder al contenido que se encuentra fuera del área de visualización. Asimismo, usaremos CSS para hacer que el elemento abarque todo el espacio horizontal disponible, con la finalidad de mejorar la presentación. Si no se aplicara ningún estilo, el elemento tendría un ancho fijo predeterminado.

<h1>Detectando metales como un maestro</h1>
<p>No ha existido nunca un detector de metales que no haya hecho su trabajo según las reglas, de modo que el primer paso que debes dar es leer la "Especificación del detector de metales". Para tu comodidad, hemos agregado una versión en vivo de la especificación en este documento. Disfrútala!</p>
<object data="object-example-1.html" style="width: 100%"></object>

Detectando metales como un maestro

No ha existido nunca un detector de metales que no haya hecho su trabajo según las reglas, de modo que el primer paso que debes dar es leer la "Especificación del detector de metales". Para tu comodidad, hemos agregado una versión en vivo de la especificación en este documento. Disfrútala!

Por último, incrustaremos una imagen. Por motivos de presentación, haremos que la imagen flote a la derecha del texto con CSS.

Nota que, cuando se utiliza para incrustar imágenes, el elemento object puede proveer una versión alternativa textual del contenido/propósito de la imagen en su contenido. Este contenido sería mostrado por aquellos navegadores que no soporten al elemento, pero permanecería oculto cuando el elemento pueda ser procesado correctamente.

<h1>Johannes Kepler</h1>
<object data="/assets/images/johannes-kepler.jpg" style="float: right; margin: 0 0 1em 2em">Retrato de Johannes Kepler</object>
<p>Johannes Kepler, figura clave en la revolución científica, astrónomo y matemático alemán; conocido fundamentalmente por sus leyes sobre el movimiento de los planetas en su órbita alrededor del Sol. Fue colaborador de Tycho Brahe, a quien sustituyó como matemático imperial de Rodolfo II.</p>
<p>De profundas creencias religiosas, le costó llegar a la conclusión de que la tierra era un planeta imperfecto, asolado por las guerras. En esa misma misiva incluyó la cita clave: "Si los planetas son lugares imperfectos, ¿por qué no han de serlo las órbitas de las mismas?". Finalmente utilizó la fórmula de la elipse, una rara figura descrita por Apolonio de Pérgamo en una de las obras salvadas de la destrucción de la biblioteca de Alejandría. Descubrió que encajaba perfectamente en las mediciones de Tycho....</p>

Johannes Kepler

Retrato de Johannes Kepler

Johannes Kepler, figura clave en la revolución científica, astrónomo y matemático alemán; conocido fundamentalmente por sus leyes sobre el movimiento de los planetas en su órbita alrededor del Sol. Fue colaborador de Tycho Brahe, a quien sustituyó como matemático imperial de Rodolfo II.

De profundas creencias religiosas, le costó llegar a la conclusión de que la tierra era un planeta imperfecto, asolado por las guerras. En esa misma misiva incluyó la cita clave: "Si los planetas son lugares imperfectos, ¿por qué no han de serlo las órbitas de las mismas?". Finalmente utilizó la fórmula de la elipse, una rara figura descrita por Apolonio de Pérgamo en una de las obras salvadas de la destrucción de la biblioteca de Alejandría. Descubrió que encajaba perfectamente en las mediciones de Tycho....

Atributos

Atributos específicos

data

El URI del recurso que será incrustado por este elemento. Podría apuntar a una imagen, un documento o un recurso que requiere de un plugin para ser ejecutado.

Este atributo es obligatorio si el atributo itemprop está presente en el elemento object, ya que se utiliza para determinar el valor de la propiedad.

Ejemplo

<object data="extension.html"></object>

type

El tipo de contnido (o Tipo de medio de Internet) del recurso especificado en el atributo data.

Ejemplo

<object data="rock-n-roll.mid" type="audio/mid"></object>

name

Un nombre, si es aplicable, para el contexto de navegación anidado definido por este elemento. El nombre provisto por este atributo puede ser usado por otros elementos (como a, area o form) con el fin de especifcar el contexto de navegación donde las acciones del elemento serán ejecutadas.

La presencia de este atributo no tiene sentido si el recurso especificado en el atributo data no es un documento, ya que ese es el único caso en que object crea un contexto de navegación anidado.

Este atributo ha sido desaprobado en versiones previas de HTML en favor del atributo id. HTML5 lo ha restituido con el fin de que provea un nombre para los contextos de navegación anidados, un enfoque diferente al adoptado por id.

Ejemplo

<iframe src="http://www.otrositio.com/acerca.html" name="contexto1"></iframe>

form

Una cadena coincidente con el atributo id del formulario con el que este control debería estar asociado. Este atributo se vuelve importante cuando los autores necesitas contrarrestar la falta de soporte para elementos de formulario (form) anidados.

width

Un número de píxeles que indica el ancho del elemento. Si este atributo es omitido, se usará un valor por defecto.

Ejemplo

<object data="commercial.swf" width="640" height="480"></object>

height

Un número de píxeles que indica la altura del elemento. Si este atributo es omitido, se usará un valor por defecto.

Ejemplo

<object data="menu.swf" width="500" height="150"></object>

usemap

Una referencia de nombre al mapa (map) al que esta imagen está asociada. Esta referencia debe estar compuesta por un signo numeral ("#") y una cadena que coincida con el valor del atributo name en el elemento map asociado.

La presencia de este atributo no tiene sentido si el recurso especificado en el atributo data no es una imagen.

Este atributo se ha vuelto obsoleto en HTML5 por la falta de implementación por parte de los navegadores.

Ejemplo

<map name="image-map-1">
  <area href="../../tutorials.html" alt="Tutoriales HTML" shape="circle" coords="67,73,47">
  <area href="../../tutorials.html" alt="Tutoriales HTML" shape="rect" coords="82,78,156,99">
</map>
<obejct data="/assets/images/image-map-1-es.png" usemap="#image-map-1">Mapa de imagen de ejemplo</object>
Tutoriales HTML Tutoriales HTML Mapa de imagen de ejemplo

typemustmatch

Un valor booleano que indica si el recurso debería incrustarse sólo cuando el valor del atributo type y el tipo de contenido del recurso especificado en el atributo data concuerdan. Si el atributo tiene los valores "typemustmatch" o la cadena vacía ("") o si simplemente está presente, el plugin no debería ser ejecutado a menos que los tipos coincidan.

Este atributo provee una medida extra de seguridad que ayuda a los administradores de los sitios cuando incrustan contenido externo o no confiable.

Este atributo requiere que ambos atributos, data y type, estén presentes. Declararlo sin alguno de los otros dos haría que el documento sea inválido.

Este atributo se ha vuelto obsoleto en HTML5 por la falta de implementación y por provocar riesgos de seguridad en peticiones cross-origin.

Ejemplo

<object data="rock-n-roll.mid" type="audio/mid" typemustmatch></object>

codebase

Un URI usado como punto de partida para resolver URIs relativos en los atributos classid, data y archive. El valor por defecto es el URI base del documento.

Este atributo se ha vuelto obsoleto en HTML5 por ser innecesario luego de la remoción de otros atributos. Los autores deberían usar URIs completas en el atributo data.

Ejemplo

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0"></object>

codetype

El tipo de contenido (o Tipo de medio de Internet) del objeto declarado en el atributo classid. Cuando está ausente, toma el valor del atributo type.

Este atributo se ha vuelto obsoleto en HTML5 y su uso ya no es válido. Los autores debería abandonar su uso.

Ejemplo

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" codetype="application/x-shockwave-flash"></object>

classid

Un valor que representa al identificador de clase de un objeto.

Este atributo ha sido eliminado en HTML5 y su uso ya no es válido. Los autores deberían reemplazar su funcionalidad con el atributo data.

Ejemplo

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0"></object>

archive

Una lista de recursos, separados por espacios, útiles para el objeto, que puede incluir los recursos declarados en los atributos classid y data. Puede ser usado para precargar recursos, y por lo tanto reducir los tiempos de carga.

Este atributo ha sido removido del estándar con la llegada de HTML5. Su uso ya no es recomendado.

Ejemplo

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" archive="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"></object>

standby

Una línea de texto para ser mostrada mientras el objeto se está cargando.

Este atributo se ha vuelto obsoleto en HTML5 y su uso es ahora inválido. Los autores deberían abandonar su uso.

Ejemplo

<object data="sonidos.mid" standby="Cargando música..."></object>

declare

Un valor booleano que indica si el objeto debería ser considerado solamente como una declaración. Si está presente, este objeto debe ser instanciado por otro object que establezca una referencia a él.

Este atributo se ha vuelto obsoleto desde la llegada de HTML5. Su presencia en un documento lo convertiría en inválido.

Ejemplo

<object data="pelicula.swf" declare></object>

align

La posición del elemento con respecto a los contenidos circundantes. Existen cinco valores posibles, insensibles a mayúsculas/minúsculas:

  • top: el borde superior del elemento se alinea verticalmente con la línea base.
  • middle: el elemento es centrado verticalmente con respecto a la línea base.
  • bottom: el borde superior del elemento se alinea verticalmente con la línea base. Este es el valor por defecto.
  • left: el elemento flota hacia la margen izquierda.
  • right: el elemento flota hacia la margen derecha.

Este atributo se ha vuelto obsoleto en HTML5 debido a su naturaleza visual. Sus efectos deberían ser reemplazados con hojas de estilo.

Ejemplo

<object data="calendario.swf" align="right"></object>

border

Un número de píxeles que especifica el ancho del borde con el que será presentado el elemento.

Este atributo se ha vuelto obsoleto en HTML5 por ser meramente visual. Los autores deberían reemplazarlo con hojas de estilo.

Ejemplo

<object data="../logo-grande.gif" border="3"></object>

hspace

Un número de píxeles que indica la cantidad de espacio vacío que se dejará a las márgenes izquierda y derecha del elemento.

Este atributo se ha vuelto inválido en HTML5 por tener propósitos visuales únicamente. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<object data="foto.jpg" hspace="50"></object>

vspace

Un número de píxeles que indica la cantidad de espacio vacío que se dejará a las márgenes superior e inferior del elemento.

Este atributo se ha vuelto inválido en HTML5 por tener propósitos visuales únicamente. Los autores deberían reemplazarlo con declaraciones de hojas de estilo.

Ejemplo

<object data="reloj.swf" vspace="15"></object>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.