IMAGEN <img>

HTML401 DTD-XHTML10T DTD-XHTML10S
Inserta una imagen en una página. Se trata de un elemento %special, dentro del grupo %inline de elementos en línea, que a su vez no puede contener nada (se declara vacío con EMPTY). Dos atributos son requeridos, src y alt. El primero para indicar el recurso de imagen con un valor de URI, el segundo para indicar un texto alternativo cuando no puede presentarse la imagen o bien cuando se usa en navegadores no visuales.

Con este elemento, al igual que para todos los elementos estudiados, se sigue el DTD de XHTML estricto. Sin embargo con algunos elementos se presentan atributos que son del DTD de XHTML transicional. En todo caso estos elementos están desaprobados y no serán soportados por los navegadores en nuevas versiones de XHTML. Por lo tanto se recomienda usar estilos para conseguir el mismo efecto. Los atributos transicionales que se exponen son <img align>, <img border>, <img hspace>, <img vspace>.

En las últimas versiones de HTML se incluyó el nuevo elemento <object>. Su propósito es unificar aquellos recursos como imágenes, aplicaciones y documentos HTML incrustados, recursos que hasta el momento venían resolviéndose con los elementos <img>, <applet>, <iframe> respectivamente. El elemento <applet> está desaprobado no apareciendo ni siquiera en XHTML transicional. Por otro lado <iframe> aún puede usarse con XHTML versión marcos. Sin embargo <img> sigue vigente, aunque con <object> también puede insertarse un objeto de imagen.

Ejemplo <img>

Las imágenes son elementos de línea, como en este ejemplo que insertamos dos imágenes una tras otra y se presentan en la misma línea. En caso de situarlas en líneas diferentes puede insertarlas en elementos de bloque cada una.
<img src="ejemplos/imagen/imagen_3.jpg" alt="imagen_3.jpg" 
    width="108" height="75" />
<img src="ejemplos/imagen/imagen_4.jpg" alt="imagen_4.jpg" 
    width="108" height="75" />
            
Resultado:
imagen_3.jpg imagen_4.jpg

Ejemplo: Resolución de imágenes y tamaño de archivo

La resolución de las imágenes es importante a efectos de su presentación. En este ejemplo presentamos tres imágenes:
  • La primera es la original de 833x591 píxeles ocupando 279 KB que no hemos insertado en esta página, pero puede acceder directamente a ella con el vínculo 833x591.jpg.
  • A partir de esa imagen original anterior y con un simple editor de imagen se cambia el tamaño (resolución) a 300x212 píxeles manteniendo la misma proporción y se guarda con un factor de calidad de compresión de un 70%, lo que supuso que finalmente ocupara 11 KB. Se inserta con <img src="ejemplos/imagen/300x212-70.jpg" width="300" height="212" alt="300x212-70.jpg" />, donde el ancho y alto coinciden con los que tiene la imagen.
  • En la tercera imagen se hizo lo mismo pero con un factor de calidad menor, de un 30% ocupando entonces 5.8 KB. Se inserta con <img src="ejemplos/imagen/300x212-30.jpg" width="300" height="212" alt="300x212-30.jpg" />
300x212-70.jpg 300x212-30.jpg
En un monitor configurado a 1152x864 píxeles, la primera tienen una presentación adecuada, pero la segunda pierde calidad aunque aún es aceptable. A mayor resolución del monitor, más juntos estarán los puntos de la imagen y, por tanto, menos se notarán los defectos. Una forma de observar esto sin cambiar la resolución del monitor es usando el efecto "zoom" de la aplicación navegadora. Un tamaño menor del 100% es equiparable a una mayor resolución del monitor, y viceversa.

Por lo tanto hay un compromiso entre la mayor resolución de la imagen y su menor tamaño posible. Como las imagenes no son todas iguales tampoco se comprimen en el mismo grado, por lo que un procedimiento para insertar una imagen podría ser el siguiente:

  1. Configurar nuestro monitor a una resolución intermedia como 1024x768 o 1152x864 con el objeto de situarnos en una hipotética media de utilización de todos los usuarios.
  2. Ver que espacio en píxeles queremos ocupar de la página. Supongamos que sea de WxH píxeles de ancho por alto.
  3. La imagen original debe ser entonces de este tamaño o mayor. Si originalmene no tiene un tamaño excesivo puede usarse directamente, pero indicando el ancho y alto en el elemento <img ... width="W" height="H" />. El navegador se encargará de ajustar como un zoom la imagen más grande a ese contenedor. Esta sería siempre la mejor opción, pues si el usuario varía la resolución de su monitor, la imagen aún podría seguir conservando su resolución de forma aceptable. Pero si el tamaño del archivo es excesivo entonces se debe reducir la resolución a WxH y guardar diferentes versiones con varios factores de calidad de compresión hasta que consigamos un tamaño y calidad aceptables.
