MouseOver Event bei übereinderliegenden Divs

[rollerueckwaerts]

Heyho,
ich habe 2 ineinander verschachtelte Divs und möchte abfangen, auf welcher Div gerade die Div liegt, und dementsprechend ein Bild ändern.

Soweit funktioniert alles, nur das der Event der "Hintergrund-Div" immer ausgelöst wird obwohl sich die Maus gerade über der Div befindet, die über der "Hintergrund-Div" liegt.

Wie schaffe ich es das beim mouseover verschiedener divs auch verschiedene Events ausgeführt werden ?

<script>
function changePicture(url,bildname) {

 document.getElementById(bildname).src = url;

}

function changePictureToReset() {

 document.getElementById('menuImage').src = 'images/choose.png';

}
</script>


<div id="site" onMouseOver="changePictureToReset()">
<div id="container" onMouseOver="changePicture('images/image1.png','menuImage')>
......
......
</div>
</div>

Danke schonmal jetzt

 

[Quaese]

Hi,

hört sich so an, als müsstest du das Weiterreichen des Events unterbinden. Hierfür steht dir für den IE die Eigenschaft cancelBubble zur Verfügung. Für Browser, die das Eventhandling nach DOM unterstützen, die Methode stopPropagation.

Deine Funktion changePicture würde wie folgt aussehen:

function changePicture(evt, url, bildname) {
  if(window.event){
    window.event.cancelBubble = true;
  }else{
    evt.stopPropagation();
  }

 document.getElementById(bildname).src = url;
}

Als erstes Argument erhält die Routine ein Event-Objekt, das im inneren ausgewertet wird.

Der Aufruf im onmouseover-Event sieht nun wie folgt aus:

<div id="container" onmouseover="changePicture(event, 'images/image1.png','menuImage')>

Ciao
Quaese