Home/ Questions/Q 1095429
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T00:07:22+00:00

I need to switch my element background image beetwin two images on every click

  • 0

I need to switch my element background image beetwin two images on every click on it.

I have this, byt it swithes color just two times =\

<html>
<head>
    <title>Javascript Change Div Background Image</title>

    <style type="text/css">

    #div1 {
    width:100px;
    height:30px;
    background-image:url(blue.png);
    }


    </style>

    <script language="javascript" type="text/javascript">
        function changeDivImage() {
            var imgPath = new String();
            imgPath = document.getElementById("div1").style.backgroundImage;

            if (imgPath == "url(blue.png)" || imgPath == "") {
                document.getElementById("div1").style.backgroundImage = "url(green.png)";
            }
            else {
                document.getElementById("div1").style.backgroundImage = "url(blue.png)";
            }
        }
    </script>

</head>

<body>

    <center>
    <p>
        This Javascript Example will change the background image of<br />
        HTML Div Tag onclick event.
    </p>
    <div id="div1">
    </div>
    <br />
    <input type="button" value="Change Background Image" onclick="changeDivImage()" />
    </center>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Some browsers are likely giving you the absolute path to the image instead of the relative path you are providing.

    Instead of ==, test for the indexOf() position of the url.

    Example: http://jsfiddle.net/7Rp2G/2/ (click the button several times to see the url change)

    function changeDivImage() {
    var imgPath = new String();
    var div = document.getElementById("div1");
    imgPath = div.style.backgroundImage;

    div.style.backgroundImage = (imgPath.indexOf("blue.png") > -1 || imgPath == "") 
                              ? "url(green.png)" 
                              : "url(blue.png)";

}​

    EDIT: Updated to replace the if() with a ternary.

    • 0