Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Daniel o rei

tabela ficar do lado do mouse não da certo

Por , em Javascript

Recommended Posts

Daniel o rei    14

Daniel o rei
Postado 

14''4''' ''9''' ''10''' ''15''' ''16''' ''21''' ''22''' ''27''' ''28''' ''33''' ''34''' ''39''' ''40''' ''''' ''''' ''''' ''''' ''''' ''''' ''''' ''''' <head>
  <title>paginaçao</title>
  <style>
@import url("style.css");
#tabela{
position: relative ;
left: 1055;
top: 122;
z-index: 1;

}
</style>

<script type="text/javascript">
function table(title, body)
{

return " <table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" bordercolor=\"#EEC900\" bgcolor=\"blue\"><tr><td><center>"+ title +"</center></td></tr><tr><td>"+ body +"</td></tr></table> " ;

}


function MontaTexto(nome , texto)
{ 
//alert('vai funciona. funcionou!') ;
document.getElementById('tabela').innerHTML = table(nome,texto);
document.getElementById('tabela').style.top +=800 ;
window.areaTexto.innerText = Texto;

 alert(window.areaTexto.innerText);
return true;
}

function DesmontaTexto()
{ 
document.getElementById('tabela').innerHTML = "  " ;

//return true;
}
function seguir(event){
document.getElementById('tabela').style.top = event.clientY - 40;
document.getElementById('tabela').style.left = event.clientX + 50 ;
}
 //if (document.layers){
//document.captureEvents(Event.MOUSEMOVE);
//}

//document.onmousemove = seguir ;

</script>
</head>
<body onmousemove="seguir(event)">
   <div id="tabela"> tabelaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>

<table border="0" height="150"  bgcolor="#C1EBFF">
<tr><td>
<object width="408" height="150">
<param name="movie"  value="menu.swf">
<embed src="menu.swf" width="408" height="150">
</embed>
</object>
 </td> <td valign="top" >Você não está logado. <a href="login.php">Clique aqui</a> para entrar ou <a href="cadastro.php" title="clique aqui">clique aqui</a> para se cadastrar</td></tr>

<table>
<tr>
<td><BR>cuarenta<BR><div onmouseover="MontaTexto('cuarenta','forty');" onmouseout="DesmontaTexto();"><img src="img/40.jpg" width="130" height="100" ></div><BR>40<BR></td>
<td><BR>treinta y nueve<BR><div onmouseover="MontaTexto('treinta y nueve','thirty-nine');" onmouseout="DesmontaTexto();"><img src="img/39.jpg" width="130" height="100" ></div><BR>39<BR></td>
<td><BR>treinta y cuatro<BR><div onmouseover="MontaTexto('treinta y cuatro','thirty-four');" onmouseout="DesmontaTexto();"><img src="img/34.jpg" width="130" height="100" ></div><BR>34<BR></td>
<td><BR>treinta y tres<BR><div onmouseover="MontaTexto('treinta y tres','thirty-theere');" onmouseout="DesmontaTexto();"><img src="img/33.jpg" width="130" height="100" ></div><BR>33<BR></td>

<tr>
<td><BR>veinteocho<BR><div onmouseover="MontaTexto('veinteocho','twenty-eight');" onmouseout="DesmontaTexto();"><img src="img/28.jpg" width="130" height="100" ></div><BR>28<BR></td>

<td><BR>veintesiete<BR><div onmouseover="MontaTexto('veintesiete','twenty-seven');" onmouseout="DesmontaTexto();"><img src="img/27.jpg" width="130" height="100" ></div><BR>27<BR></td>
<td><BR>veintedos<BR><div onmouseover="MontaTexto('veintedos','twenty-two');" onmouseout="DesmontaTexto();"><img src="img/22.jpg" width="130" height="100" ></div><BR>22<BR></td>
<td><BR>veinteun<BR><div onmouseover="MontaTexto('veinteun','twenty-one');" onmouseout="DesmontaTexto();"><img src="img/21.jpg" width="130" height="100" ></div><BR>21<BR></td>

<tr>
<td><BR>dieciseis<BR><div onmouseover="MontaTexto('dieciseis','sixteen');" onmouseout="DesmontaTexto();"><img src="img/16.jpg" width="130" height="100" ></div><BR>16<BR></td>
<td><BR>quince<BR><div onmouseover="MontaTexto('quince','fifteen');" onmouseout="DesmontaTexto();"><img src="img/15.jpg" width="130" height="100" ></div><BR>15<BR></td>

<td><BR>diez<BR><div onmouseover="MontaTexto('diez','ten');" onmouseout="DesmontaTexto();"><img src="img/10.jpg" width="130" height="100" ></div><BR>10<BR></td>
<td><BR>nueve<BR><div onmouseover="MontaTexto('nueve','nine');" onmouseout="DesmontaTexto();"><img src="img/9.jpg" width="130" height="100" ></div><BR>9<BR></td>

<tr>
<td><BR>cuatro<BR><div onmouseover="MontaTexto('cuatro','four');" onmouseout="DesmontaTexto();"><img src="img/4.jpg" width="130" height="100" ></div><BR>4<BR></td>
<td><BR><BR></td>
<td><BR><BR></td>
<td><BR><BR></td>

<tr>
<td><BR><BR></td>

<td><BR><BR></td>
<td><BR><BR></td>
<td><BR><BR></td>
</table>1</body>
quando vai pondo a página para baixo a tabela fica. Alem de almentar o tamanho da página.

Esse é o script já interpretado pelo php.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel o rei    14

Daniel o rei
Postado

Agora o onmouseout aparece na hora errada:

 

14''4''' ''9''' ''10''' ''15''' ''16''' ''21''' ''22''' ''27''' ''28''' ''33''' ''34''' ''39''' ''40''' ''''' ''''' ''''' ''''' ''''' ''''' ''''' ''''' <head>
  <title>paginaçao</title>
  <style>
