Algumas imagens num site Web podem torná-lo mais atractivo e mais convivial. Não obstante, é importante não exagerar, porque as imagens podem implicar um tempo de carregamento bastante longo e podem em certos casos prejudicar a legibilidade.
A baliza IMG da linguagem HTML permite inserir imagens numa página HTML. A imagem pode estar situada no mesmo servidor que a página na qual é inserida mas igualmente num outro servidor especificando a sua URL completa.
Só os seguintes formatos de imagens são aceites em standard nas especificações do W3C:
Os principais atributos da marca IMG são os seguintes :
Assim, para inserir uma imagem, será necessário introduzir uma baliza do tipo:
<IMG SRC="url_de_l_image" ALT="Texto que substitui a imagem" TITLE="Texto a afixar">
| Atributo | Valor | Resultado | Efeito Visual |
|---|---|---|---|
| ALIGN | bottom
center left middle top right | Alinhamento da imagem. | |
| ALT | Texto alternativo no caso de a imagem não aparecer. | ||
| BORDER | Número inteiro | Números pixéis da cercadura. A cor da cercadura pode ser definida pelo atributo LINK ou TEXT da baliza <BODY>. Por defeito, o atributo BORDER vale 1, o que cria um pequeno quadro em redor da imagem. Para evitar isto, lembre-se de o definir como igual a 0. |  |
| HEIGHT | Número inteiro | Altura da imagem (em pixéis ou %). Quando este atributo precisa uma dimensão diferente da dimensão original do gráfico, o navegador redimensiona-o dinamicamente, o que pode provocar uma afixação de pior qualidade. |  |
| HSPACE | Número inteiro | Números pixéis de ajustamento entre a imagem e o texto adjacente (horizontalmente). |  |
| LONGDESC | URL da descrição da imagem. | ||
| LOWSRC | URL | Imagem alternativa (geralmente mais pequena) mostrada durante o tempo que a verdadeira imagem levar a ser carregada pelo navegador. |  |
| NAME | Permite definir um nome para a imagem. Este atributo é útil nomeadamente para a gestão das imagens em JavaScript. | ||
| SRC | URL | URL da imagem | |
| TITLE | Texto alternativo no caso de a imagem não aparecer. | ||
| USEMAP | URL ou nome da âncora que define a imagem recativa. | ||
| VSPACE | Números pixéis de ajustamento entre a imagem e o texto (verticalmente). | Ensaio de texto
 | |
| WIDTH | Número inteiro | Amplitude da imagem (em pixéis ou %). Quando este atributo precisa uma dimensão diferente da dimensão original do gráfico, o navegador redimensiona-o dinamicamente, o que pode provocar uma afixação de pior qualidade. |  |
As imagens inserem-se no texto como um carácter, assim parece impossível mostrar-se texto ao longo de uma imagem.
Existem com efeito várias maneiras de o fazer. Vamos ver duas :
É possível criar zonas clicáveis mesmo dentro de uma imagem graças ao atributo USEMAP, utilizado conjuntamente com a baliza MAP.
O atributo USEMAP da baliza <IMG> aponta para uma baliza <MAP> que contém a descrição do corte da imagem em zonas clicáveis.
A baliza <MAP> tem um atributo NAME que define o seu nome (NAME= " nome ") e contém as zonas clicáveis declaradas graças a balizas AREA.
| Baliza | Atributo | Valor | Efeito Visual |
|---|---|---|---|
| MAP | NAME | ||
| AREA | SHAPE | RECT
CIRCLE
POLY | Rectângulo (as suas coordenadas são: “abcissa sup esquerdo, ordenado sup esquerdo,abcissa inf direito, ordenada inf direito ")
Círculo (as suas coordenadas são : “abcissa centro, ordenada centro, raio”)
Polígono (as suas coordenadas são: “a sequência das coordenadas separadas por vírgulas ") |
| HREF | URL | Relação para o URL | |
| COORDS | "XX,XX,XX,XX" | Contem as côordenadas da zona cliquable, separadas por vírgulas. |
Eis abaixo um exemplo de imagem reactiva :
<IMG SRC="images/image.gif"
WIDTH=150
HEIGHT=70
USEMAP="#Map">
<MAP NAME="Map">
<AREA SHAPE="rect"
HREF="debut.html"
COORDS="0,0,48,28">
<AREA SHAPE="circle"
HREF="precedent.html"
COORDS="50,30,10">
<AREA SHAPE="poly"
HREF="suivant.html"
COORDS="60,50,80,30,100,40,50,100">
</MAP>