Efeito na tag Alt - Personalizar texto sobre a imagem

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.
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)






<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> <a href=" COLOQUE AQUI O LINK DO SITE " target="_blank" onmouseover="tooltip.show('Anúncie Aqui!');" onmouseout="tooltip.hide();" ><img src=" COLOQUE AQUI O ENDEREÇO DA IMAGEM " height="600"width="400"border="0" /></a>