6 de abril de 2007

Image-Replacement

Introdução


Você já deve ter escutado falar sobre image-replacement,que é uma técnica de substituir um texto por uma imagem.Imagine que
você queria colocar um logo na pagina.Mas e se por algum problema a imagem nao aparecer? Se você tiver colocado o artributo alt
vai aparecer um texto sem formatação nenhuma e não vai dar a enfase que um logo da. Com image-replacement voce poe o texto dentro de uma tag de formatação (ex: um h1) e se a imagem nao aparecer vai aparecer o texto com a formatacao do seu h1.


Essa eh uma das vantagens de usar image-replacement,ainda tem a de usar menos código (eh um codigo para varias paginas),
facilidade de manuntencao,etc.


XHTML



Vamos usar o exemplo do h1:

<h1 id="logotipo"> W3CSS </h1>

Um simples titulo que vai ser trocado por uma imagem

CSS



Vou colocar o codigo e depois eu explico:

h1#logotipo {
text-indent:-90000px;
overflow:hidden;
background: url('imagens/logotipo.jpg') no-repeat;
width:200px;
height:200px;
}

1ª Linha >O Seletor, tambem pode usar soh o #logotipo que vai funcionar.
2ª Linha > A propriedade text-indent eh pra definir a indentacao do texto.Um exemplo classico eh quando a professora mandava colocar "dois dedinhos" antes de cada paragrafo.Mas a indentacao aqui eh negativa entao o texto vai pra tras ate que some.
3ª Linha > O overflow:hidden; eh soh pra terminar de sumir com o texto.Se a resolucao de alguem for maior de 90000px o texto some.EU acho essa linha opcional,mas muitos usam entao eu deixei ela ai.
4ª Linha > Isso eh que vai colocar a imagem como plano de fundo mais como o texto sumiu entao ela vai aparecer sozinha,o no-repeat eh pra ela nao se duplicar.
5ª Linha > Largura da imagem,200px foi um exemplo.
6ª Linha > Altura da imagem,200px foi um exemplo.

Bom pessoal,eh isso ai se vocês nao entenderam ou tiver algum erro no codigo deixem nos comentários

Mais Links :
Image-replacement: Use com cuidado
Mais 6 Técnicas de image-replacement.
Dicas para a tecnica de Dave Shea.
Sem usar o span
Tudo sobre Image-replacement

0 comentários: