Javascript Function

[RoyDot]

Hi there!
I'm new in JavaScript - I have a few button that i want to change their background image when i click them.
What am I doing wrong? This is my code:

<script type="text/javascript">          
      function Seat_OnClick(control)
        {
            var selectedImg = "url(../images/selected_seat.jpg) no-repeat transparent";
            var deselectImg = "url(../images/normal_seat.jpg) no-repeat transparent";
            var handiImg = "url(../images/handicap_seat.jpg) no-repeat transparent";         
            if (control.style.backgroundImage == selectedImg)
                control.style.backgroundImage  = deselectImg;
            else if (control.style.backgroundImage  == deselectImg || control.style.backgroundImage  == handiImg)
                control.style.backgroundImage  = selectedImg;
            else if ((control.id == seat1_3 || control.id == seat1_4 || control.id == seat1_5) && control.style.backgroundImage  == selectedImg)
                control.style.backgroundImage  = handiImg; 
        }
      </script>

      <button class="seat_button" id="seat1_1" onclick="Seat_OnClick(this)"></button> 


  The buttons are inside a table...

[urtrivedi]

what is the problem? whats happening? or what not happening?

[RoyDot]

the background doesn't change..

[almostbob]

url includes http : // fullpathtoimage (uri broken so that would not become link) image is changed from the user browser, cannot locate the image
first run of this script will cause considerable delays downloading the image appararent speed can be improved by placing an image fetch between </body> and </html>

</body>
<script type="text/javascript">
//<![CDATA[
<!-- 
image1 = new Image();
image1.src = "http://uri/logo2.jpg";
image2 = new Image();
image2.src = "http://uri/logo2.jpg";
image3 = new Image();
image3.src = "http://uri/logo3.jpg";
//-->
//]]></script>
</html>

[JorgeM]

I was able to use your code and get the background to change from selectedImg to deselectImg. I figured the problem was with the way you are assigning the background-image information so I used a nifty piece of javascript to see what the value of background image is when I launch the page.

function getStyle(objID, cssStyle) {
            var str = "";
            if (document.defaultView && document.defaultView.getComputedStyle) {
                str = document.defaultView.getComputedStyle(objID, "").getPropertyValue(cssStyle);
            }
            else if (objID.currentStyle) {
                cssStyle = cssStyle.replace(/\-(\w)/g, function (strMatch, p1) {
                    return p1.toUpperCase();
                });
                str = objID.currentStyle[cssStyle];
            }
            return str;
        }

From the body section...

  <script type="text/javascript">
      var x = getStyle(document.getElementById("seat1_1"), "background-image");
      document.write(x)
  </script>

What i found was that the value was not set to:
"url(../images/selected_seat.jpg) no-repeat transparent", but rather something like (i'm running a test web server locally):

"url(http://localhost:50622/web/normal_seat.jpg)"

So the reason why its not working is because you are checking for the wrong values.

[RoyDot]

Ok. Thank u all for the quick answer!
JorgeM - I understand your code and everything but what will be the right value to check then? "url(http://localhost:50622/web/normal_seat.jpg)"?
It's just a background image I have in the images folder and the first background was defined in the style.css.
Thank u very much for the help, but I'm still a little bit confused...:-/

[JorgeM]

This is the value that was specific to my situation: "url(http://localhost:50622/web/normal_seat.jpg)", because I tested your code on a development web server locally on my computer.

That isn't going to be the value when you put this on a web server. For example, if you upload your web page to a production site and your domain name is widgets.com and you have the image stored in an images folder, this is what I would expect as the value:

"url(http://widgets.com/images/normal_seat.jpg)"

[RoyDot]

Ahhh...Ok!! I understand! Great!! I'm using Apache Tomcat
But still - I tried url(http://localhost:8080/"Web-Name"/images/selected_seat.jpg)
instead and it still doesn't work :-/