Change Previous Next Background image

The JavaScript style object provides the access to the backgroundImage property that enables you to change the background image of targeted HTML element. In this sample we have used the HTML anchor tag hyperlinks to change the background image of the HTML Div tag. The onclick event of HTML hyperlinks raise the client side click event that allow you to call the JavaScript functions. In the HTML code we have also used the HTML hidden field control to store the value of Array index that is used in the JavaScript code to display the background image stored at that array index.

JavaScript DOM features Used

1. document object

2. getElementsById method

3. style object

4. backgroundmage property

Try the sample below to understand the functionality of using Hyperlink tags of HTML to change the background image of div tag dynamically using JavaScript.

Edit this code and click update to view output

<html>
<head>
    <title>Changing Previous Next Background-image Using Javascript</title>
    
    <style type="text/css">

#div1 {
            height: 38px;
            width: 120px;
            background-image: url(images/image1.jpg);
            background-repeat: no-repeat;
        }
        
    </style>

// create an array to store the names of images
    var myArr = new Array();
    myArr[0] = 'images/image1.jpg';
    myArr[1] = 'images/image2.jpg';
    myArr[2] = 'images/image3.jpg';
    myArr[3] = 'images/image4.jpg';
    myArr[4] = 'images/image5.jpg';

// A global variable
    var hiddenArrayIndex;

// this function will change the image to the previous image
    // stored in the array
    function movePrevious(){
        
        // get the value stored in the hidden field
        hiddenArrayIndex = document.getElementById('hiddenValue').value;
        
        // if the value is not 0 then decrement the value by 1 and 
        // store it back into the hidden field.
        if(hiddenArrayIndex != 0) {
            document.getElementById('hiddenValue').value = parseInt(hiddenArrayIndex) - 1;
            
            // re-assign the value to the hiddenArrayIndex variable
            hiddenArrayIndex = document.getElementById('hiddenValue').value;
        }
        
        // set the background-image stored at the specified Array Index dynamically
        document.getElementById("div1").style.backgroundImage = "url(" + myArr[hiddenArrayIndex] + ")";
    }

// this function will change the image to the next image
    // stored in the array
    function moveNext(){

// get the value stored in the hidden field
        hiddenArrayIndex = document.getElementById('hiddenValue').value;
        
        // if the value is not equal to the upper index of the array
        // then increment the value by 1 and store it back into the hidden field
        if(hiddenArrayIndex != (myArr.length - 1)) {
            document.getElementById('hiddenValue').value = parseInt(hiddenArrayIndex) + 1;
            
            // re-assign the value to the hiddenArrayIndex variable
            hiddenArrayIndex = document.getElementById('hiddenValue').value;
        }
        
        // set the background-image stored at the specified Array Index dynamically
        document.getElementById("div1").style.backgroundImage = "url(" + myArr[hiddenArrayIndex] + ")";
    }

</script>

</head>

OUTPUT:

Get Code for this sample...

Previous Sample

Next Sample