Caminho de Navegação Links e tooltips / Scripts / Sobre Menu o Display Animado

1 avaliação
Indique ao Ueba Indique ao BlogBlogs Indique ao Delicious Indique ao Technorati Indique ao Google Bookmarks Indique ao Newsgator
TAGS
  • Máximo de 100 tags
  • Cada tag deve ter até 20 caracteres.
  • Separar as tags com virgula. Ex.: php, sql, html, xml, fireworks
COMENTAR

INDICAR
Nome do amigo: E-mail do amigo: Comentário:
REPORTAR ERRO Descreva o erro:

Sobre Menu o Display AnimadoPostada em: 18/08/2004

Rogério Almeida
Por: Rogério Almeida Nº de Visualizações: 9908. Compatível: FF 1.x FF 2.x FF 3.x IE 6 IE 7 IE 8 Opera 8 Opera 9 Safari 3

Demonstração do script

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>

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>

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>