JSの背景の変更（ページではない要素の）マウスオーバー時

Question

リンクをマウスオーバーすると、ページ全体で異なる背景イメージを読み込む方法を知りたいと思います。フルスケールの背景画像は、Fullscreenrというjsスクリプトを使用します。

このページの背景画像をID

任意のアイデアを与えていますか？私は正しい用語をここで検索する方法を知らない。

http://www.rollinleonard.com/projects/

Answer 1

あなたはjQueryのページにロードされているが、それは問題には言及していないので、私はjQueryと非jQueryのソリューションを提供します。

のjQuery：

<p class="overlayimage"> 

に：あなたはjQueryのを使用するつもりはない場合

<script type="text/javascript"> 
    $(function() { 
     var bgimg = $('#bgimg'); 

     var images = [ 
      '/src/of/img1.jpg', 
      '/src/of/img2.jpg', 
      '/src/of/img3.jpg', 
      '/src/of/img4.jpg', 
      '/src/of/img5.jpg', 
      '/src/of/img6.jpg', 
      '/src/of/img7.jpg', 
      '/src/of/img8.jpg', 
      '/src/of/img9.jpg', 
      '/src/of/img10.jpg' 
     ]; 

     $('p.overlayimage > a').each(function(i) { 
      $(this).mouseenter(function() { 
       bgimg.attr('src', images[ i ]); 
      }); 
     }); 
    }); 
</script> 

---

は、その後、変更できますか

<p id="overlayimage"> 

と次の操作を行います。

<script type="text/javascript"> 
    var bgimg = document.getElementById('bgimg'); 

    var images = [ 
     '/src/of/img1.jpg', 
     '/src/of/img2.jpg', 
     '/src/of/img3.jpg', 
     '/src/of/img4.jpg', 
     '/src/of/img5.jpg', 
     '/src/of/img6.jpg', 
     '/src/of/img7.jpg', 
     '/src/of/img8.jpg', 
     '/src/of/img9.jpg', 
     '/src/of/img10.jpg' 
    ]; 

    var aElems = document.getElementById('overlayimage').getElementsByTagName('a'), 
     len = aElems.length; 

    function generateHandler(i) { 
     return function() { 
      bgimg.src = images[ i ]; 
     }; 
    } 

    while(len--) { 
     aElems[ len ].onmouseover = generateHandler(i); 
    } 
</script> 

...閉じる</body>タグの直前にページの下部に向かって配置します。