TecCodigos

tag img - inserção de imagens
<img> é a tag identificadora de imagem. vai acompanhada de um atributo
fundamental src, que indica o caminho onde se encontra o arquivo que
contém a imagem. a tag <img> pode vir acompanhada de diversos
parâmetros:
· localização da imagem (src): especifica o endereço da imagem a ser
inserida na página. normalmente, as imagens têm terminação .gif ou .jpg;
· texto alternativo (alt): é um texto alternativo para a imagem, utilizado
principalmente para aqueles browsers que não permitem mostrar imagens. o
texto acompanhado do alt aparecerá no espaço correspondente ao da
imagem e também quando o usuário passar o mouse por cima da imagem;
· tamanho da borda (border): especifica o tamanho da borda, em pixels. os
números têm de ser inteiros (entre 0 e 99). toda vez que utilizamos uma
imagem para estabelecer um link, automaticamente o browser acrescenta
borda à imagem. se quiser eliminá-la, indique com o atributo border="0";
· alinhamento da imagem (align): alinha a imagem à esquerda (left), direita
(right), ao centro (middle), no topo da página (top) ou no pé da página
(bottom);
· altura em pixels (height): especifica a altura da imagem, em pixels. caso
este atributo não esteja presente na tag <img>, a imagem será carregada
em seu tamanho natural;
· largura em pixels (width): especifica a largura da imagem, em pixels. caso
este atributo não esteja presente na tag <img>, a imagem será carregada
em seu tamanho natural;
· espaçamento horizontal (hspace): especifica um espaço em branco a ser
deixado entre as bordas esquerda e direita da imagem, em pixels. ou seja, os
textos que forem escritos ao redor da imagem não ficarão grudados nela;
· espaçamento vertical (vspace): especifica um espaço em branco a ser
deixado entre o topo e o pé da imagem, em pixels. ou seja, os textos que
forem escritos ao redor da imagem não ficarão grudados nela;
veja, logo abaixo, uma tag de imagem e o resultado gerado:
<img src="figura.gif" width="73" height="60"
border="2" alt="exemplo de tag img"
align="middle">
trabalhando com grandes imagens
muitas vezes gostaríamos de colocar uma imagem grande em uma página e
esquecemos como isso pode se tornar um pesadelo para quem estiver
navegando pelo site, pois se durante o carregamento da imagem a linha
travar, o internauta provavelmente dará um reload, assim a imagem grande
terá que ser carregada novamente por inteiro porque uma parte dela não
apareceu. isso acontece principalmente com imagens muito grandes do tipo
.gif se comparadas ao formato jpeg.
um dos recursos mais utilizados para resolver o problema é cortar a imagem
em vários pedaços menores porque se o internauta der reload na página não
será preciso carregar toda imagem novamente, mas sim apenas a parte que
não foi carregada.
a imagem pode ser dividida em 2, 3, 4 partes, etc… o único requisito é que
sejam partes retangulares. por que retangulares? porque para juntarmos
todos os pedaços é necessário utilizar uma tabela.
o segredo para não deixar o espaço que normalmente aparece quando se usa
as tabelas é colocar zero nos seguintes atributos que são pouco conhecidos,
mas que fazem grande diferença:
<table border="0" cellspacing="0" cellpadding="0">
· border: define a largura da border entre as células
· cellspacing: define o espaço entre as células da tabela
· cellpadding: define o espaço entre o conteúdo da célula e a borda da
mesma