Quick & Easy JavaScript Mouseover Images Without Using MooTools

By  on  

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

Home

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!

Recent Features

  • By
    JavaScript Promise API

    While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

  • By
    Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

  • By
    Control Element Outline Position with outline-offset

    I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...

  • By
    Flashy FAQs Using MooTools Sliders

    I often qualify a great website by one that pay attention to detail and makes all of the "little things" seem as though much time was spent on them. Let's face it -- FAQs are as boring as they come. That is, until you...

Discussion

  1. I never really used any of those libraries but after reading some of these articles that explain how to not use them I think that many people rely too much on these bloated libraries.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!