¿Cuál es el tamaño "aceptable" para archivos de imagen?. Supongamos que hemos de insertar 10 imágenes diferentes en una página y que todas son como la original de este ejemplo en cuanto a tamaño (279 KB). Esto supone 2790 KB que han de descargarse del servidor, aparte de otros contenidos de la página. La velocidad de descarga depende del tipo de conexión, pero no es aceptable para conexiones que no sean ADSL rápidas si un usuario no está dispuesto a demorarse mucho en que se muestren las imágenes. 80x56-100.jpg Por lo tanto siempre que sea posible hay que reducir el tamaño de archivo de las imágenes y/o no acumular muchas imágenes en una página desglosando éstas en varias páginas. Una opción si queremos mantener la posibilidad de ofrecer la imagen con su resolución original podría ser mostrar un imagen pequeña con un vínculo a esa original, tal como figura en la imagen con vínculo de la izquierda.

URL de una imagen <img src = "x">

Atributo requerido del tipo %URI para especificar la ruta donde se encuentra la imagen.

Hay que cuidar el uso de mayúsculas-minúsculas en el nombre de la ruta y, sobre todo, en la extensión. Por ejemplo, extensiones como ".JPG" o ".GIF" son abiertas por los navegadores consultados tanto si se ponen en mayúsculas como en minúsculas ".jpg", ".gif". Sin embargo si ejecutamos la página desde un servidor como el de Tomcat no sucede así, siendo entonces sensible a mayúsculas-minúsculas. Una forma de evitar confusiones es siempre usar minúsculas. También hay que revisar las extensiones con las que se guardan los archivos de imagen editados con ciertas aplicaciones, pues algunos editores suelen ponerlas en mayúsculas.

Ejemplo <img src>

Si organizamos nuestro sitio web de forma que por cada documento XHTML exista una carpeta con el mismo nombre donde ubicar las imágenes y otros documentos que se vinculan con la página, entonces accedemos tal como se expone en este ejemplo:
<img src="ejemplos/imagen/img_1.jpg" width="16" height="16"  
alt="img_1.jpg" />
            
Resultado:
Imagen disponible en la ruta "ejemplos/imagen/img_1.jpg": img_1.jpg
Otra forma de insertar una imagen es con los datos incrustados en el HTML. Puede ver un ejemplo en Imagen con datos internos.

Texto alternativo <img alt = "x">

HTML401 Atributo requerido del tipo %Text para ofrecer texto alternativo que se muestra si no lo hace la imagen por cualquier causa. Las causas no son sólo por fallos en la presentación, sino que se trata de ofrecer una descripción corta sobre el contenido de las imágenes importantes para la comprensión del documento, con el objeto de completar la información a los usuarios que no puedan verlas debido adiversos motivos, como por ejemplo por usar sintetizadores de voz o navegadores que no pueden mostrar imágenes.

Si las imágenes no son significativas para entender el entorno donde están ubicadas, entonces y dado que el atributo es requerido, puede incluirse una cadena vacía "". La descripción debe ser corta y comprensiva para que le sirva al usuario a decidir si aún necesita una mayor descripción que podría conseguir mediante el atributo <img longdesc>.

Ejemplo <img alt>

Explorer 7 usaba este atributo alt para mostrar también una etiqueta emergente con el contenido cuando no se especifica <E title>, aunque no es su propósito según la especificación. Explorer 8 ya sí sigue el estándar, no mostrando alt como título. En el siguiente ejemplo disponemos de tres imágenes. La primera no tiene contenido, por lo que deberá mostrar el texto de alt, al igual que la segunda, pero la longitud del texto de alt no es la misma. En la cuarta ponemos también el atributo title, cuyo propósito es presentar una etiqueta emergente y por tanto no debe confundirse con la finalidad de alt como hemos dicho.
<img src="" alt="Imagen 1ª: uso de 'alt' con una imagen de 
	108x75 píxeles sin contenido."  width="108" height="75" />
<img src="" alt="Imagen 2ª." width="108" height="75" />                
<img src="ejemplos/imagen/imagen_3.jpg" alt="Imagen 3ª" width="108" height="75"  />
<img src="ejemplos/imagen/imagen_4.jpg" alt="Imagen 4ª" width="108" height="75" 
title="título: imagen 4ª de 108x75" />
            
Resultado:
Imagen 1ª: uso de 'alt' con una imagen de 108x75 píxeles sin contenido. Imagen 2ª. Imagen 3ª Imagen 4ª

En los dos primeros casos de imágenes sin contenido podemos ver diferentes formas de actuar en los navegadores consultados:

  • Explorer 8 bordea los elementos sin contenido y ajusta el texto al cuadro haciendo saltos de línea para presentar al menos todo lo posible sin alterar la disposición o medidas de los elementos.
  • Firefox 3.5 no pone borde al elemento, limitándose a exponer todo el texto alternativo en la primera línea.
  • Opera 10.53 usa borde y pone todo el texto en la primera línea, pero recortando lo que sobresale.
  • Safari pone borde, muestra un icono con "?" y sólo presenta el texto altertivo si cabe en el ancho del elemento.

Descripción alternativa larga <img longdesc ="x">

El valor "x" es del tipo %URI para especificar un vínculo a una descripción larga de la imagen. Como se comentó en <img alt>, esta descripción corta puede ser ampliada con este atributo longdesc.

Ejemplo <img longdesc>

