Change div background image from drop down

JavaScript
1

Hi guys, below code seems to work perfectly with the exception that the background image isn’t populated on select. Background color is working though. Can someone please take a quick look and see if you can point me to the right direction? Your help is greatly appreciated.

thanks.


<script type="text/javascript">

function showDiv()
{
  // hide any showing
  $(".details_div").each(function(){
      $(this).css('display','none');
  });

  // our target
  var target = "#details_" + $("#test_select").val();                                                                                                                                

  // does it exist?
  if( $(target).length > 0 )
  {
    // show it
    $(target).css('display','block');
  }
}

$(document).ready(function(){

  // bind it
  $("#test_select").change(function(){
    showDiv();
  });

  // run it automagically
  showDiv();
});

</script>
<style>
.details_div
{
  display:none;
}
#details_book
{
		background:url(images/imageBook.jpg)
                border: 1px solid #cdcdcd;
                background-color:#777;

}
#details_movie
{
		background:url(images/imageMovie.jpg)
		border: 1px solid #cdcdcd;
                background-color;#888;
}
</style>


<select id="test_select">
  <option value="">- Select - </option>
  <option value="book" selected="selected">Books</option>
  <option value="movie">Movie</option>
</select>

<div id="details_book" class="details_div">BOOK DETAILS</div>
<div id="details_movie" class="details_div">MOVIE DETAILS</div>
2

If the border and background color are changing but the background image does not load, it sounds like the path to the image might be invalid.

3

hmm, very strange, i changed it to full path but the image still not loading.


background:url(http://www.domain.com/images/imageMovie.jpg)
4

My bad, the script works, i just realized i missed the semicolon. Sorry guys.