Change background images on click
<p>I have a div with the id "art". This div should have the background "S1_img1.jpg". Below the div there's a button and when I click it, the background image has to change to "S1_img2.jpg". </p>

<p>When I click it again it has to change to "S1_img3.jpg" and it goes on like that. However, img4 is the last one. Meaning when the div background is currently set as img4 and I click the button again, it must change back to img1.</p>

<p>I am trying to accomplish this by using javascript but I can't get it to work.</p>

<p>1) When I use the code below, the image does not show as the background, even if I am sure the image path is correct.</p>

<pre><code>&lt;script type="text/javascript"&gt;
document.getElementById("art").style.backgroundImage = "url(content/art/S1/S1_img1.jpg)";&lt;/script&gt;
</code></pre>

<p>2) How can I make it so that it changes the background when I click the button as I described?</p>

<p>At the moment the onClick of the button executes the javascript function "count();".</p>

<pre><code>&lt;script type="text/javascript"&gt;
var img = 1;

function count() {
    img = img + 1;
    document.getElementById("content").style.backgroundImage = "url(content/art/S3/S3_img1.jpg)";
}
&lt;/script&gt;
</code></pre>
