En XHTML2, las etiquetas <img> y <applet> fueron reemplazadas por <object>, algo que en Internet Explorer era un tremendo problema. Digo era, porque Internet Explorer 8 se comporta más o menos como el resto de los navegadores modernos, acompañado de una nueva función llamada "modo compatibilidad". En este artículo muestro una solución conocida a la incompatibilidad con las imágenes insertadas como objeto de las versiones anteriores.

¿Por qué <object>?

La historia del objeto

1. Con Internet Explorer 3.0 Microsoft introdujo una tecnología para insertar elementos ActiveX dentro de una página web utilizando la etiqueta <object>.
2. Netscape también quiere insertar videos en las páginas web y saca la etiqueta <embed>, con otro nombre para diferenciarse de la tecnología ActiveX específica del sistema operativo de Microsoft.
3. En 1997 se le agrega el elemento <object> a la especificación del HTML.
4. Microsoft ajustó su forma de tratar los objetos para que aceptaran el estándar. Pero siguió tratando a todos los objetos como elementos de ActiveX.
5. Hasta el día de hoy.
6. La etiqueta <embed> nunca fue estándar, aunque se sigue utilizando por algunos para evitar de manera rápida los problemas de incompatibilidad.
7. Después sale la especificación de XHTML2 donde se eliminan las etiquetas <img>, <applet> e <iframe> para ser reemplazadas por <object>.
8. Internet Explorer 8 muestra los objetos de manera más parecida al estándar.

Qué tenía de malo el <img>

Semánticamente, aparte de que i-m-g no es una palabra completa como image u object; a mi manera de pensar, <object> es una palabra mucho más genérica para nombrar esta clase de elementos que no son texto en una página web.

Pienso que si se siguiera utilizando una etiqueta específica para las imágenes, tendría que crearse otra llamada <video> (como lo hicieron en HTML5) y siguiendo esa lógica después vendrían <map>, <game>, <iframe> (también fue eliminado), <application>, <applet>, <vr>, etc. Obligando a cambiar o extender el estándar cada vez que a alguien se le ocurra insertar nuevo tipo de contenido en una página web. Y luego comienzan los dilemas: ¿es applet una application? ¿Y si el iframe contiene un video? ¿El objeto flash es un video, una aplicación, una animación, o un <application><video><animation> </animation></video></application>?

En cambio, una sola etiqueta estandarizada para embeber elementos es mucho más flexible, pudiéndose usar el MIME type para diferenciar de qué clase de objeto se trata.

Sin embargo, y lo supe recién, la etiqueta <img> se va a mantener al final debido a los reclamos y para hacer felices a todos, pero con la condición de que se prefiera la etiqueta de objeto.

Ejemplo de código

Por ejemplo, la etiqueta...

<img
 src="rss.jpg"
 width="152"
 height="160"
 alt="RSS" />

Como objeto se vería como...

<object
 type="image/jpeg"
 data="rss.jpg"
 width="152"
 height="160">
 <p>Icono <acronym xml:lang="en-us" title="Really Simple Syndication">RSS</acronym>.</p>
</object>

Como se pudo apreciar, el texto alternativo de la etiqueta <object> tiene mayor riqueza descriptiva que el texto plano permitido en el atributo alt de la etiqueta <img>.

Es más, si el software agente que se está utilizando para visualizar el documento no tiene soporte para un determinado formato de imagen, o cualquier otra cosa, el elemento <object> en teoría permite disponer de otros objetos para colocar en su lugar.

Ejemplo:

<object
 type="video/x-mng"
 data="logo.mng"
 width="152"
 height="160">

 <object
  type="image/gif"
  data="logo.gif"
  width="152"
  height="160">

  <p>Logo de ElBlog</p>

 </object>
</object>

En teoría, porque Internet Explorer para Windows tiene sus diferencias.

Internet Explorer

Prácticamente todos los navegadores modernos están preparados para insertar imágenes como objetos. Pero las versiones anteriores de IE no.

Problemas de objeto con Internet Explorer 6 y 7

• Borde visible alrededor del objeto.
• Espaciado interior (padding) extra dentro de los objetos. y como el tamaño del objeto es el mismo que el de la imagen...
• Aparecen las barras de desplazamiento innecesariamente.
• Cuando hay varios objetos como en el ejemplo anterior, en vez de mostrar el primero que entiende, IE6 los carga todos.
• Si tienes las opciones de seguridad en "alta" (deshabilitando todos los controles ActiveX), no verás ningún elemento <object>, incluso aquellos que no tienen nada que ver con ActiveX (como nuestras imágenes).
• Es más, si el objeto imagen es de otro dominio, aparecerá una alerta de seguridad en Internet Explorer. ActiveX.
• Olvídate de las semi-transparencias de los PNG.
• Al deshabilitar las imágenes, Internet Explorer cargará los objetos igual.
• Al poner un vínculo alrededor de un objeto, éste no se vuelve clickeable.

Posible solución a los problemas con Internet Explorer

