Quick & Easy JavaScript Mouseover Images Without Using MooTools

Not everyone uses the MooTools framework or any framework for that matter so my article, MooTools Image MouseOvers - Cleaner JavaScript Code, Less Hassle, wouldn't apply to everyone. I do know, however, that most everyone has a need for a quick and simple JavaScript mouseover function that can be used without MooTools.

I've developed the following function for creating mouseover image functionality.

The Code

function mo(over_out, image) {
	var src = image.src, ext = src.substring(src.lastIndexOf('.'),src.length);
	image.src= (over_out == 1 ? src.replace(ext, '-mo' + ext) : src.replace('-mo' + ext, ext)); return; //ternary operators -- sweet!
}

The Usage

The Explanation

There are to two arguments -- over_out represents whether the mouseover or mouseout image should be displayed. "1" means the mouse is over, "0" means the mouse is out; "image" is the image object. If over_out is 1, the function replaces the file extension with "-mo." + {file-extension}. If over_out is 0, the function removes the "-mo". Simple, right?

This method isn't quite as slick as the MooTools method because you don't avoid the "onmouseover" and "onmouseout" attributes for the image, but it is minimal code inside each attribute. The JavaScript also uses ternary operators (works the same in JavaScript as it does in PHP.)

Do you have a better one? Please share!