Cerrar

Enviar mensaje

twitter FaceBook You Tube Git Hub Docs.com Enviar email

Manual de HTML5 y CSS3

[5]
Imágenes

Publicidad

[5.1] introducción al uso de imágenes

Las imágenes son fundamentales para que una página web sea más atractiva. Son el primer contenido no textual que se planteó poder incorporar al estándar HTML. Prácticamente no hay páginas sin imágenes.

Los navegadores tienen capacidad de mostrar imágenes, pero sólo las que pertenezcan a tipos concretos. Los tipos de imágenes reconocidos por la mayoría de navegadores son:

Descartando a las imágenes SVG, el tamaño en disco de las imágenes puede ser mayor o menor dependiendo de su tamaño y su compresión. De modo que un tamaño grande implica más tardanza al cargar la página, pero una mayor nitidez en la imagen.

Las imágenes son fundamentales en las páginas web, su elección resulta vital para la estética de la misma, nunca se considera un mero acompañamiento ya que el impacto visual y las sensaciones sobre la profesionalidad de la página siempre le consiguen las imágenes con ayuda de la tipografía (pero ahí ya entra el lenguaje CSS) y la disposición o maquetación (para lo que también necesitamos CSS).

[5.2] añadir imágenes con elñ elemento img

[5.2.1]inserción de imágenes

Las imágenes se colocan mediante la etiqueta img. El atributo src indica la URL (relativa o absoluta) a la imagen. Ejemplo:

<img src=”imagenes/boton.gif”>

img es una etiqueta sin cierre, la imagen se coloca directamente en la posición de esta etiqueta. Se la considera como texto al maquetarla. De modo que aparece entre el texto si ponemos la etiqueta entre el texto. Colocar de forma adecuada las imágenes respecto al texto es todo un arte que se consigue (una vez más) con ayuda de CSS.

[5.2.2]atributos de la etiqueta img

atributo

significado

alt

Obligatorio. Indica un texto alternativo. Ese texto aparece cuando la imagen no se ha podido cargar (o durante la carga). También suele aparecer cuando arrimamos el cursor a la imagen a fin de informarnos sobre ella.

Es un texto también tenido en cuenta por los buscadores a fin de identificar lo que muestra la imagen.

Deberíamos tomarnos este atributo como obligatorio

width

Anchura de la imagen. No es aconsejable usarle para cambiar el tamaño de la imagen, ya que si la ampliamos no se verá en buena calidad y si la reducimos estaremos cargando una imagen grande para luego mostrarla en pequeño; sería más inteligente reducirla primero con un editor de imágenes.

En cualquier caso es importante utilizar este atributo (junto con height) para que el navegador sepa de antemano el tamaño de la imagen y así que prepare la página correctamente. De este modo si la imagen no se carga, al menos veremos el rectángulo que la misma ocuparía y la página no se desbarata.

height

Altura de la imagen. Tiene las mismas connotaciones que el atributo anterior.

[5.3] mapas de imagen

[5.3.1]introducción

Se trata de una técnica que permite dividir en trozos a una imagen, de modo que podremos asignar un enlace a cada trozo.

Se utiliza en mapas propiamente dichos, en los que el usuario selecciona regiones del mapa y en imágenes donde hay elementos claramente destacados que al hacer clic nos permitan ir a una nueva URL.

Hoy en día está en desuso ya que el uso del lenguaje JavaScript ofrece capacidades muy superiores a los mapas de imágenes; pero la ventaja de los mapas es que no requieren conocer ningún lenguaje aparte de HTML

[5.3.2]uso

12elemento map

Los mapas se basan en una imagen previamente colocada en la página web mediante la etiqueta img. A partir de esa imagen se crea un elemento nuevo en la página de tipo map.

El elemento map al menos debe indicar estos atributos:

13atributos para mapas en el elemento img

Por otro lado, en la etiqueta img asociada a la imagen del mapa se debe utilizar este atributo:

También es posible usar un segundo atributo (apenas se usa en la práctica)

14elemento area

Con los elementos img y map sólo se está indicando que la imagen es un mapa, pero falta decir qué zonas tiene el mapa y qué hacer cuando se hace clic en ellas. Esa es la labor de los elementos de tipo area.

La etiqueta map debe contener dentro tantos elementos area como secciones en el mapa queramos crear. En cada elemento area rellenaremos estos atributos:

[5.3.3]ejemplo de mapa

En la siguiente imagen se detallan las coordenadas necesarias para hacer un mapa con tres áreas sobre la imagen siguiente. Como se observa, aunque es una sola imagen, se distingue muy bien visualmente lo que va a ser cada área

Si deseamos que al hacer clic en el cuadrado, el círculo y la forma libre saltemos a una URL, necesitamos conocer las coordenadas que tienen estas formas (en esto nos pueden ayudar los programas de retoque gráfico como Adobe Photoshop o Adobe Fireworks). En esta imagen se muestran las coordenadas necesarias:

El código HTML para hacer el mapa sería (suponiendo que la imagen se llama formas.jpg):

<img  src=”formas.jpg” alt=”Formas geométricas básicas” usemap=”#formas”ismap=”ismap”>
<map
name=”formas” id=”formas”>
<area shape=”rect” coords=”62,65,171,177”
 				href=”rectangulo.html”alt=”Rectángulo”>
<area shape=”circle” coords=”369,116,84”
			href=”circulo.html” alt=”Círculo”>
<area shape=”poly”
coords=”113,308,242,230,401,252,556,157,463,324,287,284”
href=”poligono.html” alt=”Polígono” />
</map>

El uso del atributo id en el elemento map no es obligatorio para que el mapa funcione, pero sí es necesario para cumplir las nuevas normas HTML donde se intenta retirar el atributo name para sustituirle por id (aunque los mapas siguen funcionando con el atributo name); es decir se aconseja para una posible compatibilidad futura.