24/08/2010

Efeito na tag Alt - Personalizar texto sobre a imagem

Veja como criar um efeito na tag alt, aquela que faz aparecer um texto quando colocamos o mouse sobre uma imagem. E o melhor é um código fácil de ser utilizado no blog. Com esse código o texto que aparece seguirá os movimentos do mouse sobre a foto. Além disso, podemos formatar o texto, escolher a cor da caixinha da caixinha de texto alt.

efeito na tag alt
Entre na pagina designer, adicionar gadget, html/javascript e coloque o código abaixo:

<style type="text/css">
<!--
#tt {
font-size: 11px;
font-family: Verdana, Arial, sans-serif;
position:absolute;
display:block;
}
#tttop {
display:block;
height:5px;
margin-left:5px;
overflow:hidden;
}
#ttcont {
display:block;
padding:2px 7px 3px 7px;
margin-left:5px;
background:#1F164C;
color:#FFF;
}
#ttbot {
display:block;
height:5px;
margin-left:5px;
overflow:hidden;
}
-->
</style>
<script language='javascript' type='text/javascript'>
var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);
},
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
</script>


Depois é só alterar os links das imagens usando esse modelo de código:

<a href="endereço da pagina" target="_blank" onmouseover="tooltip.show('Anúncie Aqui!');" onmouseout="tooltip.hide();" ><img src="endereço da imagem" border="0" /></a>

Veja quais alterações você pode fazer neste código:
Mudar a cor do texto e fundo da tag alt, veja neste trecho do código:
#ttcont {
display:block;
padding:2px 7px 3px 7px;
margin-left:5px;
background:#1F164C; - Mudar a cor de fundo
color:#FFF; - Trocar a cor da letra (fonte)

Aqui você pode ver o código das cores e alterar como desejar. Na outra parte do código aquela que vai na imagem só troque o endereço da pagina e da imagem e o texto anuncie aqui, mas cuidado para não apagar os sinais '' que estão junto do texto senão o código não funcionará.

Lembre-se esse efeito só funciona nas imagens que alterar o código da imagem, ele não funciona automaticamente para todas as imagens. A primeira parte do codigo só precisa ser colocada uma vez depois pode alterar e colocar o código em quantas imagens desejar.

Demonstração do efeito da tag alt seguindo o ponteiro do mouse


Esse código pedimos e tivemos autorização para retirar do blog Mundo Curioso, o video para demonstração do código também fizemos no mesmo site.

Related Posts with Thumbnails

