472,145 Members | 1,327 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,145 software developers and data experts.

Need Help with changing css on an object using jQuery


I am having some issues with my site. I have a main Nav with four links that load in 4 different sections.

You can see the page I am working on here: http://idea-palette.com/official/newofficialsite4.html

What I am trying to do is, when a user clicks on another Main Nav button, such as 'Web Projects', the background-image changes to another image that shows the lightbulb being on. I also want it to change back the background-image for any link that currently has the light on, so that it seems the light is on for whatever page the user visits.

Here is my basic html layout that pertains:

Expand|Select|Wrap|Line Numbers
  1. <body>
  2.   <div id="container">
  3.     <div id="header">
  4.       <div id="nav">
  5.         <li>
  6.           anchor tag
  7.             span tag
Each of the links are called 'printsectbtn', 'websectbtn', and so on. Each of the default background-images is called 'print_off.png', 'web_off.png', and so on. Each of the background images that show up when a user clicks that link are called 'print_on.png', 'web_on.png', and so on.

I have started all their names with either 'print', 'web', 'mot', or 'int' so that I could make it dynamic and simply erase some letters from the clicked div's name and then add some others at the end.

Here is my jquery that pertains to this issue:

Expand|Select|Wrap|Line Numbers
  1. $(function(){
  2.         $('#nav li a').click(function(){
  3.             var clickedLinkId = $(this).attr('id'); //This is the ID of the Main Nav Link that was clicked
  4.             var picOnLocation = 'images/' + clickedLinkId - 'sectbtn' + '_on' + '.png'; //This is the location of the new background image once the user clicks a button
  5.             var picOnUrl = 'url(' + picOnLocation + ')'; //This combines the background image location and URL Line
  7.             $('#' + clickedLinkId + ' span').css({"background-image":picOnUrl}); //This changes the background image of the span of the currently clicked link.
  9.             return false;
  10.    });
  11. });
Basically, what I am trying to do above is to:
1) Get the ID of the clicked link. I called this var ClickedLinkId.
2) Erase the word 'sectbtn' from the end of the ID, so that it just reads as 'print' or 'web' for example
3) Add 'images/' before the word and '_on.png' after the word, so that it is the location of the new background Image that shows up after the user clicks on a link. I called this var picOnLocation.
4) Combine the new background Image location(picOnLocation) and URL line. I called this var picOnUrl.
5) Change the css of the clicked Link's span to show up as the new background image as specified by picOnUrl.

What I am using does work as I can see the current background disappear, but no new background loads in. Also, when I try this: var picOnUrl = "url('images/web_on.png')"; ,it works fine, so I think I may have an issue with it not being able to find the background image file or perhaps my concatenation is incorrect.

Here's my folder structure if it helps:

- print_on.png
- web_on.png
- mot_on.png
- int_on.png

I know this is a really long post, but I am really hoping someone can help me, so I included all the specifics. Please let me know if there are any other questions that I can answer to help you help me.

Thanks in advance!

Mar 8 '09 #1
0 1270

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by Gale | last post: by
10 posts views Thread by sfmcfar | last post: by
1 post views Thread by DuaneMoraes | last post: by
5 posts views Thread by Steve Swift | last post: by
1 post views Thread by mikeh3275 | last post: by
83 posts views Thread by liketofindoutwhy | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.