Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2009
    Thanked 0 Times in 0 Posts

    Need Help with changing css on an object


    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:

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

            $('#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:

    - 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!


  • #2
    Regular Coder
    Join Date
    Mar 2009
    Portland Oregon
    Thanked 63 Times in 62 Posts
    var picOnLocation = 'images/' + clickedLinkId - 'sectbtn' + '_on' + '.png';

    shouldn't that minus be a plus?


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts