March 27, 2013

Background image change onclick

I fiqured out this one finally...

Add the below code in head tag
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">

        var allImages = [
                "URL of Image 1", 
                "URL of Image 2",
                "URL of Image 3"
            ];

        var current = 0;

        $(document).ready(function() {
            $("#theLink").click(function() {
                $("body").css("background-image", "url(" + allImages[current] + ")").css("background-repeat");
                
                current = (current++ < allImages.length - 1) ? current : 0 ;
            });
        });
        </script>
Add the below code in body tag
<button id="theLink">Click to Change</button>

No comments:

Post a Comment

Popular Posts

Views