JSFiddle - React, Tailwind, and code Playground

by Greg Bowler

HTML

<img src="http://i.imgur.com/NWQC0jW.jpg" />
<p>Drag the bars over the image. Click the image for a different effect.</p>
<div id="dragMe" draggable="true"></div>

CSS

div, img {
    width: 640px;
    height: 480px;
}

#dragMe {
    background-image: url("http://i.imgur.com/5GKMuFC.png");
    background-size: 100%;
}

JavaScript

var imgList = [
    "http://i.imgur.com/NWQC0jW.jpg",
    "http://i.imgur.com/CG3bJ29.jpg",
    "http://i.imgur.com/aTl3qur.jpg",
    "http://i.imgur.com/3u0oIux.jpg",
    "http://i.imgur.com/ddQqMJg.jpg",
    "http://i.imgur.com/VMbg9wE.jpg",    
], i = 0;

document.querySelector("img").addEventListener("click", function() {
    if(i < imgList.length - 1) {
        i++;
    }
    else {
        i = 0;
    }
    
    this.src = imgList[i];
});