JSFiddle - React, Tailwind, and code Playground

by BladeBronson

HTML

<img src="http://mysite.com/blah.png" id="logo" />
<p>The current image is: <b id="console">http://mysite.com/blah.png</b></p>

CSS

#logo {
    border: 1px solid red;
    height: 100px;
    width: 300px;
}

JavaScript

// define list of images and cache DOM selectors
var images = [ 'foo', 'bar', 'blah', 'hip', 'hop', 'punk', 'rock' ],
    logo = document.getElementById( 'logo' ),
    console = document.getElementById( 'console' );

// bind event
logo.addEventListener('mousemove', changeImage);

// event handler
function changeImage() {
    // get a random number
    var rand = Math.floor( images.length * Math.random() );
    // get the corresponding image (with full path)
    var image = 'http://mysite.com/' + images[ rand ] + '.png';
    // check to see if we selected the one that's currently set
    if ( image == logo.src ) {
        // yep, they're the same. do it again.
        changeImage();
        return false;
    }
    // update the logo src attribute
    logo.src = console.innerText = image;
}