Efeito na tag Alt - Personalizar texto sobre a imagem

Você, é você mesmo, sabe como criar um efeito na tag alt, aquela que quando o mouse passa por cima do texto ou imagem aparece um texto em uma nuvem? 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.

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


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

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


</font><span class="Apple-style-span" style="font-family: tahoma, 'Trebuchet MS', lucida, helvetica, sans-serif; font-size: 13px; line-height: 18px; "><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>

Agora as modificações no 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)