Webdesign mit CSS, HTML und Javascript
Stil mit {stil}
![]() Fotos für das Internet aufbereiten foto.5lux.de Online-Magazin für Fotografie und Bildbearbeitung |
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>
