Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Tworzenie diva latającego za kursorem
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
gilbo
24.08.2005, 12:00:17
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
24.08.2005, 12:36:40
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
24.08.2005, 13:01:42
nie działa mi mówi że oczekiwano obiektu...
revyag
24.08.2005, 13:10:39 
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <!--c1--><div class='codetop'>Kod</div><div class='codemain'><!--ec1--><script type="text/javascript">
  4. function pos() {
  5.     if (window.Event) {
  6.         document.captureEvents(Event.MOUSEMOVE);
  7.     } 
  8.     document.getElementById("test").onmousemove = function(e){
  9.         x = (window.Event) ? e.pageX : event.clientX;
  10.         y = (window.Event) ? e.pageY : event.clientY;
  11.         document.getElementById("head").style.left=x - 5;
  12.         document.getElementById("head").style.top=y - 15;
  13.         document.getElementById("head").style.display="block";
  14.         document.getElementById("w").innerHTML="mouseX:"+x+"<br />mouseY:"+y;
  15.     }
  16.     document.getElementById("test").onmouseout=function() {
  17.         document.getElementById("head").style.display="none";
  18.     }
  19. }
  20. window.onload = pos;
  21. </script><!--c2--></div><!--ec2-->
  22. <!--c1--><div class='codetop'>Kod</div><div class='codemain'><!--ec1--><style type="text/css">
  23. div#head {
  24.     width:50px;
  25.     height:10px;
  26.     background-color:red;
  27.     position:absolute;
  28.     display:none;
  29.     z-index:1;
  30. }
  31. div#test {
  32.     width:200px;
  33.     height:100px;
  34.     position:absolute;
  35.     left:100px;
  36.     top:300px;
  37.     background-color:blue;
  38.     z-index:0;
  39. }
  40. </style><!--c2--></div><!--ec2-->
  41. </head>
  42. <body>
  43. <div id="head"></div>
  44. <span id="w"></span>
  45. <div id="test">
  46.  
  47. </div>
  48. </body>
  49. </html>
[HTML] pobierz, plaintext

Tak to wstawiłem żeby kod był bardziej przejrzysty smile.gif
Zamiast obrazka jest div.
gilbo
24.08.2005, 14:35:22
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.