Para probar este atributo hemos puesto una imagen con una descripción corta alternativa mediante img alt y un vínculo a una mayor descripción con img longdesc, para lo cual creamos una página que amplie la descripción de la imagen. Se supone que un navegador no visual podrá acceder a esta descripción larga, pero los navegadores visuales consultados no usan este atributo. Opera y Explorer no parece que actúen de alguna manera sobre el atributo. Netscape y Firefox sólo ofrecen la ruta de la descripción larga al presentar la ventana de propiedades de la imagen.
<img src="ejemplos/imagen/imagen_2.jpg" alt="Torre Eiffel" width="120" 
height="156" longdesc="ejemplos/imagen/ejemplos/longdesc/longdesc-torre-eiffel.html" 
title="Torre Eiffel" />               
            
Resultado:
Torre Eiffel

Esta imagen contiene una ruta a una descripción larga, aunque se observa diferente forma de actuar ante ello:

  • Opera 10.53 tiene una entrada de menú "Descripción larga" al situarse con el botón derecha en la imagen, siendo un vínculo que nos lleva a presentar en otra ventana la web de la dirección insertada en esa descripción.
  • Firefox 3.5 tiene también el menú propiedades (botón derecho del ratón sobre la imagen), pero sólo presenta la cadena URI.
  • Explorer 8 y Safari 4.0 no parecen tener ningún mecanismo al efecto.

Ancho de una imagen <img width = "x">

El valor "x" es del tipo %Length para especificar el ancho en píxeles de la imagen con objeto de que el navegador acelere la visualización, pues conjuntamente con el alto <img height> el navegador sabrá cuanto ocupa y no necesita esperar a que se cargue la imagen para calcularlo, pudiendo seguir con la presentación del resto del documento. Si las dimensiones dadas no coinciden con las originales de la imagen, entonces ésta será ajustada al contenedor, ampliándose o reduciéndose hasta ocupar el área especificada. Si no se especifica ancho o alto, el navegador calculará estas medidas tras cargar la imagen.

Ejemplo <img width>

En el ejemplo siguiente presentamos una imagen vacía sin dimensiones, otra también vacía con unas dimensionas dadas, la siguiente con las mismas dimensiones que la anterior y la última en tamaño reducido. Vemos que aunque no pudo presentar la primera imagen, sólo ocupará el espacio de la etiqueta, mientras que para la segunda si reservó el espacio dado aunque la imagen no se cargara. La tercera imagen se presenta a su tamaño natural, es decir, definida para 108x75 píxeles. Sin embargo para la última hemos tomado la misma imagen pero le aplicamos que la presente a un 5% del tamaño de la ventana del navegador.
<img src="" alt="Vacía 1" />
<img src="" width="108" height="75" alt="Vacía 2" />
<img src="ejemplos/imagen/imagen_3.jpg" width="108" height="75" alt="imagen_3" />
<img src="ejemplos/imagen/imagen_3.jpg" width="5%" height="5%" alt="imagen_3" />
            
Resultado:
Vacía 1 Vacía 2 imagen_3 imagen_3

Sólo Firefox no se comporta igual que los otros navegadores, pues con imágenes sin contenido ignora la caja del elemento imagen y expone el texto alternativo como un elemento en línea, sin bordes y sin medidas.

Alto de una imagen <img height = "x">

El valor "x" es del tipo %Length para especificar el alto de la imagen para. Se aplican las mismas consideraciones expuestas para el ancho en <img width>.

Ejemplo <img height>

Tal como se vio al ajustar la anchura, si modificamos la cantidad de píxeles originales podemos aplicar un efecto "zoom" sobre la imagen. En el siguiente ejemplo tenemos la primera imagen originalmente de 120x156 píxeles pero que la presentamos con unas dimensiones menores de 108x75 píxeles, dimensiones iguales a la de la segunda imagen. La reducción (o ampliación) de una imagen por este método es una forma rápida de ajustar el tamaño, sin embargo se debe tener en cuenta que esta modificación de tamaño puede afectar a la calidad de la imagen o distorsionarla y, en todo caso, no reduce el tamaño del archivo original. Por lo tanto el método más adecuado es aplicar una reducción antes de insertarla en el documento mediante alguna aplicación editora de imágenes.
<img src="ejemplos/imagen/imagen_2.jpg" width="108" height="75" alt="imagen_2" />
<img src="ejemplos/imagen/imagen_3.jpg" width="108" height="75" alt="imagen_3" />
            
Resultado:
imagen_2 imagen_3

Usar mapa de imagen del cliente <img usemap = "x">

El valor "x" es del tipo %URI para especificar un mapa de imagen del lado del cliente, lo que supone definir unas áreas o zonas en la imagen con las que puede interactuar individualmente el usuario. Cuando éste activa con el ratón una zona de la imagen, sus coordenadas son manejadas por el navegador para responder según lo que se haya especificado. En oposición, en un mapa de imagen del lado del servidor las coordenadas son enviadas al servidor quién realizará la acción oportuna. Este caso responde al atributo <img ismap>. Siempre es preferible el primer caso a excepción de que el mapa de imágenes sea demasiado complicado para ser gestionado en el navegador del usuario.

