Dynamic Mouseover and Mouseout Techniques
Here is a code sample that converts text in each paragraph to upper case when you place a mouse over it and returns to the original value on mouseout. This may be stupid but it does illustrate a few DOM techniques including how to get a reference to all page elements, and how to create additional properties on an object. Works only in Firefox at this time.
function ucListener(){
//save the existing text in a custom property
this.firstChild.oldValue = this.firstChild.nodeValue;
this.firstChild.nodeValue = this.firstChild.nodeValue.toUpperCase();
}
function ucListenerOut(){
this.firstChild.nodeValue = this.firstChild.oldValue;
}
function installAllListeners() {
var elements = document.getElementsByTagName(’*');
var i = elements.length;
while(i–>0){
elements[i].addEventListener(’mouseover’, ucListener, false);
elements[i].addEventListener(’mouseout’, ucListenerOut, false);
}
}
