ScriptFácil.com - Sua fonte de scripts
Documento efeitos
 |
Documento efeitos | Sobre Menu o Display Animado |
18/08/2004 - Por XeroxM Sobre Menu o Display Animado Compatibilidades: FF 1.x FF 2.x FF 3.x IE 6 IE 7 IE 8 Opera 8 Opera 9 Safari 3 Nota dos usuários: Sem avaliação
Os estilos para o menu
Inserir o estilo entre as tags <head></head>
<style>
#tooltip2{
position: absolute;
display: none;
width: 150px;
background-color: lightyellow;
height: 20px;
overflow:hidden;
border: 1px solid black;
}
#nstip{
display: none;
height: 20px;
bgcolor:lightyellow;
margin-left: 0px;
}
.tabela{
border-collapse: collapse;
font-size: 10 pt;
font-family: Verdana;
color: #000080
}
.tabela a{
font-family: verdana;
font-size: 10pt
}
</style>
#tooltip2{
position: absolute;
display: none;
width: 150px;
background-color: lightyellow;
height: 20px;
overflow:hidden;
border: 1px solid black;
}
#nstip{
display: none;
height: 20px;
bgcolor:lightyellow;
margin-left: 0px;
}
.tabela{
border-collapse: collapse;
font-size: 10 pt;
font-family: Verdana;
color: #000080
}
.tabela a{
font-family: verdana;
font-size: 10pt
}
</style>
O Javascript
Inserir o JavaScript entre as tags <head></head>
<script language="javascript">
if (!document.layers && !document.all){
event = 'test';
}
function showtip2( current, e, text){
if (document.all && document.readyState == "complete" ){
document.all.tooltip2.innerHTML = '<marquee style="border:1px solid black">'+ text +'</marquee>';
document.all.tooltip2.style.pixelLeft = event.clientX + document.body.scrollLeft + 10;
document.all.tooltip2.style.pixelTop = event.clientY + document.body.scrollTop + 10;
document.all.tooltip2.style.display = 'block';
} else if ( document.getElementById ){
document.getElementById('nstip').innerHTML = '<b>'+ text +'</b>';
document.getElementById('nstip').style.marginLeft = '0px';
document.getElementById('nstip').style.display = 'block';
currentscroll = setInterval('scrolltip()',100);
document.getElementById('tooltip2').style.left = e.pageX + 10;
document.getElementById('tooltip2').style.top = e.pageY + 10;
document.getElementById('tooltip2').style.display = 'block';
}
}
function hidetip2(){
if (document.all){
document.all.tooltip2.style.display = 'none';
}else if (document.getElementById){
clearInterval(currentscroll);
document.getElementById('tooltip2').style.display = 'none';
document.getElementById('nstip').style.display = 'none';
}
}
function scrolltip(){
if ( parseInt( document.getElementById('nstip').style.marginLeft ) >= -(parseInt( document.getElementById('nstip').style.width )) ){
document.getElementById('nstip').style.marginLeft = (parseInt( document.getElementById('nstip').style.marginLeft ) - 5) + 'px';
}else{
document.getElementById('nstip').style.marginLeft = '152px';
}
}
</script>
if (!document.layers && !document.all){
event = 'test';
}
function showtip2( current, e, text){
if (document.all && document.readyState == "complete" ){
document.all.tooltip2.innerHTML = '<marquee style="border:1px solid black">'+ text +'</marquee>';
document.all.tooltip2.style.pixelLeft = event.clientX + document.body.scrollLeft + 10;
document.all.tooltip2.style.pixelTop = event.clientY + document.body.scrollTop + 10;
document.all.tooltip2.style.display = 'block';
} else if ( document.getElementById ){
document.getElementById('nstip').innerHTML = '<b>'+ text +'</b>';
document.getElementById('nstip').style.marginLeft = '0px';
document.getElementById('nstip').style.display = 'block';
currentscroll = setInterval('scrolltip()',100);
document.getElementById('tooltip2').style.left = e.pageX + 10;
document.getElementById('tooltip2').style.top = e.pageY + 10;
document.getElementById('tooltip2').style.display = 'block';
}
}
function hidetip2(){
if (document.all){
document.all.tooltip2.style.display = 'none';
}else if (document.getElementById){
clearInterval(currentscroll);
document.getElementById('tooltip2').style.display = 'none';
document.getElementById('nstip').style.display = 'none';
}
}
function scrolltip(){
if ( parseInt( document.getElementById('nstip').style.marginLeft ) >= -(parseInt( document.getElementById('nstip').style.width )) ){
document.getElementById('nstip').style.marginLeft = (parseInt( document.getElementById('nstip').style.marginLeft ) - 5) + 'px';
}else{
document.getElementById('nstip').style.marginLeft = '152px';
}
}
</script>
Chamando o script
Inserir o HTML após a tag <body>
<center>
<table border="0" cellpadding="0" cellspacing="0" class="tabela" width="100%">
<tr>
<td width="23%">
<div id="tooltip2"><div id="nstip" style="width: 500px;"></div></div>
<a href="http://www.scriptfacil.com" onmouseover="showtip2(this,event,'ScriptFacil.cOm o melhor do Javascript')" onmouseout="hidetip2()">ScriptFacil</a><br />
<a href="http://www.rjhost.com.br" onmouseover="showtip2(this,event,'Hospedem de Site com qualidade e preço')" onmouseout="hidetip2()">RJHost</a><br />
<a href="http://www.e-registros.com.br" onmouseover="showtip2(this,event,'Registre seu domínio pelo menor preço, apenas R$38,90')" onmouseout="hidetip2()">E-registros</a><br />
<a href="http://www.scriptfacil.com" onmouseover="showtip2(this,event,'Muitos serviços gratis para seu site')" onmouseout="hidetip2()">Serviços</a>
</td>
</tr>
</table>
</center>
<table border="0" cellpadding="0" cellspacing="0" class="tabela" width="100%">
<tr>
<td width="23%">
<div id="tooltip2"><div id="nstip" style="width: 500px;"></div></div>
<a href="http://www.scriptfacil.com" onmouseover="showtip2(this,event,'ScriptFacil.cOm o melhor do Javascript')" onmouseout="hidetip2()">ScriptFacil</a><br />
<a href="http://www.rjhost.com.br" onmouseover="showtip2(this,event,'Hospedem de Site com qualidade e preço')" onmouseout="hidetip2()">RJHost</a><br />
<a href="http://www.e-registros.com.br" onmouseover="showtip2(this,event,'Registre seu domínio pelo menor preço, apenas R$38,90')" onmouseout="hidetip2()">E-registros</a><br />
<a href="http://www.scriptfacil.com" onmouseover="showtip2(this,event,'Muitos serviços gratis para seu site')" onmouseout="hidetip2()">Serviços</a>
</td>
</tr>
</table>
</center>
Demonstração do script