52 comentários:

  1. cara, ficou muito bom, ótima dica!

    agora queria saber o que fazer para, quando passar o cursor em alguma imagem linkada, aparecer uma borda.

    ResponderExcluir
  2. Tuma
    você quer a borda na imagem? como fazemos aqui no dicas para blogs?

    passe o mouse sobre a imagem que publicamos nesta postagem e verá que a borda muda, o código para fazer isso é:

    .post img{border: 1px solid #6699FF;padding: 1px;}

    .post a:hover img{border: 1px dashed #000000;}

    se quiser que apareça a borda somente quando passar o mouse sobre a imagem, use uma borda de cor igual ao fundo da sua pagina, porque se colocar somente borda no estilo ahover, a imagem dá um "pulo" quando passa o mouse, devido ao espaço que a borda ocupa, veja aqui outros estilos de bordas

    ResponderExcluir
  3. Muito bom o Tutorial :D

    Rafael Belomo.

    ResponderExcluir
  4. uma otima dicas. cara voce poderia me ajudr sabe tipo queria por um texto dentro de uma imagem tem como? ja vi muito blog fazerem isso e quera saber como ele fazem. obrigado

    ResponderExcluir
  5. Anônimo, para escrever sobre uma imagem você precisa de um programa para editar imagens, veja aqui:
    Programas Gratuitos para Edição de Imagens

    ResponderExcluir
  6. Noossa etava procurando muito esse código...
    Obrigado Dicas para Blogs e valew ae pro Rafael por ter cedido o código.

    Vou emplementar esse código em meu blog...

    *Uma dúvida esse código deixa mais lenta a pagina?

    ResponderExcluir
  7. Morcegando
    qualquer código que colocar no seu blog deixa a pagina mais lenta, precisa fazer o teste e ver se acha que vale a pena.

    mas esse código não parece dar diferença na velocidade da pagina

    ResponderExcluir
  8. Que beleza essa dica.Vou tentar!Obrigado,chica

    ResponderExcluir
  9. aff nem gostei pois eu tambem uso esse codigo agora vou ter que modifica-lo mais boa idéi a

    ¬¬ e ele não deixa a pagina pesada não oq deixa sua página pesada é o conteudo que vc coloca nela as imagens
    então boa sorte

    ResponderExcluir
  10. valeu fabiano, era isso que eu queria, mas como coloco somente na sidebar?

    ResponderExcluir
  11. Tuma
    do mesmo jeito que coloca em qualquer outro lugar, precisa inserir os códigos em cada imagem que for utilizar esse código, como mostramos no modelo

    ResponderExcluir
  12. não cara, eu estava falando a respeito do meu outro comentário! (o primeiro comentário postado, por um acaso):
    "cara, ficou muito bom, ótima dica!

    agora queria saber o que fazer para, quando passar o cursor em alguma imagem linkada, aparecer uma borda."


    eu queria saber como fazer isso somente na sidebar.

    ResponderExcluir
  13. é aquilo que respondemos alguns comentários antes deste, sobre criar o estilo .post img, mas se quiser para a sidebar use; .sidebar img

    ResponderExcluir
  14. eu bem que tinha tentado isso, mas eu estava errando um pouco no código, agora eu consegui. valeu cara, você e seu blog são dez!

    ResponderExcluir
  15. Eu estava procurando algo assim...
    Muito obrigado !

    ResponderExcluir
  16. no elemento HTML/JavaScrip deu tudo certo. Mas e se for numa DIV dentro do código HTML, como poderia fazer?

    ResponderExcluir
  17. dentro do código html do blogger seria muito dificil aceitar esse código todo

    ResponderExcluir
  18. para fazer com link de texto use title em vez de alt, assim:

    <a href='http://www.dicasparablogs.com.br/2010/08/efeito-na-tag-alt-personalizar-cor-da.html' title='Efeito na tag Alt - Personalizar texto sobre a imagem'>Efeito na tag Alt - Personalizar texto sobre a imagem</a>

    ResponderExcluir
  19. Caramba faz um tempão q esotu procurando isso !
    Me ajudou muito !
    Muito Obrigado !
    Parabéns pelo Blog

    ResponderExcluir
  20. Muito obrigado, Sempre quis isso mais nunca vi, ou achava mais dava errado, em fim esse tutorial me ajudou e deu certo no meu Blog Abraços.
    Carlos Felipe

    ResponderExcluir
  21. queria saber que cor fica bom para o meu blog.: http://blogcodigos.blogspot.com

    e se da dechar redondo

    ResponderExcluir
  22. felipe
    quais cores usar no blog é uma escolha pessoal.... não tenho como dar opinião sobre isso.

    ResponderExcluir
  23. isso não é "alt" isso é a title ¬¬

    ResponderExcluir
  24. alt e title tem função parecida... escolhemos usar o nome alt por ser utilizado em imagens

    ResponderExcluir
  25. Pow gostei muito, além de aparecer exatamente na hora em que o ponteiro fica sobre o texto ou imagem, ainda da um estilo mais UP para o site :D

    www.helpaki.com

    ResponderExcluir
  26. Olá! Eu achei ótimo o codigo já coloquei no meu blog, foi fácil, fácil.

    Mas eu queria tirar a borda quadrada do nome, pois, quando coloco o mouse o fundo onde o nome tá escrito fica quadrado, e eu queria que ficasse com a borda redonda.

    como faz?

    Geano Souza

    ResponderExcluir
  27. vou pesquisar se é possivel a caixinha com o texto aparecer arredondada

    ResponderExcluir
  28. OK!
    Agora, esse período do código: "display:block;" muda o que no aplicativo? Por exemplo: poderia muda a palavra "block"? Pra que outra palavra?

    Saudações!
    Geano Souza

    ResponderExcluir
  29. o display block é o modo que é feita a exibição... existem outras formas, mas precisa entender de CSS para alterar isso mas no caso deste tutorial o block é o mais indicado

    ResponderExcluir
  30. Gostaria de saber como fazer para a imagem dá um "pulo" quando passa o mouse nela. E onde colocar o código.

    Saudações!
    Geano Souza

    ResponderExcluir
  31. veja esse código:
    Colocar bordas nas imagens do blog

    lá fala em bordas, mas se usar tamanhos diferentes de bordas a imagem pode se mover (pulo) ao passar o mouse ou estão usar margin-top:2px no trecho a:hover

    ResponderExcluir
  32. Eu não sei como acho o código da imagem, para coocar os efeitos de estrelinha no cursor do mouse

    ResponderExcluir
  33. o efeito de estrelinhas caindo não são imagens... só códigos, veja aqui: Efeitos Estrelinhas Caindo do Ponteiro do Mouse

    ResponderExcluir
  34. Gostei muito Fabiano agora me
    e como faço para mudar o tamanho da imagem não tem como colocala menor não?

    ResponderExcluir
  35. paulinhorodrigues
    o melhor é usar um programa para editar a imagem e já enviar no tamanho certo...

    mas na hora de enviar ao blog tem opções de tamanho, veja quando for fazer o upload da imagem

    ResponderExcluir
  36. E se quiser que toque um som quando passar o mouse sobre a foto, como eu faço? Obrigada.

    ResponderExcluir
  37. não tenho o código de efeito de som ao passar o mouse, mas vou pesquisar sobre isso

    ResponderExcluir
  38. muito obrigado, vai me dar muito jeito para os links de parceiros :)

    ResponderExcluir
  39. Olá, gostaria de saber se no lugar de aparecer um texto eu consigo fazer aparecer a mesma imagem, só que ampliada.
    Aí, assim como o texto se move junto ao cursor, a imagem também se moveria..
    Sei que tem algo parecido com isso que quero, que se chama TOOLTIP, mas não sei usar ainda.

    ResponderExcluir
  40. Rick
    não fiz testes sobre isso... mas acho que seria possível mas inviável....

    seria necessário usar todo esse código com nomes de estilos diferentes para cada imagem...

    se eu achar um outro código melhor para fazer isso farei um tutorial sobre o assunto

    ResponderExcluir
  41. Quando publico a primeira vez no Blogger(na pagina X)o código funciona beleza, porém, quando volto a mesma pagina o - onmouseover="tooltip.show('Anúncie Aqui!');" onmouseout="tooltip.hide();" - sumiu, me obrigando a ter que coloca-lo novamente caso eu venha a salvar. Imagine se eu tiver 50 links na mesma pagina, toda vez que inserir um novo link terei que editar os outros novamente! Como solucionar? Mesmo com este problema eu gostei muito do código. Valeu!!

    ResponderExcluir
  42. Uilmer
    isso já aconteceu comigo com outros códigos... o jeito é salvar o código e colar novamente quando for fazer uma edição

    ResponderExcluir
  43. Fabiano, esse trecho da postagem

    #tt {
    font-size: 11px;
    font-family: Verdana, Arial, sans-serif;
    position:absolute;
    display:block;
    }

    Na parte de " position:absolute; ", qual o nome que pode-se colocar em vez do "absolute", para que o nome fique sob o mouse?

    ResponderExcluir
  44. Mano
    ficar sob o mouse? não entendi o que está querendo fazer.

    se trocar o absolute ou pagar aquela linha o texto ficará fora de lugar

    ResponderExcluir
  45. Bom, no "absolute", o nome do do banner ou imagem que se utiliza o código, fica em cima do ponteiro do mouse. Queria saber qual um outro nome,que substitua o "absolute", para que o nome dique em baixo do ponteiro do mouse.

    ResponderExcluir
  46. não é neste trecho o posicionamento, veja aqui:

    var top = 3;
    var left = 3;

    e altere esses valores mas não o nome das varias. se precisa pode usar valor negativo, por exemplo:

    var top = -30;

    ResponderExcluir
  47. Ei você pode me dizer como colocar u mtitulo clicavél no titulo da postagem com so o titulo dele ai quando clica ta o conteudo me ajuda por favor

    ResponderExcluir
  48. entre na pagina editar html e procure por

    < data:post.title/ >

    então só só alterar dessa forma

    < a expr:href='data:post.url' >< /a >

    ResponderExcluir
  49. Dá para usar esse efeito em banners ?//// ou seja na lateral do blog

    ResponderExcluir
  50. dá para usar esse código em qualquer imagem que você puder editar o html

    ResponderExcluir