Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: background <li>

  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    257
    Thanks
    8
    Thanked 0 Times in 0 Posts

    background <li>

    How I can change the background image to <li> tag with onclick event?

    Regards

  • #2
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    onclick="this.style.backgroundImage='url(/imagefolder/yourimage.jpg)';"
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #3
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    just wanted to add a few more suggestions.

    if you are going to be changing the background image you may also want to limit the size (width) of the li so that the image does not go all the way across the page. that or you can create the background image to a specific size and tell it not to repeat like such:

    style="background-repeat:no-repeat;"

    another thing is, if you want just the li that you click on to have a background image you will need to create a function that clears all the background images to all the li's and then sets the background image to the one you clicked on.

    something like this:

    Code:
    <ul>
    <li onclick="changeStyle(this);">first li
    <li onclick="changeStyle(this);">second li
    <li onclick="changeStyle(this);">third li
    <li onclick="changeStyle(this);">fourh li
    </ul>
    
    <script type=text/javascript>
    function changeStyle(elem){
    var chNodes=elem.parentNode.childNodes.length;
    var i='0';
    while(i<=chNodes-(1)){
    elem.parentNode.childNodes[i].style.backgroundImage="";
    i++
    }
    elem.style.backgroundImage="url(path/filename.jpg)";
    
    }
    </script>
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.


  •  

    Posting Permissions

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