Need Help with changing css on an object

zeckdude · 03-08-2009, 05:12 AM

Hi,

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:

<body>
<div id="container">
<div id="header">
<div id="nav">
<li>
anchor tag
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:

Code:

$(function(){
        $('#nav li a').click(function(){
            var clickedLinkId = $(this).attr('id'); //This is the ID of the Main Nav Link that was clicked
            var picOnLocation = 'images/' + clickedLinkId - 'sectbtn' + '_on' + '.png'; //This is the location of the new background image once the user clicks a button
            var picOnUrl = 'url(' + picOnLocation + ')'; //This combines the background image location and URL Line
       
            $('#' + clickedLinkId + ' span').css({"background-image":picOnUrl}); //This changes the background image of the span of the currently clicked link.

            return false;
   });
});

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:

newofficialdesign4.html
IMAGES
- 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!

-Chris

TinyScript · 03-08-2009, 11:13 PM

var picOnLocation = 'images/' + clickedLinkId - 'sectbtn' + '_on' + '.png';

shouldn't that minus be a plus?