Ir directamente al contenido de esta página

codexexempla.org

Elementos de objetos

Tabla de contenidos

  1. area
  2. img
  3. map
  4. object
  5. param

area

Descripción
Especifica una zona activa dentro de un mapa de imagen.
Atributos
  • accesskey: Un caracter que sirve como tecla de acceso rápido.
  • alt [obligatorio]: Un texto plano alternativo que cumpla la misma función que el área de imagen seleccionada.
  • class: Uno o más identificadores de clase.
  • coords: Su valor depende del seleccionado para el atributo shape:
    • Si shape="rect", se especifican cuatro longitudes separados por comas, que corresponden —en orden, y midiendo desde el punto 0,0 de la imagen sobre la que se traza el mapa— al punto sobre el eje x situado más a la izquierda, el punto sobre el eje y situado más arriba, el punto sobre el eje x situado más a la derecha y el punto sobre el eje y situado más abajo:

      Ilustración del párrafo anterior

      Según la ilustración, el orden de los valores sería x1,y1,x2,y2.

    • Si shape="circle", se definen tres valores, los valores x e y del centro y el radio:

      Ilustración del párrafo anterior

      Según la ilustración, el orden de los valores sería x,y,r.

    • Si shape="poly", se definen pares de valores x e y que especifican cada vértice del polígono; el último par debe ser el mismo que el primero, para indicar al agente de usuario el cierre de la forma:

      Ilustración del párrafo anterior

      Según la ilustración, el orden de los valores sería x1,y1,x2,y2,x3,y3,x4,y4,x5,y5,x6,y6,x1,y1.

  • dir: Un sentido de lectura.
  • href: El URL del recurso al que hipervincula el área de la imagen.
  • id: Un identificador.
  • nohref: nohref [obligatorio]. Indica que el área no tiene hipervinculo a recurso alguno.
  • shape [obligatorio]:
    • default: Establece que el área corresponde a la superficie total de la imagen sobre la que se traza el mapa.
    • rect: Establece una forma rectangular.
    • circle: Establece una forma circular.
    • poly: Establece cualquier otra forma poligonal.
  • style: Una o varias declaraciones de CSS.
  • tabindex: Un número natural que indica su posición en el orden de tabulación. Sobre este atributo, ver la nota del elemento a.
  • title: Un texto plano.
  • xml:lang: Un código de idioma.
¿Vacío?
Sí.
Modelo de contenido
No aplicable.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur.

img

Descripción
Incluye una imagen en el documento.
Atributos
  • alt [obligatorio]: Un texto plano alternativo que cumpla la misma función que la imagen.
  • class: Uno o más identificadores de clase.
  • dir: Un sentido de lectura.
  • height: La medida asignada a la altura de la imagen, que puede ser un número natural —el número de píxeles— o un porcentaje.
  • id: Un identificador.
  • longdesc: Un URL que apunta a un documento que contiene una descripción extensa de la imagen.
  • src [obligatorio]: El URL que apunta a la ubicación de la imagen que se quiere incluir en el documento.
  • style: Una o varias declaraciones de CSS.
  • title: Un texto plano.
  • usemap: El valor del id asignado al elemento map en el que se han especificado las áreas que se quieren aplicar a la imagen, si ésta se va a emplear como mapa de imagen del lado del cliente.
  • width: La medida asignada a la anchura de la imagen, que puede ser un número natural —el número de píxeles— o un porcentaje.
  • xml:lang: Un código de idioma.
¿Vacío?
Sí.
Modelo de contenido
No aplicable.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Notas
El atributo alt es obligatorio para toda imagen, aun cuando no se vaya a incluir un texto alternativo. El caso en que esta situación puede darse sin afectar negativamente a la accesibilidad de un documento es cuando existe un texto inmediatamente anterior o posterior que describa su contenido —por ejemplo, por medio de un pie de imagen—; siendo así, el atributo debería aparecer vacío: alt=""1.

map

Descripción
Define un mapa de imagen del lado del cliente.
Atributos
¿Vacío?
No.
Modelo de contenido
Presenta tres modelos posibles:
Así, este código

    <map id="mapa">
        <area shape="rect" coords="33,25,141,57" href="pagina_01.htm" alt="página 01" />
        <area shape="rect" coords="152,25,293,56" href="pagina_02.htm" alt="página 02" />
        <area shape="rect" coords="308,25,436,58" href="pagina_03.htm" alt="página 03" />
    </map>
                
y éste

    <map id="mapa">
        <p>
            <a shape="rect" coords="33,25,141,57" href="pagina_01.htm">página 01</a>,
            <a shape="rect" coords="152,25,293,56" href="pagina_02.htm">página 02</a> y
            <a shape="rect" coords="308,25,436,58" href="pagina_03.htm">página 03</a>.
        </p>
    </map>
                
serían igualmente válidos.
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.

object