El mapa de la imagen puede estar situado en el mismo documento y se identifica con su atributo <map id> para XHTML estricto, aunque en transicional aún puede usarse name en lugar de id. Por lo tanto la construcción sería <img usemap="#z" ... > si existe un elemento <map id="z"> en la misma página. Si estuviera en una página externa con una ruta como la siguiente pondríamos <img usemap="/ruta/pagina.html#z" ... >. Para más detalles ver la teoría y ejemplos expuestos en el elemento <area> que sirve para definir las zonas del mapa en que queremos dividir una imagen.

Usar mapa de imagen del servidor <img ismap = "x">

El valor "x" es un tipo enumerado con un único valor ismap para especificar un mapa de imágenes del lado del servidor. Para más detalles consultar el uso con el elemento <map>.

Alinear imágenes y texto <img align = "x"> (XHTML transicional)

HTML401 Alinear imágenes y situar texto a su alrededor. Los valores para "x" son del tipo %ImgAlign que sólo está vigente en el DTD XHTML transicional, con los valores:
  • left, right, para hacer flotar la imagen sobre el texto.
  • top, middle, bottom para alinear la imagen con el texto en su dimensión vertical.

Cuando usamos texto e imágenes, si alineamos una imagen a uno de ambos lados left, right con este atributo <img align>, el texto se situará en el lado contrario. De esta forma se dice que la imagen flota sobre el texto. El flotamiento puede finalizarse con el uso del elemento-atributo <br clear>, aunque también es de XHTML transicional.

CSS tiene la propiedad específica {float} para flotamiento de elementos, lo que nos permite que el texto rodee las imágenes consiguiendo el mismo efecto que este atributo <img align> para sus valores left, right.

En cuanto al alineamiento vertical, CSS dispone de la propiedad {vertical-align} que consigue los mismos efectos que los valores top, middle, bottom de <img align>.

Ejemplo <img align>: alineación izquierda por defecto

Si no usamos el atributo align ni hojas de estilo para controlar el flujo de la presentación, las imagenes se alinean a la izquierda en cada línea. En este ejemplo sin usar este atributo se presenta un párrafo, luego una imagen y finalmente otro párrafo, cada uno en su línea.
<p>Un párrafo.</p>
<img src="ejemplos/imagen/imagen_3.jpg" alt="imagen_3"  width="108" height="75" />
<p>Otro párrafo.</p>
            
Resultado:

Un párrafo.

imagen_3

Otro párrafo.

Ejemplo <img align> para flotación de texto

Sin embargo si deseamos que ambos párrafos sigan a la derecha de la imagen, entonces debemos usar align="left", tal que la imagenes se alinea a la izquierda y los párrafos le sigan a la derecha. Es lo mismo que decir que hemos flotado la imagen a la izquierda del texto. En este caso la imagen flotada debe colocarse antes del texto sobre el que se quiere hacer flotar. Vea como agregamos el borrado de flotación al final para que el efecto de flotación de la imagen no siga su curso en el resto del documento (en el siguiente ejemplo se expone con más detalle).
<img src="ejemplos/imagen/imagen_3.jpg" align="left" alt="imagen_3" 
     width="108" height="75" />
<p>Un párrafo.</p>
<p>Otro párrafo.</p>
<br clear="all" />
            
Resultado:
imagen_3

Un párrafo.

Otro párrafo.


Ejemplo <img align>, borrado de flotaciones

Pero si nuestro propósito fuera que sólo el primer párrafo se alinee a la derecha de la imagen y el segundo párrafo comenzara en una nueva línea inmediatamente por debajo de la imagen, entonces habría que usar <br clear="all" />. Se trata de un retorno de carro con un atributo de borrado de margen, que aunque es XHTML transicional, resulta de gran utilidad para casos como éste: hacer saltar el segundo párrafo por debajo de la imagen. Tal como se ve en el código, primero se presenta la imagen a la izquierda, luego el primer párrafo que será empujado por la imagen hacia la derecha, a continuación se borra toda acción de la imagen sobre los siguientes elementos y se sigue presentando el resto de la imagen. Cuando esta finalice se presenta en una nueva línea el siguiente elemento que es el segundo párrafo. Como atributo podría también usarse clear="right" o también clear="left" para borrar efectos de margen sobre imágenes alineadas a la derecha o a la izquierda, aunque con all borramos cualquier efecto derecha o izquierda.
<img src="ejemplos/imagen/imagen_3.jpg" align="left" alt="ejemplos/imagen/imagen_3" 
    width="108" height="75" />
<p>Un párrafo.</p>
<br clear="all" />
<p>Otro párrafo.</p>
            
Resultado:
ejemplos/imagen/imagen_3

Un párrafo.


Otro párrafo.


Ejemplo <img align> para flotaciones derecha-izquierda

