Imágenes en HTML (IV)
por Luciano Moreno, del departamento de diseño web de BJS Software.

La etiqueta <IMG> (y III).-

Más atributos de IMG:

* ALT="texto_alternativo": que establece un texto alternativo a la imagen, que debe describir el contenido de la misma o el fin de ella en nuestra página.

Este atributo es de uso obligado en HTML 4.0 según los estándares del W3C, y su misión es facilitar la accesibilidad de la página a aquellas personas que o bien han desabilitado en su navegador la opción de presentar imágenes (por ejemplo, por tener una conexión a Internet de banda estrecha o por querer agilizar la carga de las páginas), o bien disponen de navegadores de sólo texto. En estos casos, si la imagen no se muestra en pantalla, sí que lo hace el texto contenido en el atributo ALT, dando con ello una descripción de la imagen al usuario.

Esto es de especial importancia en el caso de que la imagen contenga un enlace para navegar, ya que si el usuario no puede ver la imagen y no se establece este atributo, no podrá saber dónde lleva ese enlace.

Resulta también útil el el caso de un usuario que tenga activada la carga de imágenes, ya que mientras vienen estas del servidor podrá conocer mediante el texto asociado qué tipo de imagen está esperando, y lo mismo ocurre en el caso de que la imagen no se reciba por cualquier motivo, como por ejemplo, si la ruta especificada para ella en incorrecta.

En el siguiente ejemplo voy a provocar un error en la carga, haciendo referencia a una imagen que no existe, y también voy a cargar la imagen correcta, para que veáis el uso del atributo ALT:

<IMG SRC="images/noexiste.gif" WIDTH="100" HEIGHT="50" BORDER="0" ALT="fotografía de un cuadro">

<IMG SRC="images/cuadro.gif" WIDTH="100" HEIGHT="50" BORDER="0" ALT="fotografía de un cuadro">

Si situáis el cursor sobre la imagen anterior veréis como aparece un bocadillo con el contenido del atributo ALT, por lo que otro uso de este es proporcionar al usuario una descripción complementaria a la imagen en sí. Si se ve este ejemplo en Internet Explorer, podremos apreciar un pequeño rectángulo con una cruz roja, que indica que la imagen no se ha encontrado en el servidor o que está desabilitada la opción de mostrar imágenes, y también veréis el texto descriptivo establecido en ALT. Pero si véis esta página con Nestcape 4x observaréis que no aparece el texto alternativo directamente, sólo lo hace al situar el cursor encima del cuadro vacío de la imagen, mostrando en este una fea imagen con en interrogante en colores, indicando que la imagen pedida no está disponible. Por último, si la véis en Nestcape 6x, apreciaréis que en el caso de la imagen desaparecida no se muestra ni si quiera el rectángulo que ocuparía, aunque sí el texto definido mediante ALT, y si situáis el cursor encima de la imagen que se ve no aparecerá el bocadillo con el texto del ALT; esto ocurre porque este navegador utiliza como fuente de este bocadillo el atributo TITLE, que vemos más abajo.

Puede darse el caso de que no nos interese la aparición de este bocadillo o del texto alternativo a una imagen, como es el caso de que creemos una línea horizontal con una imagen. Podríamos para ello no establecer el atributo ALT en la etiqueta IMG, pero entonces no estaríamos siguiendo las recomendaciones del W3C, que dice que hay que ponerlo siempre. La solución es poner el atributo, pero sin contenido. Ejemplo:

<P ALIGN="center"><IMG SRC="images/bj.gif" WIDTH="400" HEIGHT="2" BORDER="0" ALT=""></P>

si situas el cursor encima de la barrita verás como ahora no aparece ningún bocadillo.

* TITLE="texto_descriptivo": que establece un texto descriptivo de la imagen, que aparece en Nestcape 6x cuando situamos el cursor sobre la imagen. Esto ocurre así, en vez de con ALT, porque se están buscando actualmente unos estándares en los usos de la etiquetas, y en muchas de ellas la misión de mostrar el bocadillo explicativo corresponde al atributo TITLE (en los enlaces mediante <A>, por ejemplo), por lo que Nestcape 6x ha adoptado este estándar, anulando así el efecto del atributo ALT. Así pués, este muestra el texto que aparece en el espacio que corresponde a la imagen en caso de que esta no aparezca o mientras se carga, mientras que TITLE se encarga de mostrar un texto descriptivo de la imagen al situar el cursor sobre ella.

* LOWSRC="ruta_imagen": que permite establecer una imagen sustituta de la principal, normalmente una versión reducida de ella, y que se carga en primer lugar. El parámetro ruta_imagen especifica la URI de la misma, bien sea como ruta local relativa o como ruta absoluta.

Este atributo se usa cuando debemos mostrar en pantalla una imagen de mucho peso en Ks, y que por lo tanto tardará mucho en cargarse en pantalla. Mediante SRC establecemos la ruta de la imagen completa, y con LOWSRC establecemos la ruta de una imagen alternativa, copia de la principal pero con menos resolución (y por lo tanto, menos peso). Con ello, el navegador cargará primero la imagen de baja resolución indicada en LOWSRC, y cuando se acabe de cargar la imagen principal, la presentará en pantalla, en lugar de la inicial. Lógicamente, este efecto sólo se notará si la imagen inicial es de mucho peso en comparación con su equivalente de baja resolución o si la conexión que tenemos es de banda estrecha. Ejemplo:

<IMG SRC="images/chica.jpg" LOWSRC="images/chica_2.jpg" WIDTH="512" HEIGHT="384" BORDER="0" ALT="chica">

cuyo resultado lo podéis ver en la siguiente ventana.

* NAME="nombre_identificador": que permite asignar un nombre identificador único a la imagen, para luego poder acceder a sus propiedades mediante lenguajes de script. No es el objetivo de este manual entrar en estos temas, por lo que para más información podéis consultar el tema correspondiente dentro de la sección JavaScript. Sólo decir aquí que de esta forma se consigue, por ejemplo, crear el efecto de rollover, por el cual se cambia la imagen cuando se pasa el cursor sobre ella.

* USEMAP="nombre_mapa": que permite utilizar una definición de mapa de imágenes en el lado cliente. La estudiaremos más adelante con más detalle.

*ISMAP: que permite usar la imagen como un mapa de imágenes en el lado servidor.

Exiten además una serie de atributos que son soportados sólamente por algún o algunos navegadores en particular, por lo que no se recomienda su uso, al no conseguir con ellos la compatibilidad total. Entre ellos destacan:

* SUPRESS: que impide la visualización de la imagen mientras esta se descarga, anulando además el bocadillo de texto que aparece como consecuencia del atributo ALT. Sólo es soportada por Nestacape Navigator.

* DYNSRC="ruta_fichero": que permite introducir una secuencia de video o un fichero de realidad virtual (formato VRML). Si se usa, se complementa con otro atributo, LOOP, que indica cuántas veces debe repetirse la visualización del video o fichero VRML. Sólo es soportada por Internet Explorer.

* CLASS="nombre_clase": que permite asignar estilos CSS a una imagen mediante la asignación de una clase, con lo que podemos, por ejemplo, posicionar esta en pantalla. Sólo es admitida por Internet Explorer y por Nestcape 6x. Estudiaremos los estilos en imágenes más adelante.

* ID="nombre_identificador": que permite asignar a una imagen un identificador único, con el que podemos asignarle un estilo determinado. La estudiaremos más adelante