javascriptを使用して画像をロールオーバーするときにページの背景を変更します

Question

現在、私はこれにjavascriptを使用していますが、より良いソリューションがあれば私はすべて耳にします。だから、私はラッパーとその背景を持っていて、その中には、ラッパー/ページの背景を変えるためにフェードしたときに、私がしたいと思っていたボタンを含む私のすべてのコンテンツがあります。

私のCSSはこの

#wrapper {position: absolute; min-width:550px; width:100%; height:100%; background: url(img/bg.jpg) no-repeat center top;} 

のように見え、その後、私のhtml

<div id="wrapper"> 
<div id="content"> 
<div class="logo"> 
<img src="img/logo1.png" /> 
</div> 
<div class="button"> 
<img src="img/dj.png" onMouseOver="changeBgImage('img/bg2.jpg','wrapper')" onMouseOver="changeBgImage('img/bg2.jpg','wrapper')"/> 
</div> 
</div> 
</div> 

、その後、私はJavaScript

<script type="text/javascript"> 
    function changeBgImage (image, id) { 
var element = document.getElementById(id); 
element.style.backgroundImage = "url("+image+")"; 
    } 
</script> 

それが作品に座っているように、それは背景を変更し、私はそれをフェード・イン・アンド・アウトしたいと思っています。私はこれをどうやってやりますか？

EDIT：以下の両方のソリューションをしようとしない、どちらも私はあなたのソリューションを好き

Answer 1

を仕事や適用するように見えます。 Check this outは、達成しようとしているフェーディング効果のオプションです。

幸運を祈る！

編集：https://stackoverflow.com/a/1055432/752527もいいクリーンなソリューションのようです。

Answer 2

これはすばらしい、きれいな方法です。

http://jsfiddle.net/Diodeus/gYyBL/

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg"> 

$('body').find('*[hoverImg]').each(function(index){ 
    $this = $(this) 
    $this.wrap('<div>')  
    $this.parent().css('width',$this.width()) 
    $this.parent().css('height',$this.width()) 
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")") 
     $this.hover(function() { 
      $(this).stop() 
      $(this).fadeTo('',.01)  
     },function() { 
      $(this).stop() 
      $(this).fadeTo('',1)    
     })      
});