Siguiendo con el ejemplo anterior sobre br clear, a continuación mostramos dos imágenes alineadas a derecha e izquierda y dos párrafos. El próposito es que el primer párrafo quede entre ambas imágenes, mientras que el segundo párrafo comienza cuando finalice la imagen de la izquierda (es decir, el segundo párrafo debe empezar siempre por debajo de la imagen de la izquierda). El orden de presentación sería primero la imagen de la izquierda, luego la de la derecha, continua con el primer párrafo, un borrado de margen IZQUIERDO y, finalmente el segundo párrafo. El borrado debe ser izquierdo para forzar a que la imagen de la izquierda no admita a su derecha el segundo párrafo y retenga su presentación hasta que esta imagen izquierda finalice su presentación.
<img src="ejemplos/imagen/imagen_4.jpg" align="left" alt="imagen_4" 
    alt="imagen_4" width="108" height="75" />
<img src="ejemplos/imagen/imagen_2.jpg" align="right" alt="imagen_2" 
    width="120" height="156" />
<p>Primer párrafo.</p>
<br clear="left" />
<p>Segundo párrafo.</p>
            
Resultado:
imagen_4 imagen_2

Primer párrafo.


Segundo párrafo.


Ejemplo <img align>, borrado de todas las flotaciones

Si en el ejemplo anterior borramos a la DERECHA, el segundo párrafo se mostrará tras finalizar la presentación de la imagen derecha. En este caso resultaría el mismo efecto usando all que right pues sólo hay una imagen a la derecha y además la de la izquierda, al resultar más corta, ya no tiene efecto sobre el empuje.
<img src="ejemplos/imagen/imagen_4.jpg" align="left" alt="imagen_4" 
    width="108" height="75" />
<img src="ejemplos/imagen/imagen_2.jpg" align="right" alt="imagen_2" 
    width="120" height="156" />
<p>Primer párrafo.</p>
<br clear="right" />
<p>Segundo párrafo.</p>
            
Resultado:
imagen_4 imagen_2

Primer párrafo.


Segundo párrafo.


Ejemplo <img align> para alineaciones verticales

Para alinear las imágenes con el texto hemos de usar los valores para "x" de top, middle o bottom. Todos los navegadores no tratan de igual forma estos valores, pues algunos utilizan el middle para alinear con el centro de la línea de texto y otros para alinear con respecto al resto de las imágenes en la misma línea.
<p>
    Imagen alineada con el margen superior del texto 
    <img src="ejemplos/imagen/imagen_5.jpg" align="top" alt="imagen_5 de 20x27" 
    width="20" height="27" /> 
</p>
<p>
    Imagen alineada con el margen inferior del texto 
    <img src="ejemplos/imagen/imagen_5.jpg" align="bottom" alt="imagen_5 de 20x27" 
    width="20" height="27" /> 
</p>
El valor "middle" para algunos navegadores actuará alineando por el centro...
<p>
    108x75 píxeles 
    <img src="ejemplos/imagen/imagen_3.jpg" align="middle" alt="imagen_3 de 108x75" 
    width="108" height="75" /> 
    y 20x27 píxeles 
    <img src="ejemplos/imagen/imagen_5.jpg" align="middle" alt="imagen_5 de 20x27" 
    width="20" height="27" />  
</p>
            
Resultado:

Imagen alineada con el margen superior del texto imagen_5 de 20x27

Imagen alineada con el margen inferior del texto imagen_5 de 20x27

El valor "middle" para algunos navegadores actuará alineando por el centro las imágenes con respecto al resto de las imágenes en la misma línea, mientras que para otros navegadores la alineación será con respecto al texto:

108x75 píxeles imagen_3 de 108x75 y 20x27 píxeles imagen_5 de 20x27

Agregar borde a una imagen <img border = "x"> (XHTML transicional)

Atributo de XHTML Transicional donde "x" es del tipo %Length para especificar el ancho del borde. Con CSS puede utilizar estilo para aplicar bordes con {border}.

Ejemplo <img border>

En este ejemplo mostramos una imagen sin borde y con borde de ancho 1 pixel.

<img src="ejemplos/imagen/imagen_5.jpg" alt="imagen_5.jpg" 
    width="20" height="27" />
<img src="ejemplos/imagen/imagen_5.jpg" border="1" alt="imagen_5.jpg" 
    width="20" height="27"/>

            
Resultado:
imagen_5.jpg imagen_5.jpg

Separación horizontal de una imagen <img hspace = "x"> (XHTML transicional)

Este atributo de XHTML Transicional con el valor "x" del tipo %Pixels sirve para añadir un espacio en píxeles en los dos bordes horizontales de la imagen. Verticalmente puede hacerlo con <img vspace>. Con CSS se puede agregar ese espacio con la propiedad {margin}.

Ejemplo <img hspace>

En el ejemplo siguiente hemos dispuesto una primera imagen alineada a la izquierda haciendo flotar el primer párrafo a su derecha, observando que el ancho de la separación de los bordes de la imagen es la mínima. A continuación dotamos a la siguiente imagen de un ancho de borde de 10 píxeles y observamos como se separa la imagen del borde izquierdo de la página y, de igual forma, del párrafo que está a su derecha.
<img src="ejemplos/imagen/imagen_3.jpg" align="left" />
<p>Párrafo primero</p>
<br clear="all" />
<img src="ejemplos/imagen/imagen_4.jpg" align="left" hspace="10" />
<p>Párrafo segundo</p>
<br clear="all" />
                
Resultado:
imagen_3

Párrafo primero


