[Resolvido] Imagem com onover

[RafiWskY 2]

Bom dia, tenho a imagem abaixo com um efeito onmouseover, porém dessa forma não estou conseguindo inserir o alt="" na tag, existe uma melhor maneira de fazer o que estou pretendendo ?

 

<a href="#"><img src="images/icones/facebook.png" onmouseover="this.src='images/icones/facebook_over.png'" onmouseout="this.src='images/icones/facebook.png'" /></a>

 

Obrigado.

[Guilherme Oderdenge 42]

Com certeza há. O que você está fazendo aí é quase que loucura, rapaz.

 

Este efeito pode ser facilmente feito com CSS.

 

Para isso, o seu .HTML deve ficar assim:

<a href="#"><div class="facebook"></div></a>

E no .CSS:

.facebook {
  background-image: url('images/icones/facebook.png');
  width: 200px; // Largura (em pixels) da sua imagem
  height: 100px; // Altura (em pixels) da sua imagem
  display: block; // Serve para forçar a exibição da imagem
}
.facebook:hover {
  background-image: url('images/icones/facebook_over.png');
}

O seletor :hover, em CSS, significa "ao passar o mouse". Em outras palavras, quando passarmos o mouse na camada com a classe facebook, chamaremos então a regra com o seletor :hover e então o seu efeito será executado.

 

Conseguiu entender? :thumbsup:

[ricardo_mc 19]

Dá até pra deixar mais leve ainda. Pegue esse código que ele postou acima e retire a div.

 

Ficaria:

 

<a href="#" class="facebook"></a>

 

Agora repare em uma coisa. Tanto da forma que eu falei, quanto a que o Guilherme falou, não dá pra colocar o elemento "alt", pois ele é exclusivo da tag <img>. Você pode colocar "title", mas não "alt". Se isso for necessário para você, então temos que ver outra forma.

[Guilherme Oderdenge 42]

Realmente, Ricardo, não tinha pensado em fazer isso que você sugeriu. Valeu! :thumbsup:

[RafiWskY 2]

Pô... Eu realmente tinha pensado em fazer no css, porém eu fiquei com uma pulga atrás da orelha se seria o correto. O elemento alt="" não se faz tão importante.

 

Muito obrigado Guilherme e Ricardo.

 

Abraço.

[ricardo_mc 19]

Normalmente a preocupação com o "alt" é relativo ao SEO, mas temos que ver que não são todos os casos que isso se torna fundamental.

 

Eu mesmo quase não uso a tag <img>, na maioria dos casos é CSS Sprite mesmo. Só uso a <img> para fotos ou para a Logomarca do site, porque nesse caso vale usar as potencialidades do <img> para SEO, como o "alt", "title" e o próprio nome do arquivo, sem contar que assim a logo aparece no Google Imagens.

[RafiWskY 2]

Normalmente a preocupação com o "alt" é relativo ao SEO, mas temos que ver que não são todos os casos que isso se torna fundamental.

 

Eu mesmo quase não uso a tag <img>, na maioria dos casos é CSS Sprite mesmo. Só uso a <img> para fotos ou para a Logomarca do site, porque nesse caso vale usar as potencialidades do <img> para SEO, como o "alt", "title" e o próprio nome do arquivo, sem contar que assim a logo aparece no Google Imagens.

 

Então, eu andei estudando um pouco de SEO, e através de um site que valida o código que disse estar faltando o alt="" é que surgiu esse tópico.

 

Você exceto no caso do logo como explicou, em todos os outros casos aplica as imagens dessa forma, pelo css ? O que seria CSS Sprite ?

 

Obrigado.

[ricardo_mc 19]

Eu só uso a tag <img> quando quero chamar atenção do SEO pra algo importante. No caso, faço isso com as logos principalmente, mas se houver a necessidade, posso fazer com outras coisas. Isso varia da importância que cada item tem.

 

Apenas uma observação. O "alt" ajuda, mas não é o grande diferencial do SEO.

 

CSS Sprite é uma forma de juntar muitas imagens em uma única imagem e chamá-las pelo "background" do CSS.

 

Dá uma olhada nesse site aqui, ele explica algumas coisas.

http://www.maujor.com/tutorial/css-sprites.php

[RafiWskY 2]

Perfeito Ricardo, muito obrigado.