Ir para conteúdo

POWERED BY:

Arquivado

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

Carlos Vital

DIV seguindo o mouse

Por , em Javascript

Recommended Posts

Carlos Vital    0

Carlos Vital
Postado

Oi galera tudo bem? http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

gostaria de saber como fazer para uma tag DIV seguir o mouse.

já tentei de várias formas mas não tive sucesso em nenhuma delas.

 

desde já agradeço. http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hamilcar    1

Hamilcar
Postado

Oi galera tudo bem? http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

gostaria de saber como fazer para uma tag DIV seguir o mouse.

já tentei de várias formas mas não tive sucesso em nenhuma delas.

 

desde já agradeço. http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

Testa aí:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<script language="JavaScript" type="text/javascript">

if (document.all){}

else document.captureEvents(Event.MOUSEMOVE);

document.onmousemove=mouse;

 

function mouse(e)

{

if (navigator.appName == 'Netscape'){

xcurs = e.pageX;

ycurs = e.pageY;

} else {

xcurs = event.clientX;

ycurs = event.clientY;

}

document.getElementById('position').style.left = (xcurs+10)+'px';

document.getElementById('position').style.top = (ycurs+30)+'px';

}

</script>

 

<style type="text/css">

<!--

#position {

background-color: #FF0000;

position: absolute;

}

-->

</style>

</head>

<body onload="mouse();">

<div id="position">testando</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Vital    0

Carlos Vital
Postado

Valeu pela ajuda! http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

era isso mesmo que estava querendo.

Já já você vira moderador !! http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Vital    0

Carlos Vital
Postado

oi tudo bem?

intenti como funciona o script mas agora me surgiu uma duvida que pode parecer boba, mas eu tentei de vária maneira, mas não consegui.

a minha dúvida é a seguinte.

como eu faço para que só quando eu passar o mouse em cima do link aparecer a div.

eu tentei da seguinte forma mas não deu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<script language="JavaScript" type="text/javascript">

if (document.all){}

else document.captureEvents(Event.MOUSEMOVE);

document.linc.onmousemove=mouse;

 

function mouse(e)

{

 

if (e){

xcurs = e.pageX;

ycurs = e.pageY;

} else {

xcurs = event.clientX;

ycurs = event.clientY;

}

document.getElementById('position').style.left = (xcurs+10)+'px';

document.getElementById('position').style.top = (ycurs+30)+'px';

document.getElementById('linc').style.display = 'block';

}

</script>

 

<style type="text/css">

<!--

#position {

position: absolute;

display: none;

}

-->

</style>

</head>

<body>

<a href="#" id="linc" onmouseover="mouse();" >teste</a>

<div id="position">teste!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hamilcar    1

Hamilcar
Postado

Porquê não utiliza tooltip:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css"><!--/* Início Créditos a Maurício Samy Silva (Maujor - http://www.maujor.com). ==========ToolTip============ */ a.dcontexto{ position:relative; font:12px arial, verdana, helvetica, sans-serif; color:#039; text-decoration:none; cursor:help; z-index:24; border-bottom-width: 2px; border-bottom-color: #039; clear: left; } a.dcontexto:hover{ background:transparent; z-index:25; } a.dcontexto span{display: none} a.dcontexto:hover span{ display:block; position:absolute; width:150px; top:3em; text-align:justify; left:0; font: 12px arial, verdana, helvetica, sans-serif; padding:5px 10px; border:1px solid #999; background:#e0ffff; color:#000; }/* ==========ToolTip============ Fim Créditos a Maurício Samy Silva (Maujor - http://www.maujor.com). *//* Menus incluir, excluir e alterar */--></style></head><body><a href="#" class="dcontexto" >teste<span><strong>Testando</strong><br/>Este é um teste</span></a></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Vital    0

Carlos Vital
Postado

eu já havia visto essa tooltip mas eu queria fazer de jeito que fique mais dinâmica, entende?

e também para eu não ter que ficar enchendo o xhtml da página de tag <span></span>, entende?

caso você saiba como fazer para aparecer essa DIV quando passar o mouse em cima do link usando javascript, por favor, poste ai. http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hamilcar    1

Hamilcar
Postado

Vê aí se é isto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script language="JavaScript" type="text/javascript">var xcurs, ycurs;if (document.all){}else document.captureEvents(Event.MOUSEMOVE);document.onmousemove=mouse;function mouse(e){ if (navigator.appName == 'Netscape'){ xcurs = e.pageX; ycurs = e.pageY; } else { xcurs = event.clientX; ycurs = event.clientY; }}function mouseover(){ document.getElementById('position').style.left = (xcurs+10)+'px'; document.getElementById('position').style.top = (ycurs+30)+'px'; document.getElementById('position').style.display = 'block';}function mouseout(){ document.getElementById('position').style.left = 0; document.getElementById('position').style.top = 0; document.getElementById('position').style.display = 'none';}</script><style type="text/css"><!--#position {position: absolute;display: none;}--></style></head><body><a href="#" id="linc" onmouseover="mouseover();" onmouseout="mouseout();" >teste</a><div id="position">teste!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</div></body></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