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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing an image based on the URL you're at?

    Total noob with javascript and relatively new to html. I've been searching the scripts and am sure this has to be possible but I can't seem to put two and two together.

    I'm writing a simple html document right now just to try and keep all of the complex stuff out. My web site is going to have a navigation bar which will have seven options. I'm going to utilize rollover graphics to show "over" and "off" images. When you're on the home page, all of the graphics will be "off" on the bar. When the mouse rolls over, that image (in this example the Contact Us button) will have a white line appear under the words. I've called the images image1_over and image1_off. Here they are (very simple, I know).



    However, when I'm on the Contact Us page, I want the image to always be "over." So there will be a white line under the text (like the second image above). I found the code to check the URL. I found the code for the case statement (so I will be able to check for each of the seven options). And the code partially works. Once on that page, if you roll over the image, the line appears. When you mouseoff, the line stays.

    But the problem is that when the page is first loaded, the line is not there. I'm assuming that is because the <img> tag is telling it to show the "off" image.

    Is there some way to run an "if" statement to determine which image to show in the <img> tag? Is there a better way to do what I'm trying to do?

    Here is the code I've got (for the whole page). As I said, for this learning experience I'm trying to keep the code as simple as possible.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    	<title>Page 1</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script>
    
    <!-- begin
    
    image1off= new Image();
    image1off.src= "image1_off.png";
    
    image1over= new Image();
    image1over.src= "image1_over.png";
    
    // end --
    
    
    <!-- begin section to check for URL and change image in nav bar accordingly
    
    var myURL = window.location.href;
    
    switch (myURL)
    {
    case "http://www.mysite.com/contactus.html":
      image1off.src = "image1_over.png";
      break;
    default:
      document.write("not on that page");
    }
    
    // end of url check section -->
    
    </script>
    
    </head>
    
    <body> 
    
    <div align="center">
    <br>
    <a href="whatever.htm" onmouseover="document.images['image1'].src=image1over.src" onmouseout="document.images['image1'].src=image1off.src">
    <img src="image1_off.png" name="image1"></a>
    </div>
    
    </body>
    </html>
    As I said, I'm a total noob at javascript and relatively new to html. If you can help, please please please keep the explanations as simple as possible. If there is a better way to do what I'm attempting to do I welcome all suggestions.

    Any and all suggestions/ideas/thoughts/concerns/examples/etc are greatly appreciated.

    This is my first post here so I hope I provided everything that is needed. If I have to provide more information or clarify anything, please let me know.

    Thank you in advance.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Would you mind a rewrite?

    I assume that you want to be able to drop the *SAME* JS code into each page, maybe use ".shtml" and a #include to get your navigation, for example?

    So how about this:
    Code:
    <script>
    // from the current page's href, find *just* the root name
    // so if the page is "http://www.mysite.com/subdir/games.html"
    // then the thispage variable should end up with just games
    var pageparts = location.href.split(/\//g);
    var thispage = pageparts[pageparts.length-1].split(/\./)[1];
    
    // create the set of both over and off images (I show 3 here):
    var overs = {"home":"home_over.png", "contact": "contact_over.png", "games": "games_over.png"};
    var offs  = {"home": "home_off.png", "contact": "contact_off.png", "games": "games_off.png"};
    
    // and then for thispage, copy the overs image url to the offs url
    // (so that for the current page the image acts like it is *always* over)
    offs[thispage] = overs[thispage];
    
    // finally, preload all the over images:
    var nm;
    var overimages;
    for ( nm in overs )
    {
        overimages[nm] = new Image;
        overimages[nm].src = overs[nm];
    }    
    </script>
    
    ...
    <body>
    ...
    <script>
    // and here we generate the visible buttons:
    for ( nm in offs )
    {
        document.write( '<img src="' + offs[nm] + '" '
            + ' onmouseover="this.src=overs[\'home\'];" '
            + ' onmouseout="this.src=offs[\'home\'];"> '
    }
    ...
    Utterly untested. Off the top of my head. I think it's a great idea I might find a use for later, so I hope it works!

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Would you mind a rewrite?

    I assume that you want to be able to drop the *SAME* JS code into each page, maybe use ".shtml" and a #include to get your navigation, for example?

    So how about this:

    ...

    Utterly untested. Off the top of my head. I think it's a great idea I might find a use for later, so I hope it works!
    A re-write is fine by me. I liked what I saw. But one thing I can't figure out.

    How do I get the images themselves to appear on the page? I copied what you wrote but I'm not getting any images to appear. I tested it in IE 7, FF 3.0.10 and Chrome.

    What would I put in the body section to make the images appear?

    Thank you again for the help and sorry for the total noob follow-up question.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Well, *this* part of the code is *supposed* to output the buttons:
    Code:
    <body>
    ...
    <script>
    // and here we generate the visible buttons:
    for ( nm in offs )
    {
        document.write( '<img src="' + offs[nm] + '" '
            + ' onmouseover="this.src=overs[\'home\'];" '
            + ' onmouseout="this.src=offs[\'home\'];"> '
    }
    Except I utterly messed that up. Rather than fix it, and make it more complex, let's *NOT* use JS to write into the <body>.

    See if this works better:
    Code:
    <body> 
    
    <div align="center">
    <br>
    <a href="home.htm">
        <img src="home_off.png"
             onmouseover="this.src=overs['home'];"
             onmouseout="this.src=offs['home'];"
        ></a>
    
    <a href="contact.htm">
        <img src="contact_off.png"
             onmouseover="this.src=overs['contact'];"
             onmouseout="this.src=offs['contact'];"
        ></a>
    
    <a href="games.htm">
        <img src="games_off.png"
             onmouseover="this.src=overs['games'];"
             onmouseout="this.src=offs['games'];"
        ></a>
    
    </div>
    
    </body>
    Note that I made up the image names and even the ".htm" and button names. You'd need to adjust to your code.

    If it doesn't work, can you please post the complete code as you have it?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    I see another goof.

    This line:
    Code:
    var thispage = pageparts[pageparts.length-1].split(/\./)[1];
    should have a zero there instead of the last 1, thus:
    Code:
    var thispage = pageparts[pageparts.length-1].split(/\./)[0];
    I must have been tired.

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First off, Old Pedant, thank you for all the help so far. Sorry it's been a couple of days but I just got back into town this morning.

    The code works except for on initial page launch. To change as little as possible of your code, I went ahead and created 6 images to match the names you used in your initial post ("home_over.png," "home_off.png," etc.).

    For testing purposes I only put one image on the page but named the page home.html. When the form first launches it shows the image being "off" (even though a document.write(thispage); shows "home" as the page. Once you mouseover the image it changes to the "over" (like it should) and when you leave it stays "over" (which is perfect).

    But on the page load it shows it as off. Here is the code I have thus far:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    	<title>Test Page 1</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script>
    
    // from the current page's href, find *just* the root name
    // so if the page is "http://www.mysite.com/subdir/games.html"
    // then the thispage variable should end up with just games
    var pageparts = location.href.split(/\//g);
    var thispage = pageparts[pageparts.length-1].split(/\./)[0];
    
    document.write(pageparts);
    
    // create the set of both over and off images (I show 3 here):
    var overs = {"home":"home_over.png", "contact": "contact_over.png", "games": "games_over.png"};
    var offs  = {"home": "home_off.png", "contact": "contact_off.png", "games": "games_off.png"};
    
    // and then for thispage, copy the overs image url to the offs url
    // (so that for the current page the image acts like it is *always* over)
    offs[thispage] = overs[thispage];
    
    // finally, preload all the over images:
    var nm;
    var overimages;
    for ( nm in overs )
    {
        overimages[nm] = new Image;
        overimages[nm].src = overs[nm];
    }
    
    </script>
    
    </head>
    
    <body> 
    
    <div align="center">
    <br>
    <br>
    <br>
    <a href="home.htm">
        <img src="home_off.png"
             onmouseover="this.src=overs['home'];"
             onmouseout="this.src=offs['home'];"
        ></a>
    
    <br>
    
    <script type="text/javascript">document.write(thispage);</script>
    
    
    </div>
    
    </body>
    </html>
    Is there maybe some way of running an "if-else" check before writing the "img src" line in the <body> section of the code? Then we could run a "if thispage = "home" then over else off" for the img src?

    Thanks again and I look forward to any other suggestions for me to try. Even though I bang my head it is fun to learn :D

  • #7
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    Can I suggest another tack to this problem, based on styling rather than scripting. The concept is that you give each page a class, such as "Home", "Contacts" etc, and ech image is given an appropriate ID such as "ContactOn" or "ContactOff". Your style sheet will provide the default styings for each image, and will then add styles where there is a different style for a specific page. Thus if your "Contacts" images do not appear on the home page, then you could have a style spec such as:
    Code:
    .Home #ContactOn, .Home #ContactOff { display: none; }
    
    .Contacts #ContactOn:hover { Whatever you need }
    .Contacts #ContactOff:hover { Whatever you need }
    You can add appropriate :active or other modifications as needed.

    John

  • #8
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actinia - I looked into some CSS alternatives but I don't think they will work in my case. The site is hosted on a system where all header/navigation are loaded from the same file every time. So there is a "header" section that gets drawn before everything else. That same file will be used on every page. Would CSS work on a system like that?

  • #9
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    You clearly will need access to the source of the header text to add the ID attributes, so that you can apply a selector to specific elements, that is unless you can devise a suitable selector that will uniquely specify the element you want. You can certainly apply CSS to anything loaded from this standard header.

    Failing that it would be possible to use Javascript to seek out your elements and add an ID attribute. However, I suspect that this would be more trouble than it was worth.

    Do you have a url that we could look at?

    John

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Ummm....I assumed that you would show *ALL* that links on *ALL* pages.

    That is, you would have:
    Code:
    <div align="center">
    <br>
    <br>
    <br>
    <a href="home.htm">
        <img src="home_off.png"
             onmouseover="this.src=overs['home'];"
             onmouseout="this.src=offs['home'];"
        ></a>
    <a href="games.htm">
        <img src="games_off.png"
             onmouseover="this.src=overs['games'];"
             onmouseout="this.src=offs['games'];"
        ></a>
    <a href="contacts.htm">
        <img src="contacts_off.png"
             onmouseover="this.src=overs['contacts'];"
             onmouseout="this.src=offs['contacts'];"
        ></a>
    <br>
    So maybe we have been talking "at odds" this whole time??

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Oh, man...I am a doofus. I was thinking backwards this whole time.

    On my own pages, I want to essentially "disable" the "over" mechanism for the page I am on. That is, I want the button to *STAY* OFF all the time.

    You want the opposite: You want the button to for the current page to turn on and stay *ON*.

    DOH.

    Okay...let's somewhat start over...HOW will you include the navigation on each page?? Are you using ".shtml" or some other server-side capability to include the nav source code onto each page? Or are you expecting to use JavaScript code and document.write to create the nav via <script src="nav.js"></script> ???

  • #12
    New to the CF scene
    Join Date
    May 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Ummm....I assumed that you would show *ALL* that links on *ALL* pages.

    That is, you would have:
    Code:
    <div align="center">
    <br>
    <br>
    <br>
    <a href="home.htm">
        <img src="home_off.png"
             onmouseover="this.src=overs['home'];"
             onmouseout="this.src=offs['home'];"
        ></a>
    <a href="games.htm">
        <img src="games_off.png"
             onmouseover="this.src=overs['games'];"
             onmouseout="this.src=offs['games'];"
        ></a>
    <a href="contacts.htm">
        <img src="contacts_off.png"
             onmouseover="this.src=overs['contacts'];"
             onmouseout="this.src=offs['contacts'];"
        ></a>
    <br>
    So maybe we have been talking "at odds" this whole time??
    No, I think we're talking the same only a little different. Navigation will all be included on each page. To keep things as simple for me I was only using one image just to see if the on-off code worked.

    You asked "how" I'm doing this. It's straight-forward .html and javascript. Again, I'm new to both. There is a "header" that will be included on every page. Then there is the left-side, content, right-side and footer. The code for the left side, content, right side and footer doesn't have all the initial .html stuff (meta-tags, body, head, etc.). That's all taken from the "header" page that is first loaded. The footer containts the close body tag, the close html tag, etc (plus it's own content).

    So the javascript is going into the "header" file and will then be available for all other sections (which already works with pop-up window javascript code).

    So in terms of navigation you will see all seven navigation options. Depending on the page you're on one of the buttons will be "on." So, if you're in About Us, that button will be ON and the other six will be off. They will each go "on" when mouseover occurs. And, of course, if you're on one of the other pages, About Us will be off until rolled over.

    That's why initially I thought I could check the URL and then set the "off" image equal to the "on" image source.

    Thanks again. I'm sorry if the stuff I wrote was confusing. If there is anything else I need to provide please let me know.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Still not clear *HOW* you are including the header in every page. You are using a server-side include of some kind??? That is <!-- #include...--> with ".shtml" files? Or using something like require_once( ) in PHP?

    Anyway, I agree we were trying to do *almost* the same thing. But I had it bass-ackwards. I was setting it up so that, for the current page, the "on" image was same as "off" image, meaning you would never see a change in current page's button. That's how I'm used to doing it. Sorry.

    Anyway, now that I know your include (however you do it) is both HTML and JS (not just pure JS) I'll try again.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,576
    Thanks
    80
    Thanked 4,497 Times in 4,461 Posts
    Okay...here goes...redo from start.

    100% UNTESTED. If it doesn't work and the goofs aren't obvious, let me know.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    	<title>Test Page 1</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    var overs = new Array();
    
    function setupNav( )
    {
        // from the current page's href, find *just* the root name
        // so if the page is "http://www.mysite.com/subdir/games.htm"
        // then the thispage variable should end up with just "games.htm"
        var pageparts = location.href.split(/\//g);
        var thispage = pageparts[pageparts.length-1];
    
        // find the navigation div:
        var nav = document.getElementById("NAV");
        // find all the links in that div:
        var links = nav.getElementsByTagName("a");    
        // loop through all links:
        for ( var i = 0; i < links.length; ++i )
        {
            // get one link and image it holds
            var link = links[i];
            var image = link.getElementsByTagName("img")[0];
            // now, what we do depends on whether the href refers to current page or not:
            if ( link.href == thispage )
            {
                // for the link to current page:
                // -- disable the link
                // -- change the image to the "over" version:
                link.href = "#"; // shouldn't need this...can't hurt
                link.onclick = function(){ return false; }
                image.src = image.src.replace("_off","_over");
            } else {
                // for all other links, set up the mouseover/out events for the images:
                image.onmouseover = function(){ this.src = this.src.replace("_off","_over"); }
                image.onmouseout  = function(){ this.src = this.src.replace("_over","_off"); }    
                // and preload the over image:
                overs[i] = new Image();
                overs[i].src = image.src.replace("_off","_over");
            }
        } // end of loop
    } // end of setupNav
    </script>
    </head>
    
    <body onload="setupNav();"> 
    
    <div id="NAV" align="center">
    <br><br><br>
    <a href="home.htm"><img src="home_off.png"></a>
    <a href="games.htm"><img src="games_off.png"></a>
    <a href="contacts.htm"><img src="contacts_off.png"></a>
    <br>
    </div>
    
    </body>
    </html>


  •  

    Posting Permissions

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