CODEWITHSUNDEEP
javascriptimagebackgroundfullscreenmouseover
Rollin
Rollin

Reputation: 131

JS change background image (of page not element) on mouseover

I want to find out how load a different background image for the whole page when you mouseover the links. The fullscale background image uses the js script called Fullscreenr.

The background image for this page is given an id

Any ideas? I don't even know how to to search for the correct terms here.

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

Upvotes: 0

Views: 917

Answers (1)

user113716
user113716

Reputation: 322492

Since you have jQuery loaded on the page, but it's not mentioned in the question, I'll offer a jQuery and an non-jQuery solution.

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>

If you're not going to use jQuery, then do change:

<p class="overlayimage">

to:

<p id="overlayimage">

and do this:

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

...placing it toward the bottom of the page, just before the closing </body> tag.

Upvotes: 1

Related Questions