Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 241
  • Last Modified:

How do you toggle images for an on off state

Hi,

I have some code (that works in JS Fiddle) but for some reason does not work when I put it on a web page.

I need the images to toggle from an on off state. But when you click on one of the images the other images need to turn off.

Here is my code and you can see what I'm talking about if you go to

http://thelocalized.com/matt/imagetoggle.html


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link type="text/css" rel="stylesheet" href="style.css" />
  
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  
  
  <script type="text/javascript">
  $(document).ready(function () {
   $("table a span").click(function(){
  $(this).toggleClass("on")
})
$("table a span:eq(0)").toggleClass("on")
  });
    </script>

  <title></title>
  <style>
  table a span {
    display:inline-block;
    height:20px;
    width:20px;
    border:1px solid blue
}
table a span.off {
    background:url("orange_off.png") red
}
table a span.on {
    background:url("orange_on.png") green
}
</style>
</head>

<body>
<table cellspacing="7" cellpadding="0" border="0">
	<tr>
	    <td width="60" align="left">View:</td>
        <td width="100"align="left"><a><span class="off"></span>All Types</a></td>
	    <td width="113" align="left"><a><span class="off"></span>On Demand</a></td>
		<td width="101" align="left"><a><span class="off"></span>Webinars</a></td>
		<td width="141" align="left"><a><span class="off"></span>Seminars</a></td>
        </tr>
        </table> 
</body>
</html>

Open in new window


Thanks!
0
smfmetro10
Asked:
smfmetro10
  • 2
1 Solution
 
GaryCommented:
You are using the first code sample from the other Q

$("table a span").click(function(){
    $("table a span").removeClass("on")
  $(this).toggleClass("on")
})
$("table a span:eq(0)").toggleClass("on")

Open in new window

0
 
smfmetro10Author Commented:
Yeah- I just cant get it to work on a webpage.
0
 
smfmetro10Author Commented:
Wait- Sorry. I know what you're saying :)

Thanks!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now