PsYcHo232: Firefox 3 Problem mit onMouseOver Funktion...

SELF-Forum

Firefox 3 Problem mit onMouseOver Funktion...

PsYcHo232
– Informationen zu den Bewertungsregeln

Hallo Liebe Javascriptler ;-)
Bin leider neu hier, programmiere aber schon seit Jahren mit PHP. Habe im I-Net n kleines Script gefunden um TRs bzw. TDs mittels Javascript bei einer OnMouseOver Funktion farbig zu ändern... Klappt auch wunderbar, jedoch wenn ich die Funktion mit Mozilla Firefox (V3xxx) verwende, tritt folgender Fehler auf:

Wenn ich von einer markierten <tr> bzw <td> senkrecht die Mouse hoch in die obere oder untere <tr> bzw <td> bewege, färbt sich der komplette Hintergrund außerhalb der Tabelle in die "OnMouseOver-Farbe"... Wenn ich davor die Maus seitlich aus der Zeile bewege und dann in die unmarkierte Zeile bewege, treten keine Fehler auf...

Hier das JS Skript:

  
var highlightbehavior="TR"  
  
var ns6=document.getElementById&&!document.all  
var ie=document.all  
  
function changeto(e,highlightcolor){  
source=ie? event.srcElement : e.target  
if (source.tagName=="TABLE")  
return  
while(source.tagName!=highlightbehavior && source.tagName!="HTML")  
source=ns6? source.parentNode : source.parentElement  
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")  
source.style.backgroundColor=highlightcolor  
}  
  
function contains_ns6(master, slave) { //check if slave is contained by master  
while (slave.parentNode)  
if ((slave = slave.parentNode) == master)  
return true;  
return false;  
}  
  
function changeback(e,originalcolor){  
if (ie&&(event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")||source.tagName=="TABLE")  
return  
else if (ns6&&(contains_ns6(source, e.relatedTarget)||source.id=="ignore"))  
return  
if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)  
source.style.backgroundColor=originalcolor  
}

Und hier die HTML:

  
<html>  
<head><title>Eine Site</title>  
  <script type="text/javascript" src="./highlight_tr.js"></script>  
</head>  
<body>  
  
 <center>  
  
  <table onMouseover="changeto(event, '#d3bf13')" onMouseout="changeback(event, 'white')">  
   <tr><td>Hier befindet die erste Zeile</td></tr>  
   <tr><td>Hier befindet sich die zweite Zeile</td></tr>  
  </table>  
  
 </center>  
  
</body>  
</html>

Da ich mit Javascript nicht viel am Hut habe und eig da auch nicht unbedingt recht viel tiefer eindringen will, wäre ich euch sehr dankbar wenn ihr mir beim Debuggen helfen könntet. Herzlichen Dank,

MFG:
PsYcHo232

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Firefox 3 Problem mit onMouseOver Funktion...

    EKKi
    – Informationen zu den Bewertungsregeln

    Mahlzeit PsYcHo232,

    Bin leider neu hier, programmiere aber schon seit Jahren mit PHP.

    Und in der ganzen Zeit hast Du nie daran gedacht, Code der besseren Übersichtlichkeit halber einzurücken? ;-)

    Habe im I-Net n kleines Script gefunden um TRs bzw. TDs mittels Javascript bei einer OnMouseOver Funktion farbig zu ändern... Klappt auch wunderbar, jedoch wenn ich die Funktion mit Mozilla Firefox (V3xxx) verwende, tritt folgender Fehler auf:

    Firefox versteht schon seit einigen Versionen u.a. die CSS-Eigenschaft http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover - also benutze diesen überflüssigen Javascript-Code nur für überflüssige Browser, die so vorsintflutlich sind und diese Pseudoformate nicht kennen ...

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Firefox 3 Problem mit onMouseOver Funktion...

    molily Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Hallo,

    var ns6=document.getElementById&&!document.all
    var ie=document.all

    So eine Browsererkennung ist völlig veraltet. Du solltest dich mit Fähigkeiten- und Objektabfragen auseinandersetzen. Das macht deine Programmierung viel einfacher.
    Weder besteht die Welt heute aus Netscape 6 und Internet Explorer, noch sind diese Browsererkennungen irgendwie dazu geeignet, die benutzten Features abzufragen.

    function changeto(e,highlightcolor){
    source=ie? event.srcElement : e.target

    Installiere dir mal Firebug im Firefox und füge hier die Debug-Ausgabe ein:
    console.log(source);

    if (source.tagName=="TABLE")
    return
    while(source.tagName!=highlightbehavior && source.tagName!="HTML")
    source=ns6? source.parentNode : source.parentElement

    Und dann hier
    console.log(source);
    Da wirst du sehen, dass nach dieser Schleife die source das html-Wurzelelement ist.

    Durch das cellspacing ist zwischen den tr-Elementen eine Menge Platz - und wenn du die Maus von tr zu tr bewegst, dann fährst du über die Fläche des tbody-Elementes. Dort passiert dann auch der mouseover-Event. Wenn du von dort mit dieser Schleife aufsteigst, kommst du nie und nimmer zu einem tr-Element.

    Mathias

    --
    SELFHTML aktuell Weblog
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln