JS在鼠标悬停时更改背景图像（页面不是元素）答案

【问题标题】：JS change background image (of page not element) on mouseoverJS在鼠标悬停时更改背景图像（页面不是元素）
【发布时间】：2011-07-03 20:04:25
【问题描述】：

我想了解当您将鼠标悬停在链接上时如何为整个页面加载不同的背景图像。全尺寸背景图片使用名为 Fullscreenr 的 js 脚本。

这个页面的背景图片有一个id

有什么想法吗？我什至不知道如何在这里搜索正确的术语。

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

【问题讨论】：

标签： javascript image background fullscreen mouseover

【解决方案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> 标记之前。

【讨论】：