Stil mit {stil}

Aug 2007

Javascript onmouseover • Wenn die Maus ein Element betritt

Javascript Event mouseover • für alle Elemente außer APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

onmouseover ruft einen Event Handler auf, wenn die Maus in ein Element bewegt wird.

Attribute

type

Typ des Ereignisses

target

Objekt zu dem das Ereignis ursprünglich gesendet wurde

eventPhase

Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE

bubbles

true, wenn das Ereignis nach oben steigen kann

cancelable

true, wenn die Aktion des Ereignis verhindert werden kann

timeStamp

Zeit in Millisekunden, zu der das Ereignis eingetreten ist

screenX, screenY, clientX, clientY

Position des Mauszeigers zum Zeitpunkt des Ereignisses

altKey, ctrlKey, shiftKey, metaKey

zusätzlich gedrückte Tasten

button

die Maustaste, die das Ereignis auslöst

relatedTarget

Beim mouseover das Element, das die Maus verlässt, wenn sie das Ereignis-auslösende Element betritt, beim mouseout-Ereignis das Element, das die Maus betritt, wenn sie das Ereignis-auslösende Element verlässt.

Beispiel

addLoadEvent(changeVal);

function changeVal() {
   var myImage = document.getElementById('image1');
   var theBox = myImage.parentNode;
   myImage.onmouseover = function (evt) {
      evt = (evt) ? evt : ((window.event) ? window.event : "");
      var elem = (evt.target) ? evt.target : evt.srcElement;
      var relTarget = (evt.relatedTarget) ? evt.relatedTarget : evt.fromElement;
      var response = document.getElementById ('response');
      response.innerHTML = ' Maus kommt von ' + relTarget.tagName; 
      if (myImage.src == 'citrus.png') {
      	myImage.src = 'spice.png';
      } else if (myImage.src == 'spice.png') {
        myImage.src = 'citrus.png';
      } 
   }    
}

<div><img src="citrus.png" id="image1" width="261" height="200" alt="citrus.png" /></div>
<p id="response"></p>