javascript css background-image

[rnr8]

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>

[chrelad]

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

[rnr8]

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

[chrelad]

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

[joshuagoshert]

I've ran into similar issues with obj.style.backgroundImage with some browsers (specifically FF, but IE was working fine).

Your className approach works fine for a few images, but what if you want to dynamically loop through multiple background images (e.g. mouseovers for user-initiated style changes)? You don't want to have dozens of classes set up for the image.

After scouring my code, I realized that IE was letting me be sloppy; I had styled my image with

background: #hexcol url(/path/img.png) left top no-repeat;

, then I was trying to use the obj.style.backgroundImage to change just the url of the image. FF was overriding that request with the background property. I went back in and changed my style to

background-color:#hexcol; background-image:url(/path/img.png); background-position: left top; background-repeat:no-repeat;

. This freed up the url of the image and suddenly the DOM call worked perfectly.

Hopefully this helps someone else like this thread didn't help me.

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

[JScriptRUs]

I had this same issue - worked in IE but not Firefox. We just found out a solution - the syntax for defining the image url is super important (and strict).

document.myElement.style.backgroundImage="url('http://image.jpg')"

The double and single quotes are very important! Hope this helps.