dynamicly switching 'background-image' doesn't work in IE

Question

Hi, I'm dynamically switching a div's background-image with the jquery bit below. Works just fine in FF, but turns out in IE it does not. Any ideas why? Does IE not reload the image if a css property changed? Any pointers would be appreciated.

$(function(){
   $('.header').each(function(){
      $(this).hover(function(){
         $('#headertab').css('background-image','url(/tab_'+$(this).attr('href').split('path=')[1]+'.gif');
      });
   });
}); 

Answer 1

Try setting backgroundImage instead of background-image.

CSS attributes, when accessed via Javascript, traditionally use camelCase instead of dashes, to avoid questions of syntax. (element.style.background-image looks like you're doing subtraction.) Firefox is probably progressive enough to allow the dashes as well, but IE... it would seem not.

Answer 2

You're setting CSS properties incorrectly with jquery. You can read here how to reference the names of the properties (camelcased, with no hyphen).

$("#element").css({"backgroundImage":"url(/images/image.jpg)",....etc})

Answer 3

if you have the images paths set inside the VALUE of a SELECT listbox element, you could probably use:

<select onchange="document.getElementById('background').style.backgroundImage='url(&quot;'+this.value+'&quot;)';">

Answer 4

I usually use class names to handle this sort of thing:

$(function(){
   $('.header').each(function(){
      $(this).hover( function () {
        $('#headertab').addClass('dynamic-background-image-class');
      }, function () {
        $('#headertab').removeClass('dynamic-background-image-class');
      });
   });
}); 

css:

.dynamic-background-image-class {
  background: transparent url(/path/to/image.png) 0 0 no-repeat;
}

I don't know if this would help your situation as your header image names are based on the url. One of the benefits is the image is pulled and cached when the css file is requested by the client.