imagen_4

Párrafo segundo


Separación vertical de una imagen <img vspace = "x"> (XHTML transicional)

Este atributo de XHTML Transicional con el valor "x" del tipo %Pixels sirve para añadir un espacio en píxeles en los dos bordes verticales de la imagen. Horizontalmente puede hacerlo con <img hspace>. Con CSS se puede agregar ese espacio con la propiedad {margin}.

Ejemplo <img vspace>

En el ejemplo anterior con <img hspace> dimos separación horizontal, mientras que se observa que no hay separación vertical entre ambas imágenes. Para conseguirlo incluimos este atributo.
<img src="ejemplos/imagen/imagen_3.jpg" align="left" 
    alt="imagen_3" width="108" height="75" />
<p>Párrafo primero</p>
<br clear="all" />
<img src="ejemplos/imagen/imagen_4.jpg" align="left" 
    hspace="10" vspace="10" alt="imagen_4" 
    width="108" height="75"/>
<p>Párrafo segundo</p>
<br clear="all" />
            
Resultado:
imagen_3

Párrafo primero


imagen_4

Párrafo segundo


ÁREA DE IMAGEN <area>

HTML401 DTD-XHTML10T DTD-XHTML10S
Su contenido es vacío ( EMPTY) y no pertenece a ningún tipo definido, es decir, no es un elemento de flujo, pues los navegadores no representan visualmente este elemento. Esto es debido a que representa una zona o área parcial de otro elemento, normalmente una imagen, que es el verdadero elemento que se presenta visualmente en el flujo del documento. Su utilidad está en que sirve declarar los márgenes del área y especificar sus atributos con lo que el usario podrá interactuar con el área: href para vínculo, accesskey para tecla de acceso rápido, tabindex para tabulación, alt para texto alternativo y nohref para deshabilitar la interactuación con esa área.

Este elemento se maneja en conjunción con <map> asociado a alguno de los siguientes elementos: <img>, <object>, <input>. A efectos de explicar su funcionamiento, supongamos que lo asociamos con una imagen, exponiendo a continuación los pasos para su uso:

  1. Disponemos una imagen dada tal que queremos diferenciar varias zonas en la misma, con el objeto de que cada una de esas zonas sea una porción que visualmente se pueda interactuar con ella, es decir, cada zona será un vínculo a algún sitio. Incluimos esa imagen en el documento con <img usemap="#z" ... />, donde los puntos suspensivos representan el resto de atributos necesarios de la imagen y el atributo <img usemap> es una referencia última a un identificador para un mapa a usar según se explica en el siguiente punto. Se trata de un mapa de imagen en el lado del cliente, pues hemos usado el atributo <img usemap> en lugar de <img ismap>, que sería un mapa del lado del servidor.
  2. Posteriormente debemos realizar un mapa de esa imagen. Para ello disponemos del elemento <map id="z"> que dotamos del identificador "z" para significar que estamos mapeando aquella imagen. Su contenido estará formado por tantos elementos <area coords="a,b,c,..." shape="forma" /> como zonas querramos diferenciar según una forma a especificar delimitada por los valores a,b,c,....

En <area coords> exponemos un ejemplo completo usando una imagen como elemento asociado para su mapeado.

Dar forma a un área <area shape = "x">

El valor "x" es del tipo %Shape para dar forma a un área, pudiendo tomar los valores rect, circle, poly, default para formar un rectángulo, círculo, poligono o la región completa resepectivamente. El valor por defecto es rect. Ver un ejemplo de uso en <area coords>.

Coordenadas de un área <area coords = "x">

El valor "x" es del tipo %Coords para especificar las coordenadas de un área de una mapa.

Ejemplo <area coords>

En el ejemplo siguiente hemos realizado una imagen "zonas.jpg" definiendo tres zonas: un rectángulo, un círculo y un polígono. Mediante una aplicación editora de imágenes hemos determinado los siguientes puntos en píxeles para cada forma:

- Réctangulo: x1,y1,x2,y2 siendo (x1,y1) el borde superior izquierdo y (x2,y2) el borde inferior derecho

- Círculo: x,y,r siendo (x,y) el centro del círculo y r su radio

- Polígono: x1,y1,x2,y2,... , xn,yn donde cada pareja (xi,yi) es un punto que delimita los ángulos del polígono y además el primer punto debe ser igual al último para cerrar el polígono. Si no es así el navegador se encarga de cerrarlo.

Luego construimos el mapa dándole una referencia cualquiera como name="zonas" id="zonas" según se explica en el elemento <map> incluyéndole los elementos area definidos con las formas y coordenadas anteriores así como con vínculos de ejemplo. Finalmente insertamos la imagen haciendo referencia a su atributo <img usemap> para que se use el mapa de imagen anterior.

Entonces si pasamos el ratón por cada figura enlazaremos con un vínculo diferenciado y definido en cada área, que en este ejemplo nos abrirá una ampliación de la imagen del área.

<img src="ejemplos/imagen/zonas.jpg" usemap="#zonas" width="450" height="115" 
    alt="zonas.jpg" />                    
