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 ...".