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.
<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.
- align, border, hspace, vspace (desacondejados, utilizar CSS en su lugar)
- 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
- soporta paletas de hasta 256 colores
- permite transparencias de un solo color
- permite realizar animaciones
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
- 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 ="">
- 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>
<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
No hay comentarios:
Publicar un comentario