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 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2012
    Location
    Ontario, Canada
    Posts
    53
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Active Image Switch

    I use images for buttons and when I hover over the button, the images swap out. I would like to change the image upon the page being selected. I have set it up that the menu items are on one page that is linked on all pages.

    How do I determine which page I am on and how to use an active image on that page.

    I am trying to use the following but its not working:

    <script type="text/javascript">
    var curActive;
    function activateSection(section) {
    //revert currently active image if it is defined
    if(typeof(curActive) != "undefined")
    {
    var curImg = document.getElementById(curActive + "_img");
    curImg.src = "images/buttons/" + curActive + "_norm.png";
    }

    //make new image currently active
    var img = document.getElementById(section + "_img");
    img.src = "images/buttons/" + section + "_active.png";

    //put the requested section in the currently active variable
    curActive = section;

    }
    </script>

    <a href="member_dvd.php" onmouseover="image1.src='images/buttons/dvd_roll.png';" onMouseOut="image1.src='images/buttons/dvd_norm.png';" onclick="activateSection('dvd')">
    <img src='images/buttons/dvd_norm.png' name="image1" id='dvd_img' border="0" ></a>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts
    Provide a link to your images for testing purposes.
    Difficult to tell if working from code provided.

    You should also enclose you script between [ code] and [ /code] tags (without the spaces)
    to make it easier to copy, test and debug you scripts.

  • #3
    New Coder
    Join Date
    Mar 2012
    Location
    Ontario, Canada
    Posts
    53
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I don't know if this will be helpful - I can't provide the exact link to the website as it's s a locked down website

    http://www.zoomized.com/testing%20files/banner.php

    the links don't work

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,065
    Thanks
    36
    Thanked 497 Times in 491 Posts

    Lightbulb

    The links don't work because you have only referenced a portion of the program.

    The images can be viewed with the following.
    There are missing images, possibly because they are not in the baseURL path
    or they have been removed after testing or they were never there to begin with.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    var baseURL = 'http://www.zoomized.com/testing%20files/images/';
    var imgList = [
       'topbanner.png',
       'buttons/dvd_roll.png',
       'buttons/dvd_norm.png',
       'buttons/bluray_roll.png',
       'buttons/bluray_norm.png',
       'buttons/3D_roll.png',
       'buttons/3D_norm.png',
       'buttons/vod_roll.png',
       'buttons/vod_norm.png',
       'buttons/records_roll.png',
       'buttons/records_norm.png',
       'buttons/laminas_roll.png',
       'buttons/laminas_norm.png'
    ];
    </script>
    
    </head>
    <body>
    
    <script type="text/javascript">
    var str = '';
    for (var i=0; i<imgList.length; i++) {
      str += '<img src="'+baseURL+imgList[i]+'" border="1" title="'+imgList[i]+'"><br> '+imgList[i]+'<p>';
    }
    document.write(str);
    </script>
    
    </body>
    </html>
    Now what you want to do with the images, I am still unclear.
    You might want to contact the developer of the images to make sure they are not copyrighted before you use them.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    In any case, that code is overly complex.

    All you need is this:
    Code:
    <a href="member_dvd.php" onclick="activateSection('dvd'); return false;">
    <img src='images/buttons/dvd_norm.png' border="0" 
         onmouseover="this.src=this.src.replace('_norm','_roll');"
         onmouseout ="this.src=this.src.replace('_roll','_norm');"
    ></a>
    You *NEED* the return false shown there, else clicking on the <a> *WILL send you to "member_dvd.php". (It will reload the page, destroying *ALL* your JS efforts if this is already the member_dvd page.) If that's what you want, omit the onclick entirely. I can't see that it's doing anything useful.
    Last edited by Old Pedant; 02-21-2013 at 03:18 AM.
    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.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    OH! I get it! I have news for you: JavaScript variables *DO NOT CARRY OVER* from one page to the next. *PERIOD*. Se setting the variable curActive is a waste of time! After you return from the activateSection() call, the new page *WILL* be loaded and *ALL* JS variables will be lost. Poof.

    WRONG WAY entirely!
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    #myNavigation img {
        border: none;
    }
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td id="myNavigation" width="730px" colspan="2" align="justify" valign="bottom">
        <a href="member_dvd.php"><img src="images/buttons/dvd_norm.png" alt="dvd"></a>
        &nbsp;
        <a href="member_bluray.php"><img src="images/buttons/bluray_norm.png" alt="blueray"></a>
        &nbsp;
        <a href="member_3D.php"><img src="images/buttons/3D_norm.png" alt="3D"></a>
        &nbsp;
        <a href="member_vod.php"><img src="images/buttons/vod_norm.png" alt="vod"></a>
        &nbsp;
        <a href="member_records.php"><img src="images/buttons/records_norm.png" alt="records"></a>
        &nbsp;
        <a href="member_laminas.php"><img src="images/buttons/laminas_norm.png" alt="laminas"></a>
    </td>
    </tr>
    </table>
    
    <script type="text/javascript">
    (
      function( )
      {
          // first, find the tail part of the page we are on:
          var page = location.pathname;
          page = page.substring( page.lastIndexOf("_") + 1 ); // everything after last underline
          page = page.toLowerCase().replace(".php",""); 
          // so if the page was http://www.somesite/member_bluray.php
          // at this point the page variable should contain just "bluray"
    
          // get all the images inside our myNavigation <td>:
          var pix = documnent.getElementById("myNavigation").getElementsByTagName("img");
    
          // find the active image and attach event handlers at same time:
          for ( var p = 0; p < pix.length; ++p )
          {
              var pic = pix[p];
              if ( pic.alt == page ) 
              {
                  // if this image's alt valu matches the current page
                  pic.src = pic.src.replace("_norm","_active"); // then make it active
                  // and the mouse handlers
                  pic.onmouseover = function( ) {
                      this.src = this.src.replace("_active","_roll");
                  }
                  pic.onmouseout = function( ) {
                      this.src = this.src.replace("_roll","_active");
                  }
              } else {
                  // not the currently active image
                  pic.onmouseover = function( ) {
                      this.src = this.src.replace("_norm","_roll");
                  }
                  pic.onmouseout = function( ) {
                      this.src = this.src.replace("_roll","_norm");
                  }
              } 
          } // end of for loop
      } // end of anonymous function
    )(); // self-invoke anonymous function
    </script>
    </body>
    </html>
    How's that? Much cleaner, no?

    And we don't have to muck with the <a> links in any way!
    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.

  • #7
    New Coder
    Join Date
    Mar 2012
    Location
    Ontario, Canada
    Posts
    53
    Thanks
    9
    Thanked 0 Times in 0 Posts
    I have tried the code that you (Old Pedant) provided and the mouseover and active do not work.

    It stays static using the white images.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,324 Times in 4,290 Posts
    One *TINY* little error which, if you had just used your error console, you could have seen and fixed. PLEASE learn to use your debugger!!!

    Code:
          var pix = documnent.getElementById("myNavigation").getElementsByTagName("img");
    Just remove that one extra "n" and it all works.

    I have a test page to prove it, even using your images.

    I coded that off the top of my head. I couldn't test it as your images weren't there at the time. But you could have easily debugged and found it, saving yourself hours of waiting for me to see your post.
    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.

  • Users who have thanked Old Pedant for this post:

    chellert (02-25-2013)

  • #9
    New Coder
    Join Date
    Mar 2012
    Location
    Ontario, Canada
    Posts
    53
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thank you Old Pedant. I know I should have the error console on....


  •  

    Posting Permissions

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