Button is required to be pressed twice in order for image to change? Should only need to be pressed once.

Button is required to be pressed twice in order for image to change? Should only need to be pressed once.

I am working on a website that requires an image to change upon a button being pressed.

The index page actually calls JavaScript upon loading. It seems that a lot of the work is actually done in JavaScript / jQuery as you will see from the code provided.
I have come to a possible conclusion from going through this site (previous questions) that the problem resides in a div element.

The buttons are hidden, and once the user hovers over the 'menu' which is at the top of the index page, a jQuery algorithm executes a simple drop down to reveal the buttons in question. A point to note is that the buttons actually do their job correctly when pressed. I just need the image to change. Example - The button image is RED - OFF. Once pressed the button turns GREEN - ON.
Again this works, but the buttons need to be pressed twice to change the image.

Here is the code for the index page: 

  1. <body onLoad="init()"> </body>

Here is the code from the JavaScript file:

  1. '<div class="menu" style="background-color: #32373c; width: 100%; position: relative; margin: 0 auto; z-index: 1000; height: 100px; cursor: pointer;">' +
  2.  '<img src="resources/img/logo.png" style=" padding-left: 50px; padding-top: 20px;">' + 
  3. '<div class="sub" style="background-color: #32373c; color: #FFF; position: absolute; cursor: pointer; width: 100%; text-align; center; height: 200px; padding: 5px 0 3px; display: none; ">' +
  4.  '<div class="cdb-toolbar-line2-left">' + '<p style="color: white; padding-top: 10px; padding-right: 10px; float: left">Photos</p>' +
  5.  '<div style="float: left; padding-top: 2px;"><input type="checkbox" class="switch icons" id="cdb-baseLayer-toggle"></input></div>' +
  6.  '<p style="color: white; padding-top: 10px; padding-right: 10px; padding-left: 20px; float: left">Persons details</p>' +
  7.  '<div style="float: left; padding-top: 2px;"><input type="checkbox" class="switch icons" id="cdb-clickInfo-toggle"></input></div>' +
  8.  '</div>' +
  9.  '</div>' +
  10.  '</div>' 
  11. /* ----- HOVER ----- */ 
  12. $(function() {
     $
    (".menu").hover( function() {
     $
    (".sub").stop().slideToggle(400); }, 
    function() { 
    $
    (".sub").stop().slideToggle(400); }
     ); 
    });
     
  13. /* ----- BUTTON PRESSED ----- */ 
  14. $('#cdb-baseLayer-toggle').slickswitch
    ({
     toggledOn: function() {
     // switched on me.toggleBaseLayer(); },
     toggledOff: function() {
     
    // switched off me.toggleBaseLayer(); }
     
    }); 
    $
    ('#cdb-clickInfo-toggle').slickswitch
    ({
     toggledOn: function() { 
    // switched on
     me.toggleClickInfo(); },
     toggledOff: function() { 
    // switched off
     me.toggleClickInfo(); } });


Here is the CSS to the button change: 

  1. .switch { position: relative; display: inline-block; width: 34px; height: 35px; cursor: pointer; background: url(../img/off_power_button.png) 0 0px no-repeat; }


    .switch .ss-on { position: absolute; display: inline-block; width: 34px; height: 35px; background: url(../img/blue_power_button.png) 0 0px no-repeat; }
    .switch.icons { background: url(../img/off_power_button.png) 0 0px no-repeat; background-position: 0 0px; } 
    .
    switch.icons .ss-on { background: url(../img/blue_power_button.png) 0 0px no-repeat; }

The switch icons class actually calls the css code above.

The sub class belongs to the drop down menu and the remaining code below it belongs to the buttons that appear when the hover kicks in.

Is there a way I can somehow add (perhaps to get it working) extra jQuery code for the image swap on click event?


Any help is greatly appreciated. Please forgive any errors in my code here. Still familiarizing myself with HTML - CSS - jQuery.

Many thanks.