JS在鼠標懸停上更改背景圖片（頁面不是元素）

Question

我想要了解在鼠標懸停鏈接時如何爲整個頁面加載不同的背景圖片。全幅背景圖片使用名爲Fullscreenr的js腳本。

該頁面的背景圖像被賦予一個ID

任何想法？我甚至不知道如何在這裏搜索正確的術語。

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

Answer 1

既然你有jQuery的加載頁面上，但它不是在問題中提到，我會提供一個jQuery和非jQuery的解決方案。

的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> 

---

如果你不打算使用jQuery，那麼就改變：

<p class="overlayimage"> 

到：

<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>標記之前。