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.
Tabla de contenidos
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
.
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").
<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
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>
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.