Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 02-12-2012, 03:43 AM   PM User | #1
NiceTxn
New to the CF scene

 
Join Date: Feb 2012
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
NiceTxn is an unknown quantity at this point
Question 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.
NiceTxn is offline   Reply With Quote
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,579
Thanks: 62
Thanked 4,063 Times in 4,032 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
Old 02-12-2012, 05:18 AM   PM User | #3
NiceTxn
New to the CF scene

 
Join Date: Feb 2012
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
NiceTxn is an unknown quantity at this point
Javascript

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!!
NiceTxn is offline   Reply With Quote
Reply

Bookmarks

Tags
javascript, onmouseover, onmouseup

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 05:52 AM.


Advertisement
Log in to turn off these ads.