CodingForums.com - Creating Unobtrusive HTML/Javascript

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Creating Unobtrusive HTML/Javascript (http://www.codingforums.com/showthread.php?t=251358)

Creating Unobtrusive HTML/Javascript

I am trying to remove all Javascript code from my HTML doc and put into external .js file(s). I have event triggers that I would like to move to an external file, but I am not sure how. Below is an example.
[CODE]
<a href="residential.html" class="textdeco" >
<img class="img-menu" id="res" src="images/buttons/btn_res_mouse_out.jpg" alt="Residential"
onmouseover="FP_swapImg(1,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_over.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_out.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_down.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'res',/*url*/'images/buttons/btn_res_mouse_up.jpg')" />
[CODE]

The reason I want to do this is that this code is repeated in all pages and I want to reduce potential maintenance issues. Any help will be appreciated.

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

Thanks for the post. The original code that I posted was already in the web pages. I have not taken the time to dig into the code to see why it works and I knew there had to be a better and simpler way to do what this was doing, I just needed a boost in the right direction. I will check out what you posted to see how I can use it. Thanks again!!:thumbsup: