onMouse-Events in div für Netscape/Firefox

[Mike]

Hallo

Ich habe folgendes einfaches Script und HTML-Code, im IE alles toll, aber der Firefox/Netscape will nichts von den onMouse-Events in einem div wissen...

Kann mir jemand helfen, das anzupassen??

Danke im Voraus und grüsse
Mike

<SCRIPT language="javascript">
  function rollon() {
    if (event.srcElement.className == "item") {
       event.srcElement.className = "highlight";
       document.all("g0text").style.display = "none";
       document.all(event.srcElement.id + "text").style.display = "";
    }
  }

function rolloff() {
    if (window.event.srcElement.className == "highlight") {
       window.event.srcElement.className = "item";
       document.all("g0text").style.display = "";
       document.all(event.srcElement.id + "text").style.display = "none";
    }
  }
</SCRIPT>

<div style="width:165px" onMouseover="rollon()" onMouseout="rolloff()" onClick="location.href('prfls.php?show=1&id=<? echo $db->datensatz[$i]["profil"]; ?>')">
</div>

[molily]

Hallo,

<SCRIPT language="javascript">

<script type="text/javascript">

function rollon() {
    if (event.srcElement.className == "item") {
       event.srcElement.className = "highlight";
       document.all("g0text").style.display = "none";

1. Firefox erlaubt den Zugriff auf das Event-Objekt nicht über window.event, sondern die Handler-Funktionen bekommen das Event-Objekt als Parameter übergeben. So hast du in allen Browsern auf das Event-Objekt Zugriff:
function Handler (Eventobjekt) {
  if (!Eventobjekt)
    Eventobjekt = window.event;
  alert(Eventobjekt);
  /* ... */
}

2. srcElement ist ebenso wie window.event eine Microsoft-Erfindung, im Netscape und anderen Browsern heißt die Eigenschaft target. So hast du in allen Browsern auf das Zielobjekt Zugriff:
var Zielobjekt = false;
if (Eventobjekt.target) {
  Zielobjekt = Eventobjekt.target;
} else if (Eventobjekt.srcElement) {
  Zielobjekt = Eventobjekt.srcElement;
}
alert(Zielobjekt);

3. document.all ist ebenso wie window.event und srcElement eine Microsoft-Erfindung und wird von Firefox zwar unterstützt, aber du solltest hier document.getElementById() verwenden.
if (document.getElementById) {
  document.getElementById(Zielobjekt.id + "text").style.display = "";
} else if (document.all) {
  document.all(Zielobjekt.id + "text").style.display = "";
}

<div style="width:165px" onMouseover="rollon()" onMouseout="rolloff()"

Wenn du die Event-Handler im HTML zuweist, kommst du im Firefox nie an das Event-Objekt. Du musst sie über JavaScript vergeben, also z.B. Elementobjekt.onmouseover = rollon;. Für den Zugriff auf das Elementobjekt kannst du wieder getElementById() usw. verwenden, siehe http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#allgemeines.

Mathias

[Mike]

Hallo Mathias

Vielen Dank für Deine wirklich ausgesprochen ausführliche Antwort. Ich bin in JavaScript völlig unerfahren und habe das Script natürlich nur übernommen, nicht selbst geschrieben... jetzt komme ich mit Deiner Antwort nicht wirklich klar.
Wäre es für Dich zu aufwändig, meine Angaben direkt so umzuschreiben, dass ich sie nur noch übernehmen kann?? Das wäre natürlich spitze!! Ansonsten werde ich mich schon selbständig bemühen, dauert halt einfach lange...

Danke und Gruss
Mike

[molily]

Hallo,

Normalerweise werden hier keine fertigen Scripte gepostet, weil »SELFHTML« vom »Selbermachen« kommt, aber ich habe einen Aspekt unterschlagen: Man kann auch einfach das Elementobjekt mit »this« an die Handler-Funktionen übergeben, dann spart man sich den ganzen Ärger mit dem Event-Objekt:

<script type="text/javascript">
function rollon (element) {
  if (document.getElementById && element.className == "item") {
    element.className = "highlight";
    document.getElementById("g0text").style.display = "none";
    document.getElementById(element.id + "text").style.display = "block";
  }
}
function rolloff (element) {
  if (document.getElementById && element.className == "highlight") {
    element.className = "item";
    document.getElementById("g0text").style.display = "block";
    document.getElementById(element.id + "text").style.display = "none";
  }
}
</script>

<div id="irgendwas" onmouseover="rollon(this)" onmouseout="rolloff(this)" ...>...</div>

Mathias

[Mike]

Hallo

Super, habs mit ein paar Anpassungen hingekriegt, läuft auch im Firefox tipp top.

Viiiielen Dank :-)

Gruss
Mike