...

View Full Version : background <li>



urgido
10-28-2006, 04:52 AM
How I can change the background image to <li> tag with onclick event?

Regards

brandonH
10-29-2006, 09:24 AM
onclick="this.style.backgroundImage='url(/imagefolder/yourimage.jpg)';"

brandonH
10-29-2006, 12:16 PM
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:



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum