Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,437
    Thanks
    75
    Thanked 4,372 Times in 4,337 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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!!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •