JS изменить фоновое изображение (страницы, а не элемента) при наведении мыши - PullRequest
Новая
       22

JS изменить фоновое изображение (страницы, а не элемента) при наведении мыши

0 голосов
/ 24 февраля 2011

Я хочу узнать, как загрузить другое фоновое изображение для всей страницы, когда вы наводите курсор мыши на ссылки. Для полноразмерного фонового изображения используется js-скрипт Fullscreenr.

Фоновое изображение для этой страницы имеет идентификатор

Есть идеи? Я даже не знаю, как искать правильные термины здесь.

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

1 Ответ

1 голос
/ 24 февраля 2011

Поскольку у вас на странице загружен 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>.

...