Las imágenes con otra de las caracteríscicas del lenguaje HLTM que le confieren la característica de Hipermedia.
La etiqueta que se utiliza para las imágenes es
<img />
Los atributos obligatorios en XHTML 1.0 (la versión "integrista" del HTML) son:
- src, indica la ruta de la imagen
- alt, muestra el texto alternativo cuando la imagen no se puede cargar.
Ejemplo:
<img src="img/logo.gif" alt="logo de la empresa" />
Atributos opcionales:
- width y height, definen las dimensiones de la imagen, el ancho y el alto
- longdesc, url de la página en la que se proporciona una descripción larga de la imagen.
- ismap y usemap, se usan para definir mapas de imágenes.
Atributos obsoletos:
- align, border, hspace, vspace (desacondejados, utilizar CSS en su lugar)
Otros usos desaconsejados de las imágenes, por ser recomensable el uso de CSS.
- imagen de fondo de una página, <body background="">
- imagen de fondo de una tabla, <table background="">
Las imágenes se pueden encontrar en el mismo directorio que el documento html que la contiene o pueden encontrarse en una ubicación externa, en cuyo caso indicaremos la url.
- Mismo directorio:, <img src = "mifoto.jpg" alt = "fotografía del autor" />
- Otro directorio o externo, <img src ="http://www.fernandoharo.es/imagenes/mifoto.png" />
Formatos gráficos que se pueden emplear con la etiqueta <img>
El standard HTML no da una lista de formatos de imagenes soportadas, esto es competencia de los navegadores. Los más utilizados son:
- JPG, GIF(incluidos gif animados) y PNG
GIF, es el formato más antiguo, sus características más importantes son:
- soporta paletas de hasta 256 colores
- permite transparencias de un solo color
- permite realizar animaciones
Se puede utilizar la técnica de
dithering para representar colores reales con una paleta de sólo 256.
La tecnica consiste en combinar pequeños cuadros muy próximos de dos colores para simular un tercero.
JPG/JPEG, es el formato más popular en la red
- permite trabajar hasta con 16 millones de colores.
- archivos pequeños mediante algoritmos de compresión con pérdidas.
- no permite transparencias
PNG, creado especificamente para la web.
- máxima calidad sin perdidas
- mayor tamaño que el formato JPG
Mapas de imagen
También conocidas como imágenes sensibles, contiene zonas activas que son enlaces.
se pueden procesar en el lado del cliente (
usemap) o en el lado del servidor (
ismap).
Mapa de imagen del cliente, el más utilizado:
<map name ="">
- map, define el mapa de imagen con sus distintas zonas activas.
- el nombre se utilizará en la etiqueta <img> para relacionar el mapa de imagen con la imagen correspondiente.
<img usemap ="">
En el atributo usemap se indica el nombre del mapa que se va a utilizar.
- cada zona activa se define con una figura geométrica,
- existen 3 figuras geométricas que se pueden utilizar
<area shape="" coords="" href="" alt="">
- shape, indica la figura geométrica a utilizar.
- coords, las coordenadas de la figura geométrica.
- href, para indicar la url del destino del enlace.
- alt, texto alternativo que representa a la figura geométrica en el caso de que no se pueda visualizar la imagen.
Tipos de áreas:
- Rectángulo, shape="rect" coords="x1,y1,x2,y2" Atención !!! (x1,y1) son las coordenadas de la esquina superior izquierda y (x2,y2) son las coordenadas de la esquina inferior derecha. En HTML la esquina superior izquierda tiene coordenadas (0,0).
- Círculo, shape="circle" coords="x,y,r" , x, y son las coordenadas del centro y r es el radio.
- Polígono, shape="poly" coords="x1,y1,x2,y2,...,xn,yn2 las coordenadas son las de los vértices del polígono.
En la página de
W3C schools podemos encontrar un ejemplo práctico de mapas.
código del ejemplo:
<img src="planets.gif"
width="145" height="126"
alt="Planets"
usemap="
#planetmap">
<map
name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
Hay que prestar atención al detalle del símbolo almohadilla al hacer referencia al mapa en usemap.
Algunos usos de los mapas:
- en mapas geográficos.
- en barras de navegación con iconos.
- en imágenes de una página principal
La información se ha extraido de este
video del curso idesweb
+18.34.50.png)
+18.46.25.png)
+18.52.02.png)
+18.56.09.png)
+18.58.59.png)
+19.05.57.png)
+21.07.51.png)
+20.57.56.png)
+22.35.28.png)
+18.49.09.png){kind=link}