javascript css background-image
 

Hi,

I'm trying to change a background image used within a list <li>, yet have only been able to get this to work in IE and not Firefox. Please tell me what is wrong with this code:

(Note: I have tried using style.backgroundImage yet that did not work in IE or FF).

document.getElementById(current).style.background="background-image: url('image/arrow_sel.gif') no-repeat";

The complete code is listed below...

javascript:

  <script type="text/javascript">

      var current = "woodshed_percussion";

      

                  function page_adjust(project)

      {

          var previous = current;

          current = project;

          if(current != previous)

          {

              document.getElementById(current).style.background="background-image: url('image/arrow_sel.gif') no-repeat";

              document.getElementById(previous).style.background="background-image: url('image/arrow.gif') no-repeat";

              ReplaceElementID("http://www.woodshedpercussion.com/test_environment/rockydesigns/php/main_content.php?project="+ current,"main");

          }

      } 

  </script>

and the relevant html:

<div style="margin-bottom: 2em;">

                                                             <ul>

<li id="woodshed_percussion" onclick="page_adjust('woodshed_percussion');" style="background-image: url(image/arrow_sel.gif);"><a href="#">Woodshed Percussion</a></li>

<li id="big_mouth" onclick="page_adjust('big_mouth');">Big Mouth Films news blast</li>

<li id="all_island" onclick="page_adjust('all_island');"><a href="#">All Island Music Center </a></li>

<li id="in_pulse" onclick="page_adjust('in_pulse');"><a href="#">In Pulse Chiropractic, P.C.</a></li>

<li id="romanos_tv" onclick="page_adjust('romanos_tv');"><a href="#">Romano's TV & Appliance </a></li>

</ul>

                                                 </div>

Re: javascript css background-image
 

Hi rnr8,

Instead of using the DOM to change the backgroundImage property, try changing the className property of the element and creating a stylesheet rule for the class name.

javascript:

el.className = 'hover';

Stylesheet:

li.hover{

  background-color:#f90;

  font-weight:bold;

  text-decoration:underline;

}

Remember though, it's better to change the styles of anchors instead of li's when dealing with mouseover's due to incomplete support for mouseover event handling and the like in different browsers. Anchor's (<a>) already have :hover, :active, :visited, etc stylesheet capabilities in the revision 1 of the w3c's specification (http://www.w3.org/TR/CSS1#anchor-pseudo-classes). Try changing the background image on the anchors instead of the li's if you want to keep your menu/list viewable by the widest possible audience. Just a tip :)

Great question rnr8

Re: javascript css background-image
 

Thank you very much for your well thought out and written response. I appreciate your help and will give that a try!

PS The reason I'm actually using the background-image as a bullet, because, from what I've read, that is the most consistent way to position image bullets (perhaps not accurate).

Re: javascript css background-image
 

Hi rnr8,

Well, in that case (positioning bullets), positioning via CSS is a great way to achieve the desired effect.

I'm in the same boat with you (blah.style.backgroundImage not always working). The className approach hasn't failed me yet and works in every browser I've laid my hands on thus far.

Let us know if you have any other questions rnr8