Descripción
Incluye un objeto en el documento.
Atributos
  • archive: Especifica una lista de URI2 de recursos relevantes para el objeto; los URI deben ir separados por espacios en blanco.
  • class: Uno o más identificadores de clase.
  • classid: Un URI que especifica la implementación del objeto.
  • codebase: Indica una ruta desde la que resolver los URL relativos que puedan contener classid, data o archive.
  • codetype: El tipo MIME del recurso referenciado por medio de classid.
  • data: El URL del objeto que se va a incluir en el documento.
  • declare: declare [obligatorio]. Sirve para hacer una simple declaración del objeto, aunque no se cree en el momento. Posteriormente se puede crear una instancia del objeto haciendo referencia a esta declaración.
  • dir: Un sentido de lectura.
  • height: La medida asignada a la altura del objeto, que puede ser un número natural —el número de píxeles— o un porcentaje.
  • id: Un identificador.
  • name: Un identificador.
  • standby: Un texto plano que el agente de usuario mostrará miestras carga el objeto.
  • style: Una o varias declaraciones de CSS.
  • tabindex: Un número natural que indica su posición en el orden de tabulación. Sobre este atributo, ver la nota del elemento a.
  • title: Un texto plano.
  • type: El tipo MIME del objeto que se está incluyendo. La diferencia con codetype es que no se refiere al recurso identificado con classid, sino al vinculado por medio de data.
  • usemap: El valor del id asignado al elemento map en el que se han especificado las áreas que se quieren aplicar a la imagen, si ésta se va a emplear como mapa de imagen del lado del cliente. Se da por supuesto que en este caso el objeto cargado es una imagen.
  • width: La medida asignada a la anchura del objeto, que puede ser un número natural —el número de píxeles— o un porcentaje.
  • xml:lang: Un código de idioma.
¿Vacío?
No.
Modelo de contenido
Dependiendo del contexto, presenta dos modelos de contenido:
Por tanto, este código sería correcto:

    <div>
        <object type="application/x-shockwave-flash" data="animacion.swf" width="300" height="100">
        <p>Si no puede ver esta animación, necesita descargar <a href="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&amp;Lang=Spanish">Adobe Flash Player</a>.</p>
        </object>
    </div>
                
Y también éste:

    <p>
        <object type="application/x-shockwave-flash" data="animacion.swf" width="300" height="100">
        Si no puede ver esta animación, necesita descargar <a href="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&amp;Lang=Spanish">Adobe Flash Player</a>.
        </object>
    </p>
                
Sin embargo, el siguiente sería incorrecto:

    <p>
        <object type="application/x-shockwave-flash" data="animacion.swf" width="300" height="100">
        <p>Si no puede ver esta animación, necesita descargar <a href="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash&amp;Lang=Spanish">Adobe Flash Player</a>.</p>
        </object>
    </p>
                
Eventos
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Notas
object no cuenta con un atributo alt; los contenidos alternativos se incluyen como contenidos del elemento. Así, por ejemplo, una imagen con un logo que vinculara a la página principal de un sitio se podría marcar así:

    <a href="index.htm"><img src="imagenes/logo.png" alt="Página principal" width="350" height="90" /></a>
                
y también marcarse de esta manera:

    <a href="index.htm"><object type="image/png" data="imagenes/logo.png" width="350" height="90">Página principal</object></a>
                

param

Descripción
Especifica los parámetros de un object.
Atributos
  • id: Un identificador.
  • name [obligatorio]: El parámetro que se va a especificar.
  • type: El tipo MIME del recurso que se incluye en el documento.
  • value: Aunque no está marcado como obligatorio, todo param necesita que un atributo value acompañe a name para especificar el valor del parámetro. Se emplea cuando se especifica para un parámetro valuetype="ref".
  • valuetype: Especifica el tipo de value, y los valores posibles son tres:
    • data: Es el valor por defecto, y significa que los datos incluidos en value se pasan como una cadena literal.
    • ref: El valor del parámetro es un URL que apunta a un recurso en el que almacenan datos que se necesitan en tiempo de ejecución.
    • object: El valor es el id de un object anterior declarado en el mismo documento.
¿Vacío?
Sí.
Modelo de contenido
No aplicable.
Eventos
Ninguno.

Notas

  1. El motivo de eliminar en este caso el texto del alt es evitar que el usuario de un lector de pantalla se vea obligado a escuchar repetidamente la misma información. Volver
  2. Un URI es una cadena de caracteres que identifica de forma inequívoca un recurso, tal y como se define en Uniform Resource Identifiers (URI): Generic Syntax (inglés). Los URL serían un subconjunto de los URI. Volver

Contacto

En virtud de la Ley Orgánica 15/1999 de Protección de Datos de Carácter Personal le informo de que los datos que proporcione no serán empleados para otro fin que el de responder a su mensaje. En especial, me comprometo a no cederlos a terceros ni a emplearlos para enviar información no solicitada.

Del blog de Digital Icon