Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Tworzenie diva latającego za kursorem, jak to zrobic?
gilbo
post
Post #1





Grupa: Zarejestrowani
Postów: 169
Pomógł: 1
Dołączył: 16.04.2004
Skąd: z domu

Ostrzeżenie: (0%)
-----

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!
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
Pokemon
post
Post #2





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 29.07.2005

Ostrzeżenie: (0%)
-----

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 :]
Go to the top of the page
+Quote Post
gilbo
post
Post #3





Grupa: Zarejestrowani
Postów: 169
Pomógł: 1
Dołączył: 16.04.2004
Skąd: z domu

Ostrzeżenie: (0%)
-----

nie działa mi mówi że oczekiwano obiektu...
Go to the top of the page
+Quote Post
revyag
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
----- 

[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.


--------------------
-------------

------
Go to the top of the page
+Quote Post
gilbo
post
Post #5





Grupa: Zarejestrowani
Postów: 169
Pomógł: 1
Dołączył: 16.04.2004
Skąd: z domu

Ostrzeżenie: (0%)
-----

Dzięki revyag twój skrypt działa laugh.gif Dzięki wielki jeszcze raz!!
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.08.2025 - 14:25
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn