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 hereI can't post URL's yet on this forum, so I'm not sure how to give it to you) 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 Code (markup): 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: $(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; }); }); Code (markup): 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 folder - 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
if using firefox/chrome with firebug, add this: console.log(clickedLinkId); (or alert it otherwise); - in fact, each of your anchors has an id? that's not very practical but none-the-less. so $(this) has the id which is one of ['print','web','mot','int']... also console.log(picOnUrl); var picOnLocation = 'images/' + clickedLinkId - 'sectbtn' + '_on' + '.png'; //This is the location of the new background image once the user clicks a button 1. what is 'sectbrn' when your images are called 'print_on.png', etc? drop it.... 2. no need to do "_on"+ ".png", just do +"_on.png"; and finally - this can be a css quirk - if all the console.logs show correctly - careful of the path images/ - if you are in a subfolder etc then do /images instead - try setting 'background' property instead of background-image, sometimes the latter fails if its not set beforehand (or was it the other way around, i have had almost the same problem with dynamic background image changes before).
Thanks alot for your help! I decided to take a different approach to my problem and I want to tell you my solution since you took the time to help me. What I did was add a class in the css called 'lit' to the button's span as they're the ones with the background-image. This is what I wrote in my CSS: #printsectbtn span { background-image: url(../images/print_off.png); } #printsectbtn span:hover { background-image: url(../images/print_on.png); } #printsectbtn span.lit { background-image: url(../images/print_on.png); } #websectbtn span { background-image: url(../images/web_off.png); } #websectbtn span:hover { background-image: url(../images/web_on.png); } #websectbtn span.lit { background-image: url(../images/web_on.png); } #motsectbtn span { background-image: url(../images/motion_off.png); } #motsectbtn span:hover { background-image: url(../images/motion_on.png); } #motsectbtn span.lit { background-image: url(../images/motion_on.png); } #intsectbtn span { background-image: url(../images/int_off.png); } #intsectbtn span:hover { background-image: url(../images/int_on.png); } #intsectbtn span.lit { background-image: url(../images/int_on.png); } Code (markup): This is what I wrote in my jquery: $(function(){ $('#printsectbtn span').addClass('lit'); $('#nav li a').click(function(){ var clickedLinkId = $(this).attr('id'); $('#nav li a span').removeClass('lit'); $('#' + clickedLinkId + ' span').addClass('lit'); return false; }); }); Code (markup): So basically when the user clicks on one of the buttons, it adds the class 'lit' which changes the background-image to what I specified in the css for each different button. It also removes the class 'lit' from all of the button's spans, which changes the background image back to the lightbulb being off.
now that's a much better semantic solution - you still can do better w/o assigning ids to the link attributes - at least consider using data-id as element storage (html 5 style) - you don't want to inadvertently assign an id (by DB or whatever way you use you populate this) that breaks IE and you don't use the links as anchors, hence no need, keep your data behind a namespace if you need to do valid xhtml 4 strict, then i guess you can use rel="" or title="" instead. in mootools this would be similar - cept for it is smart enough to merge classes. for example, i can do: element.addClass("selected"); // has a background image ... element.removeClass("selected"); // older background image is restored all i need is defined in my default class and all .selected has is background: url(); best regards and good luck