Struppi: Eventeigenschaften - Unterschiede srcElement/target

Beitrag lesen

Die Lösung wäre also, wenn du vor dem austauchsen die Events inaktivierst (zumindest den mouseout) und danch wieder aktivierst.

Das Inaktivieren funktioniert (wenn ich das anschl. Aktivieren weglasse)
Wenn ich aber anschließend wieder aktiviere, tut sich gar nichts (kein Textwechsel aber auch keine Fehlermeldung).

Du machst eine Sache falsch, aber meine Schlussfolgerung heute morgen war es auch.

document.getElementById('Text').onmouseout=null;    <==============
   document.getElementById('Text').innerHTML = Text;
   document.getElementById('Text').onmouseout=tauschen (txtBild1);  <=====

Du musst hier die Referenz auf die Funktion zuweisen, nicht die Funktion aufrufen. Da du den Parameter brauchst musst du eine anonyme Funktion verwenden.

document.getElementById('Text').onmouseout= function() {  
tauschen (txtBild1);  
};  

Aber das funktioniert auch nicht, da das ganze Problem ein MischMasch aus allen ihr genannten Symptomen ist. Auf die schnelle fällt mir nur ein Workaround ein, der allen Elementen innerhalb des DIV ebenfalls einen mousover-Event zufügt. Allerdings musst du noch eine Prüfung einbauen, da ansonsten die Funktion permanent beim überfahren der Unterelemente aufgerufen wirde.

Das ganze sieht bei mir so aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
       "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>Bildwechsel Test-neu</title>  
<script type="text/javascript">  
var txtBild1 = '<h1>Überschrift 1<\/h1>'  
    + '<p>Text Bild1 <strong>Zeile 1<\/strong><\/p>'  
    + '<p>Text Zeile 2<\/p>'  
    + '<p><strong>und ...<\/strong><\/p>';  
var txtBild2 = '<h1>Überschrift 2<\/h1>'  
    + '<p>Text Bild2 <strong>Zeile 1<\/strong><\/p>'  
    + '<p>Text Zeile 2<\/p>'  
    + '<p><strong>und ...<\/strong><\/p>';  
  
function tauschen(el, evt, Text) {  
 var evt_el = evt.target || evt.srcElement;  
 if(el != evt_el) return;  
 document.getElementById('Text').innerHTML = Text;  
 var all = document.getElementById('Text').getElementsByTagName('*');  
 for(var i = 0; i < all.length; i++) {  
  all[i].onmouseover = function(e){  
  document.getElementById('Text').innerHTML = Text;  
 }  
 }  
  }  
</script>  
<style type="text/css">  
  #Text *{  
  background-color: #ffe;  
  border:1px solid black;  
  }  
  
  div#Text {  
    margin-left: 520px;  
    padding: 3em 1em;  
    border: 1px dashed green;  
  }  
</style>  
</head>  
<body>  
<div id="Text"  
     onmouseover="tauschen (this, event, txtBild2)"  
     onmouseout="tauschen (this, event, txtBild1)">  
     <h1>Überschrift</h1><p>Text Bild1 <strong>Zeile 1</strong></p><p>Text Zeile 2</p><p><strong>und ...</strong></p>  
</div>  
</body>  
</html>

ABER!

Ich stelle grad fest dass der IE 7 her nicht mitspielt, da seltsamerweise srcElement nicht das Gleiche ist wie target, wovon ich bisher immer ausgegangen bin und auf allen Seiten die ich bisher gesehen habe wurde diese Eigenschaften auch synonym eingesetzt.

Im Moment bin ich etwas ratlos.

Struppi.