@import url("style.css");
#tabela{
position: absolute ;
left: 1055;
top: 122;
z-index: 1;

}
</style>

<script type="text/javascript">
function table(title, body)
{

return " <table cellpadding=\"0\" cellspacing=\"0\" border=\"1\" bordercolor=\"#EEC900\" bgcolor=\"blue\"><tr><td><center>"+ title +"</center></td></tr><tr><td>"+ body +"</td></tr></table> " ;

}


function MontaTexto(nome , texto)
{ 
//alert('vai funciona. funcionou!') ;
document.getElementById('tabela').innerHTML = table(nome,texto);
document.getElementById('tabela').style.top +=800 ;
window.areaTexto.innerText = Texto;

 alert(window.areaTexto.innerText);
return true;
}

function DesmontaTexto()
{ 
document.getElementById('tabela').innerHTML = "  " ;

//return true;
}
function seguir(event){
document.getElementById('tabela').style.top =   event.pageY - document.documentElement.scrollTop;
document.getElementById('tabela').style.left = event.clientX   ;
}
 //if (document.layers){
//document.captureEvents(Event.MOUSEMOVE);
//}

//document.onmousemove = seguir ;

</script>
</head>
<body onmousemove="seguir(event)">
   <div id="tabela"> tabelaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div>

<table border="0" height="150"  bgcolor="#C1EBFF">
<tr><td>
<object width="408" height="150">
<param name="movie"  value="menu.swf">
<embed src="menu.swf" width="408" height="150">
</embed>
</object>
 </td> <td valign="top" >Você não está logado. <a href="login.php">Clique aqui</a> para entrar ou <a href="cadastro.php" title="clique aqui">clique aqui</a> para se cadastrar</td></tr>

<table>
<tr>
<td><BR>cuarenta<BR><div onmouseover="MontaTexto('cuarenta','forty');" onmouseout="DesmontaTexto();"><img src="img/40.jpg" width="130" height="100" ></div><BR>40<BR></td>
<td><BR>treinta y nueve<BR><div onmouseover="MontaTexto('treinta y nueve','thirty-nine');" onmouseout="DesmontaTexto();"><img src="img/39.jpg" width="130" height="100" ></div><BR>39<BR></td>
<td><BR>treinta y cuatro<BR><div onmouseover="MontaTexto('treinta y cuatro','thirty-four');" onmouseout="DesmontaTexto();"><img src="img/34.jpg" width="130" height="100" ></div><BR>34<BR></td>
<td><BR>treinta y tres<BR><div onmouseover="MontaTexto('treinta y tres','thirty-theere');" onmouseout="DesmontaTexto();"><img src="img/33.jpg" width="130" height="100" ></div><BR>33<BR></td>

<tr>
<td><BR>veinteocho<BR><div onmouseover="MontaTexto('veinteocho','twenty-eight');" onmouseout="DesmontaTexto();"><img src="img/28.jpg" width="130" height="100" ></div><BR>28<BR></td>

<td><BR>veintesiete<BR><div onmouseover="MontaTexto('veintesiete','twenty-seven');" onmouseout="DesmontaTexto();"><img src="img/27.jpg" width="130" height="100" ></div><BR>27<BR></td>
<td><BR>veintedos<BR><div onmouseover="MontaTexto('veintedos','twenty-two');" onmouseout="DesmontaTexto();"><img src="img/22.jpg" width="130" height="100" ></div><BR>22<BR></td>
<td><BR>veinteun<BR><div onmouseover="MontaTexto('veinteun','twenty-one');" onmouseout="DesmontaTexto();"><img src="img/21.jpg" width="130" height="100" ></div><BR>21<BR></td>

<tr>
<td><BR>dieciseis<BR><div onmouseover="MontaTexto('dieciseis','sixteen');" onmouseout="DesmontaTexto();"><img src="img/16.jpg" width="130" height="100" ></div><BR>16<BR></td>
<td><BR>quince<BR><div onmouseover="MontaTexto('quince','fifteen');" onmouseout="DesmontaTexto();"><img src="img/15.jpg" width="130" height="100" ></div><BR>15<BR></td>

<td><BR>diez<BR><div onmouseover="MontaTexto('diez','ten');" onmouseout="DesmontaTexto();"><img src="img/10.jpg" width="130" height="100" ></div><BR>10<BR></td>
<td><BR>nueve<BR><div onmouseover="MontaTexto('nueve','nine');" onmouseout="DesmontaTexto();"><img src="img/9.jpg" width="130" height="100" ></div><BR>9<BR></td>

<tr>
<td><BR>cuatro<BR><div onmouseover="MontaTexto('cuatro','four');" onmouseout="DesmontaTexto();"><img src="img/4.jpg" width="130" height="100" ></div><BR>4<BR></td>
<td><BR><BR></td>
<td><BR><BR></td>
<td><BR><BR></td>

<tr>
<td><BR><BR></td>

<td><BR><BR></td>
<td><BR><BR></td>
<td><BR><BR></td>
</table>1</body>
Eu mudei a forma de calcular a posição Y da tabela:

document.getElementById('tabela').style.top = event.pageY - document.documentElement.scrollTop;

Dessa forma funciona quase que corretamente.

A função desmontatexto é chamada na hora errada.

Para testar rapidamente cola o script aqui:http://www.lncc.br/~borges/php/testar.html

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito