Forum PHP.pl

W jaki sposób przy zdarzeniu onmouseover sprawdzić, pozycję kursora oraz diva?

Chodzi mi o taką sytuację. Mamy diva o szerokości 117px i wysokości 17px. Ten div jest w jakiejś tam sobie odległości od lewego, górnego rogu okna przeglądarki. Ten div jest pozycjonowany relatywnie. W tym divie istnieje sobie drugi div pozycjonowany absolutnie, a w nim tabela z podlinkowanymi ikonkami. Ten główny div ma dwa zdarzenia. onmouseout oraz onmouseover. Gdy mysz znajdzie się nad tym divem pojawia się div z tabelą znajdujący się bezpośrednio w nim. W teorii wszystko działa poprawnie jednakże w praktyce nie do końca. Sprawdzałem na przeglądarce FF oraz Opera. W obu przypadkach pojawia się problem. Umieszczenie kursora myszy na divie otwierającym liste ikon powoduje pokazanie listy ikon. Dalsze poruszanie w obrębie tego diva powoduje, że przeglądarka jakby głupieje i nie wie co zrobić. Raz wywołuje zdarzenie zdjęcia kursora myszy z diva, a raz zdarzenie umieszczenia kursora myszy na tym divie. Poniżej schemat.

[HTML] pobierz, plaintext 
<div style="position: relative;" onmouseover="pokazikony" onmouseout="schowajikony">
   <div style="position: absolute; top: 0px; right: 0px;" id="ikony">
      <table>
         <tr>
            <td>
               <a hef="adres"><img src="ikona" alt="" /></a>
            </td>
         </tr>
      </table>
   </div>
</div>
[HTML] pobierz, plaintext 

Swoją drogą nie działa wstawianie kodu HTML w wyswigu forum więc wybaczcie, ale daję zwykłym tekstem. Z kolei po jednym enterze tworzy się akapit. Co wy porobiliście z tym forum? Kiedyś działało to znacznie lepiej...



Wracając do tematu. Wpadłem na pomysł, by w funkcji ze zdarzenia onmouseover pobierać pozycję kursora oraz diva, w którym występuje. Jeżeli kursor faktyczni znalazł się poza divem funkcja wykona się, a jeśli nie, nic nie zrobi.



Dlatego pytam, jak pobrać absolutną pozycję diva oraz absolutną pozycję kursora w funkcji JS?

Ten post edytował innowwwacje 17.03.2009, 12:35:21

mysz to:
event.clientX
event.clientY
a div sprawdzaj po offsecie, czyli coś ala
var box = document.getElementById("box");
var lewy=box.offsetLeft;

Dobrych parę godzin szukałem i znalazłem. 



Taki skrypt:

[HTML] pobierz, plaintext 
   <script language="JavaScript1.2">
<!--
 
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false
 
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)
 
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
 
// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0
 
// Main function to retrieve mouse x-y pos.s
 
function getMouseXY(e) {ldelim}
  if (IE) {ldelim} // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  {rdelim} else {ldelim}  // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY
  {rdelim}  
  // catch possible negative values in NS4
  if (tempX < 0){ldelim}tempX = 0{rdelim}
  if (tempY < 0){ldelim}tempY = 0{rdelim}  
  return true
}
 
//-->
</script>
[HTML] pobierz, plaintext 

Dajemy tuż przed </body> (najlepiej po wszystkich innych znacznikach). Powoduje on, że przy każdym ruchu myszy pozycja myszy zapisywana jest w zmiennych tempX oraz tempY są one dostępne z poziomu wszystkich innych skryptow. W ten spsosóbpozycja kursora jest zawsze dostępna. Funkcji nie trzeba specjalnie wywoływać (działa niejako w tle).

Z kolei pozycja elementu to rzecz trochę bardziej skomplikowana. Samo offsetLeft nie wystarczy, gdy element div jest w innych elementach typu divy, tabele itp. Ponizszy skrypt

[HTML] pobierz, plaintext 
var pos_left = '';
var pos_top = '';
 
function findPos(obj) {
    var nleft = 0;
    var ntop = 0;
    if (obj.offsetParent) {
        nleft = obj.offsetLeft
        ntop = obj.offsetTop
        while (obj = obj.offsetParent) {
            nleft += obj.offsetLeft
            ntop += obj.offsetTop
        }
    }
    
    pos_left = nleft;
    pos_top = ntop;
}
[HTML] pobierz, plaintext 

Zwraca dla dwóch zminnych pos_left oraz pos_top pozycję od góry i od lewej krawędzie ekranu danego elementu uwzględniając jego położenie w innych elementach.


Dzięki za pomoc.

Ten post edytował innowwwacje 17.03.2009, 12:36:01