<map name="zonas" id="zonas">
    <area shape="rect" coords="14, 19, 140, 87" href="ejemplos/imagen/zonas1.jpg" 
        alt="ampliar rectángulo" />
    <area shape="circle" coords="211, 60, 52" href="ejemplos/imagen/zonas2.jpg" 
        alt="ampliar círculo" />
    <area shape="poly" coords="288, 18, 421, 18, 330, 53, 434, 97, 286, 
    99, 288, 18" href="ejemplos/imagen/zonas3.jpg" alt="ampliar polígono" />
</map>	

                
Resultado:
ampliar rectángulo ampliar círculo ampliar polígono
zonas.jpg

URL de un vínculo <area href = "URL">

Con "x" del tipo %URI, especificamos la ruta vinculada con el área.

Deshabilitar clic de un área <area nohref = "x">

Se trata de un tipo enumerado con un único valor nohref para deshabilitar la ruta vinculada cuando interactúemos con el área.

Ejemplo <area nohref>

En este ejemplo hemos deshabilitado el vínculo del área circular con nohref="nohref".
<img src="ejemplos/imagen/zonas.jpg" usemap="#zonas2" width="450" height="115"  
    alt="zonas.jpg"  />                
<map name="zonas2" id="zonas2">
    <area shape="rect" coords="14, 19, 140, 87" href="ejemplos/imagen/zonas1.jpg" 
        alt="ampliar rectángulo" />
    <area shape="circle" coords="211, 60, 52" nohref="nohref" 
        alt="ampliar círculo deshabilitado" />
    <area shape="poly" coords="288, 18, 421, 18, 330, 53, 434, 97, 286, 99, 288, 18" 
        href="ejemplos/imagen/zonas3.jpg" 
    alt="ampliar polígono" />
</map>	

            
Resultado:
ampliar rectángulo ampliar círculo deshabilitado ampliar polígono
zonas.jpg

Etiquetar un área <area alt = "x">

Valor del tipo %Text para indicar texto alternativo con un comportamiento igual que se usa en <img alt>.

Tecla de acceso rápido a un área <area accesskey = "x">

Valor del tipo %Character que se comporta igual que el genérico <E accesskey>.

Orden de tabulación <area tabindex = "x">

Valor del tipo %Number que se comporta igual que el genérico <E tabindex>.

Destino del vínculo de un área <area target = "x"> (XHTML transicional)

Valor del tipo %FrameTarget que se comporta igual que el expuesto en <a target>

MAPA DE IMAGEN <map>

HTML401 DTD-XHTML10T DTD-XHTML10S
Se trata de un elemento del tipo %special que puede contener uno o más de algunos de los tipos de elementos alternativos siguientes:
  • Elementos del tipo %block. Se trata de elementos de bloque que deberían a su vez incluir elementos de vínculo <a> para definir las áreas con sus propiedades shape y coords. Sin embargo, sí <map> contiene elementos de bloque y elementos <area> al mismo tiempo, éstos últimos deberían ser ignorados, pues o bien han de contener unos u otros pero no ambos. Entonces como <map> debe contener elementos de bloque, el navegador ha de presentarlos.
  • Elementos mezclados del tipo %misc. En este caso los elementos actuarán como bloque, por lo que han de contener a su vez elementos <a> tal como se comentó en el caso anterior.
  • Elementos <form>
  • Elementos <area>. Sirven para especificar las diversas áreas con sus atributos shape y coords en las que se divide un mapa dotándolas de las acciones propias de un vínculo. Como se dijo antes, si se mezclan contenidos de bloque y elementos <area>, éstos últimos serán ignorados. Por lo tanto en esta opción sólo se permiten elementos <area>, por lo que no hay necesidad de que el navegador los presente pues tienen contenido vacío.

Mapas de imagen en el lado del cliente

HTML401

Si un usuario interacciona con el ratón en un área de una imagen, las coordenadas son manejadas por el navegador en el ordenador del usuario, navegador que se encarga de seguir el vínculo especificado.

El elemento <map> define un mapa de imagen en el lado del cliente pudiendo ser asociado con los elementos <img>, <object> y <input>. Recordemos que el elemento <object> se usa para presentar también imágenes como lo hace el elemento <img>, siendo equivalente en este aspecto. La asociación entre <map> y los elementos señalados antes se declara con el atributo <usemap> de éstos (ver por ejemplo <img usemap>).

Mapas de imagen en el lado del servidor

HTML401

Si un usuario interacciona con un área de un mapa de imagen, las coordenadas son enviadas al servidor situado en la ruta del elemento-atributo <a href>. El servidor maneja esas coordenadas para averiguar el vínculo que le corresponde y realizar su seguimiento. Es preferible cuando el mapa de imagen es demasiado complejo para ser tratado en el navegador del usuario. Sólo pueden asociarse con <img> que debe de estar contenido dentro de un elemento <a> y, por otro lado también se asocia con <input> que debe ser del tipo image.

Ejemplo: Mapa de imagen al lado del cliente asociado con una imagen en <img> y usando <area> para definir las zonas.

