Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17584
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Balão transparente ao passar o cursor

22-01-2007 10:04

Vamos aprender nesse artigo a mostrar um balão transparente quando o usuário passar o cursor sobre o link, vou usar a figura Imagem
o código segue detalhado abaixo:

LINK:

<a href="" onmouseout="kill()" onmouseover="popup('mensagem mostrada','cc0000')">link</a>

CSS e JavaScript usado:

<STYLE TYPE="text/css"> BODY {OVERFLOW:scroll;OVERFLOW-X:hidden} .DEK {POSITION:absolute;VISIBILITY:hidden;} </STYLE>


<DIV ID="dek" CLASS="dek"></DIV>


<SCRIPT TYPE="text/javascript"> // DISTÂNCIA Xoffset=1; // distância da ponta do mouse para o balão Yoffset= -70; // distância do topo para baixo (-valor fica mais alto) // DISTÂNCIA   var old,skn,iex=(document.all),yyy=-1000;   var ns4=document.layers var ns6=document.getElementById&&!document.all var ie4=document.all   if (ns4) skn=document.dek else if (ns6) skn=document.getElementById("dek").style else if (ie4) skn=document.all.dek.style if(ns4)document.captureEvents(Event.MOUSEMOVE); else{ skn.visibility="visible" skn.display="none" }   document.onmousemove=get_mouse;   function popup(msg,bak){ var content="<TABLE style='filter:Alpha(Opacity=90,FinishOpacity=80,Style=2,StartX=100,StartY=100,FinishX=100,FinishY=1);' WIDTH=149 height=67 BORDER=0 CELLPADDING=0 CELLSPACING=0 background=balloon.gif><TD ALIGN=center valign=middle><table width=87%><tr><td align=center valign=middle><font style='font-weight:bold;font-family:tahoma,verdana,arial;font-size:8pt;color:#696969;'>"+msg+"</FONT></td></tr></table></TD></TABLE>";   yyy=Yoffset;  if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}  if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}  if(ie4){document.all("dek").innerHTML=content;skn.display=''} }   function get_mouse(e){ var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft; skn.left=x+Xoffset; var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop; skn.top=y+yyy; }   function kill(){ yyy=-1000; if(ns4){skn.visibility="hidden";} else if (ns6||ie4) skn.display="none" }   </SCRIPT>

ao ler o código note que o balão é o background da tabela, ai você substitui por outra figura que desejar.
0

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado