Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Tworzenie diva latającego za kursorem
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
gilbo
Witam szukałem, ale nic nie znalazłem:(

Jak zrobić cos takiego, że za kursorem lata div który pokazuję sie po najechaniu na jakis np. obrazek a po zjechaniu z niego ten div znika?? wiem że to możliwe bo widziałem na kilku stronach. Głównie problem tkwi w tym, że nie wiem jak ustalić pozycję kursora...

Bardzo proszę o pomoc bo w JS jestem zielony!
Pokemon
W elemencie na który chcesz najechać myszką ustawiasz:

Kod
<img onmousemove="pokaz(event)">


i teraz w JS:

Kod
function pokaz( e ) {
   document.getElementById('div').style.left = e.clientX+document.body.scrollLeft+'px';
   getElementById('div').style.top = e.clientY+document.body.scrollTop+'px';
   getElementById('div').style.visibility = 'visible';
}


gdzie 'div' to id warstwy ktora chcesz pokazac. Do tego kodu musisz dorobic jeszcze znikanie warstwy :]
gilbo
nie działa mi mówi że oczekiwano obiektu...
revyag
  1. <!--c1--><div class='codetop'>Kod</div><div class='codemain'><!--ec1--><script type="text/javascript">
  2. function pos() {
  3.     if (window.Event) {
  4.         document.captureEvents(Event.MOUSEMOVE);
  5.     }
  6.     document.getElementById("test").onmousemove = function(e){
  7.         x = (window.Event) ? e.pageX : event.clientX;
  8.         y = (window.Event) ? e.pageY : event.clientY;
  9.         document.getElementById("head").style.left=x - 5;
  10.         document.getElementById("head").style.top=y - 15;
  11.         document.getElementById("head").style.display="block";
  12.         document.getElementById("w").innerHTML="mouseX:"+x+"<br />mouseY:"+y;
  13.     }
  14.     document.getElementById("test").onmouseout=function() {
  15.         document.getElementById("head").style.display="none";
  16.     }
  17. }
  18. window.onload = pos;
  19. </script><!--c2--></div><!--ec2-->
  20. <!--c1--><div class='codetop'>Kod</div><div class='codemain'><!--ec1--><style type="text/css">
  21. div#head {
  22.     width:50px;
  23.     height:10px;
  24.     background-color:red;
  25.     position:absolute;
  26.     display:none;
  27.     z-index:1;
  28. }
  29. div#test {
  30.     width:200px;
  31.     height:100px;
  32.     position:absolute;
  33.     left:100px;
  34.     top:300px;
  35.     background-color:blue;
  36.     z-index:0;
  37. }
  38. </style><!--c2--></div><!--ec2-->
  39. </head>
  40. <div id="head"></div>
  41. <span id="w"></span>
  42. <div id="test">
  43.  
  44. </div>
  45. </body>
  46. </html>

Tak to wstawiłem żeby kod był bardziej przejrzysty smile.gif
Zamiast obrazka jest div.
gilbo
Dzięki revyag twój skrypt działa laugh.gif Dzięki wielki jeszcze raz!!
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.