Sign in to follow this  
Henderson

Pegar Posição Do Mouse

Recommended Posts

aí, beleza?

Seguinte, tenho um código que quando passa o mouse em cima de um link, aparece uma janelinha...

Aqui o código:

<script language="javascript">
function Layer()
{
  if (document.getElementById("mais").style.visibility == 'visible')  
    document.getElementById("mais").style.visibility = 'hidden';
  else                
    document.getElementById("mais").style.visibility = 'visible';
}

</script>
<div id="mais" style="cursor: pointer; position:absolute; width:10px; height:10px; z-index:1; visibility: 
hidden; overflow: visible; left: 400px; top: 400px; background-color: #F0F8FF; 
layer-background-color: #F0F8FF; border: 1px none #000000;"> 

<a href="#" onMouseOver"Layer()" onMouseOut"Layer()">Mais</a>

Só que eu colocando a posição da layer como está pode ser que alguns dos links MAIS fique por debaixo dela, e aí, dá erro.

Quando se coloca o mouse em cima do link, ao invés de abrir, é como se ficasse abrindo e fechando a layer, porque o mouse fica alternando muito rápido entre a setinha e a mão que aparece em link.

Então eu preciso pegar a posição do mouse, para poder abrir o layer um pouco mais pro lado do mouse...

Só que eu não sei nada de javascript

Esse código aí eu peguei pronto, porque nem isso eu saberia fazer, então por favor, me ajudem e sejam pacientes, hehe.

Valeu

Share this post


Link to post
Share on other sites

Henderson faça as seguintes modificações:

Cole o código abaixo antes do if no javascript

  document.getElementById("mais").style.top  = event.x;
  document.getElementById("mais").style.left = event.y;

Remova o texto "left: 400px; top: 400px;" da tag DIV

Isso deve resolver... ;)

Share this post


Link to post
Share on other sites

consegui

tu só inverteu né

y é coordenada vertical, tinha que ser no top

e x qe é horizontal no left

mas eu troquei...

deu certinho, valeu

pra quem quizer, ficou assim:

<script language="javascript">
function Layer()
{
document.getElementById("mais").style.left  = event.x;
document.getElementById("mais").style.top = event.y;
  if (document.getElementById("mais").style.visibility == 'visible')  
    document.getElementById("mais").style.visibility = 'hidden';
  else                
    document.getElementById("mais").style.visibility = 'visible';
}

</script>
<div id="mais" style="cursor: pointer; position:absolute; width:10px; height:10px; z-index:1; visibility: 
hidden; overflow: visible; left: 400px; top: 400px; background-color: #F0F8FF; 
layer-background-color: #F0F8FF; border: 1px none #000000;"> 

<a href="#" onMouseOver"Layer()" onMouseOut"Layer()">Mais</a>

Share this post


Link to post
Share on other sites

Realmente... às vezes eu confundo x - horizontal e y - vertical com o inverso por causa do left e top... mas é isso mesmo... té mais...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this