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>标记之前。

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

1 个答案: