[Javascript] Pływający div idący za myszką

0

Chce uzyskac taki efekt, najeżdzam na obrazek i pojawia sie div ale póki myszką ruszam nad obrazkiem div wędruje za myszką, na razie zrobiłam pojawianie sie diva i tu juz zaczeły sie schody bo miga strasznie przy ruszaniu myszką :(

<!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-2" />
  <title>title</title>
 <link rel="stylesheet" href="css/basic.css" type="text/css" />
 <script type="text/javascript">
    function show(id, stan)
    {
       var display = (stan==true) ? 'block' : 'none';
       var block = document.getElementById(id).style.display = display;
    }
 </script>
</head>
<body>
   <div style="width:100px; height:100px; background-color:#f00; position:absolute; display:none;" id="block"></div>
   <img src="i.gif" width="100" height="30" border="0" alt="" onmouseover="show('block', true)" onmouseout="show('block', false)" />

</body>
</html>
0

aby nie mrugało proponuję coś takiego:

<!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-2" />
  <title>title</title>
 <link rel="stylesheet" href="css/basic.css" type="text/css" />
 <script type="text/javascript">
    div_visible=false;
    function show(id)
    { 
       if (div_visible==true) return;
       var display = 'block';
       var block = document.getElementById(id).style.display = display;
       div_visible=true;
    }
    
	function hide(id)
    {  if (div_visible==false) return;
       var display = 'none';
       var block = document.getElementById(id).style.display = display;
       div_visible=false;
    }
    
 </script>
</head>
<body>
   <div style="width:100px; height:100px; background-color:#f00; position:absolute; display:none;" id="block"></div>
   <img src="i.gif" width="100" height="30" border="0" alt="" onmouseover="show('block')" onmouseout="hide('block')" />
</body>
</html>

póżniej musisz wywołać onmousemove na obrazku i zmeiniać pozycję div'a (top, left)

0

dziękuje bardzo :)

0
zxc napisał(a)

var display = 'block';
var block = document.getElementById(id).style.display = display;

po co ludze lubia tak komplikowac kod? o_O

       document.getElementById(id).style.display = 'block';
0

po co w ogole sie bawic skoro ktos juz to zrobil

http://www.bosrup.com/web/overlib/

0
jacekmigacz napisał(a)

po co w ogole sie bawic skoro ktos juz to zrobil

Po to żeby się czegoś nauczyć! A nie tylko korzystać z gotowców!

0

jak się korzysta z gotowego to zazwyczaj trzeba umieścić podziękowanie czy tylko link do autora (choćby w źródle) - nie za fajnie to wygląda na stronie, zwłaszcza jeśli ma ona zdobyć miano "pro"

a korzystanie z tak prostych gotowych skryptów do napisania w minutę niezbyt dobrze świadczy o autorze

1 użytkowników online, w tym zalogowanych: 0, gości: 1