Este ejemplo es igual al expuesto en <area coords> donde se explica con detalle. Hemos asociado el mapa con un elemento de imagen <img>. Las zonas se definen con elementos <area>, observándose que estos elementos no producen ningún resultado visual.
<img src="ejemplos/imagen/zonas.jpg" usemap="#mp0" width="450" height="115" 
    alt="zonas.jpg" />             
<map name="mp0" id="mp0">
    <area shape="rect" coords="14, 19, 140, 87" href="ejemplos/imagen/zonas1.jpg" 
        alt="ampliar rectángulo"/>
    <area shape="circle" coords="211, 60, 52" href="ejemplos/imagen/zonas2.jpg" 
        alt="ampliar círculo" />
    <area shape="poly" coords="288, 18, 421, 18, 330, 53, 434, 97, 286, 99, 
        288, 18" href="ejemplos/imagen/zonas3.jpg" alt="ampliar polígono" />
</map>	

        
Resultado:
zonas.jpg
ampliar rectángulo ampliar círculo ampliar polígono

Este ejemplo funciona según lo esperado en Explorer, Firefox, Opera y Safari.

Ejemplo: Mapa de imagen al lado del cliente asociado con una imagen en <img> y usando <a> visibles para definir las zonas.

Asociamos el mapa con un elemento <img> y usando elementos <a> dentro de un bloque de párrafo para definir las zonas. Se observa que ahora se puede acceder a los vínculos desde las zonas de la imagen y también desde los propios vínculos.
<img src="ejemplos/imagen/zonas.jpg" usemap="#mp1" width="450" height="115" 
    alt="zonas.jpg" />              
<map name="mp1" id="mp1">
   <p>También se puede acceder a las zonas con:
        <a shape="rect" coords="14, 19, 140, 87" 
            href="ejemplos/imagen/zonas1.jpg">Rectángulo</a>
        <a shape="circle" coords="211, 60, 52" 
            href="ejemplos/imagen/zonas2.jpg">Círculo</a>
        <a shape="poly" coords="288, 18, 421, 18, 330, 53, 434, 97, 
            286, 99, 288, 18" href="ejemplos/imagen/zonas3.jpg">Polígono</a>
   </p>
</map>            
        
Resultado:
zonas.jpg

También se puede acceder a las zonas con: Rectángulo Círculo Polígono

Este ejemplo no se ejecuta correctamente en Explorer y Safari, pero sí lo hace en Firefox y Opera.

Ejemplo: Mapa de imagen al lado del cliente asociado con una imagen en <object> y usando <a> visibles para definir las zonas.

Este caso es igual que el anterior, pero asociando el mapa con un <object> del tipo image/jpg y, como antes, usando <a> para definir las zonas.
<object data="ejemplos/imagen/zonas.jpg" usemap="#mp2" type="image/jpeg" 
    width="450"height="115" >
</object>              
<map name="mp2" id="mp2">
    <p>También se puede acceder a las zonas con:
        <a shape="rect" coords="14, 19, 140, 87" 
            href="ejemplos/imagen/zonas1.jpg">Rectángulo</a>
        <a shape="circle" coords="211, 60, 52" 
            href="ejemplos/imagen/zonas2.jpg">Círculo</a>
        <a shape="poly" coords="288, 18, 421, 18, 330, 53, 434, 97, 
            286, 99, 288, 18" href="ejemplos/imagen/zonas3.jpg">Polígono</a>
    </p>
</map>            
        
Resultado:

También se puede acceder a las zonas con: Rectángulo Círculo Polígono

Este ejemplo no se ejecuta correctamente en Explorer y Safari, pero sí lo hace en Firefox y Opera.

Ejemplo: Mapa de imagen al lado del cliente asociado con una imagen en <object> y usando <a> ocultas para definir las zonas.

Si en el caso anterior no quisiéramos que el acceso a través de <a> fuera visible, podemos encerrar el elemento <map> dentro del elemento <object>. Veáse que esto no puede hacerse con <img> pues es un elemento con contenido vacío.
<object data="ejemplos/imagen/zonas.jpg" usemap="#mp3" type="image/jpeg" 
    width="450" height="115" >           
    <map name="mp3" id="mp3">
        <p>También se puede acceder a las zonas con:
            <a shape="rect" coords="14, 19, 140, 87" 
                href="ejemplos/imagen/zonas1.jpg">Rectángulo</a>
            <a shape="circle" coords="211, 60, 52" 
                href="ejemplos/imagen/zonas2.jpg">Círculo</a>
            <a shape="poly" coords="288, 18, 421, 18, 330, 53, 
                434, 97, 286, 99, 288, 18" 
                href="ejemplos/imagen/zonas3.jpg">Polígono</a>
        </p>
    </map>	
</object>             
        
Resultado:

También se puede acceder a las zonas con: Rectángulo Círculo Polígono

Este ejemplo no se ejecuta correctamente en Explorer y Safari, pero sí lo hace en Firefox y Opera.

Nombre del mapa <map name = "x">

Atributo del tipo NMTOKEN equivalente a el atributo genérico <E id>. Cada mapa de una página debe tener un nombre distinto. Para garantizar su funcionamiento con versiones de HTML que no soporten el atributo id, conviene identificarlo de las dos formas, por ejemplo <map name="mapa_1" id="mapa_1">.