View Single Post
Old 02-12-2012, 04:11 AM   PM User | #2
Old Pedant
Supreme Master coder!

 
Old Pedant's Avatar
 
Join Date: Feb 2009
Posts: 23,556
Thanks: 62
Thanked 4,056 Times in 4,025 Posts
Old Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to allOld Pedant is a name known to all
Well, for starters I would try to find something a bit smarter than that FP_swapImg function.

Why would you pass the id of an image when you could instead just pass this and thereby pass the correct reference.

And I don't know what the 1,0 and 0,0 are for, but I'll bet they are pretty useless, too. If not, please prove me wrong.

But the big problem: How do you pass along all four image URLs without the separate calls?

The answer is actually pretty easy. *IF* you use a *CONSISTENT* naming convention for all the images, we can do it by text pattern substitution.

For the sake of argument, let's assume that all your image names *END* in the pattern "_mouse_xxx.jpg".

So now it's pretty easy:
Code:
function setup( )
{
    var images = document.getElementsByClassName("img");
    for ( var i = 0; i < images.length; ++i )
    {
        var image = images[i];
        if ( image.className == "img-menu" )
        {
            image.onmouseover = function() { mouse_over(this); };
            image.onmouseout  = function() { mouse_out(this); };
            image.onmousedown = function() { mouse_down(this); };
            image.onmouseup   = function() { mouse_up(this); };
        }
    }
}
function mouse_over( image )
{
    image.src = image.src.replace(/_mouse_[^\.]+\./, "_mouse_over.");
}
function mouse_out( image )
{
    image.src = image.src.replace(/_mouse_[^\.]+\./, "_mouse_out.");
}
function mouse_down( image )
{
    image.src = image.src.replace(/_mouse_[^\.]+\./, "_mouse_down.");
}
function mouse_up( image )
{
    image.src = image.src.replace(/_mouse_[^\.]+\./, "_mouse_up.");
}
// if you put this code at the END of your page:
setup( );
// if you put this code at the TOP:
window.onload = setup;
// or use attachEvent or or or
In all four of the mouse_xxxx functions, the regular expressions says "find the string _mouse_ followed by one or more non-periods followed by one period." And then the replace says "replace what you found with ...".
__________________
An optimist sees the glass as half full.
A pessimist sees the glass as half empty.
A realist drinks it no matter how much there is.
Old Pedant is offline   Reply With Quote