Para el problema de lo objetos alternativos

Para cuando tengas varios objetos como alternativas de formato o para agregar información adicional para los ciegos o robots buscadores, puedes usar los comentarios condicionales para evitar que los procese Internet Explorer 6 y seguir cumpliendo con los estándares:

<object
 type="image/tiff"
 data="beagle.tiff"
 width="152"
 height="160">

 <!--[if gte IE 7]>
 <object
  type="image/jpeg"
  data="beagle.jpg"
  width="152"
  height="160">
 </object>
 <![endif]-->

</object>

Usé gte IE 7 porque en Internet Explorer 7 se soluciona este problema.

Para los problemas estéticos

Para deshacerse del borde alrededor, el extra padding y las barras de desplazamiento; existe un javascript que detecta y aplica los estilos correspondientes de estos objetos.

El código javascript es el siguiente:

function fixObjectImages(){
 var objs=document.getElementsByTagName('OBJECT');
 for(n=0;n<objs.length;n++){
  var obj=objs[n];
  if((obj != null && obj.type != null)
  && ((obj.type=="image/jpeg")
  || (obj.type=="image/gif")
  || (obj.type=="image/png"))){
   fixObject(obj);
  }
 }
}
function fixObject(obj){
 obj.body.style.border='none';
 obj.body.style.margin='0';
 obj.body.style.padding='0';
 obj.body.style.overflow='hidden';
}
window.onload = fixObjectImages;

El truco para arreglar el elemento <object> es darse cuenta que actúa como un <iframe>; o sea, es su propio canvas con un canvas. Dentro del DOM, un <object> tiene su propio body con todas sus propias propiedades. Entonces para remover el borde, simplemente lo hacemos en nuestra función window.onload (demo):

Afortunadamente Internet Explorer 8 arregló esto, logrando así que todos los mayores navegadores modernos estén preparados para insertar imágenes como objetos.

Este y otros cambios produjeron problemas de incompatibilidad con el código de páginas web preparadas para las versiones anteriores de IE. Esto obligó a incluir un botón nuevo llamado "modo de compatibilidad" en la versión 8 del navegador y todo un sistema que consulta en una base de datos de Microsoft para saber cómo abrir cada página web (opcional, por privacidad).

Botón de Vista de compatibilidad en Internet Explorer 8.

Estas novedades provocaron confusión y descontento en los usuarios no ilustrados en el tema de los estándares web. La mayor parte incluso volvió a las versiones anteriores. :-@

Para los objetos PNG en IE6 y los vínculos

Debido a la forma en que los objetos son tratados por Internet Explorer, no se me ocurre otra manera de solucionar el problema de los PNG semi-transparentes en versiones anteriores a Internet Explorer 6 y el no poder cambiar el tamaño de la imagen original sin necesariamente tener que reemplazar todas las etiquetas <object type="image/png"> por <img>.

Para el ActiveX e imágenes deshabilitadas

N.T.S. Si se deshabilita ActiveX, desaparecen todos los objetos.

Cuando se deshabilitan las imágenes en las versiones anteriores a Internet Explorer 8, las imágenes como objeto seguían apareciendo; en cambio en IE8, desaparece todo el objeto sin mostrar el texto alternativo.

Ejemplo final

En el siguiente ejemplo, se muestran dos imágenes PNG con un vínculo cada una. La primera corresponde a la etiqueta <img> de toda la vida y la segunda es un objeto. A ambas se les han aplicado los javascript para que se vean lo mejor posible en las diferentes versiones de IE y comparar su funcionamiento en los distintos navegadores.

 
La 1^ra imagen tiene la etiqueta <img> y la 2^da, <object>

Palabras finales

Internet Explorer no estará siguiendo el estándar XHTML hasta que acepte el MIME type application/xhtml+xml, por lo que el uso de <object> en vez de <img> para las imágenes en Internet Explorer no es ninguna obligación ya que todos las versiones de HTML que acepta IE aceptan la etiqueta <img>.

Se hace imperativo que todos se actualicen y actualicen cada computador con Windows que no tenga Internet Explorer 8, porque seguir con versiones antiguas de los navegadores hacen que se retrase el desarrollo de la web.

Actualización

Después de la escritura de este artículo, surgen 2 informaciones:

• El estándar XHTML2 es abandonado para concentrarse en el HTML5 que incluye de nuevo la etiqueta <img>.
• Descubro que Quicktime 7 se apodera de los objetos PNG en Internet Explorer para Windows.

Referencias

• The Vanishing Image: XHTML 2 Migration Issues
• OBJECT and Internet Explorer
• Miscellaneous Transparent PNG Images using OBJECT Tags
• What's New in Internet Explorer 7
• AlphaImageLoader Filter
• La historia de cómo apareció el tag img (muy interesante)

Artículos relacionados

• Usando PNG con transparencias en Internet Explorer 6 (primera parte)
• Deja de usar iframes

Etiquetas: ie, javascript, xhtml, xml

7.4.09.