Overlay image in HTML

http://www.kirupa.com/forum/showthread.php?380597-Making-an-image-swapper-selector-in-HTML5-that-works-across-devices

HTML

<a id="randomize-link" href="#">Random moustache!</a>

<img id="face" src="http://www.iqandreas.com/temp/moustache-overlay/face.jpg" />
<img id="moustache" src="http://www.iqandreas.com/temp/moustache-overlay/moustache-00.png" />

CSS

#face {
    position: absolute;
    top: 40px;
    left: 20px;
    z-index: 100;
}

#moustache {
    position: absolute;
    top: 40px;
    left: 20px;
    z-index: 200;
}

body {
    background-color: #999999;
}

#randomize-link {
    color: #000;
    font-weight: bold;
    font-size: 140%;
}

JavaScript

var randomizeLink = document.querySelector("#randomize-link");
randomizeLink.addEventListener('click', randomImage);

var numMoustaches = 25;
function getRandomMoustacheURL() {
    var randomID = parseInt(Math.random() * numMoustaches);
    return getMoustacheByID(randomID);
}
function getMoustacheByID(id) {
    var idStr = String(id);
    if (idStr.length < 2) { idStr = "0" + idStr; }
    return 'http://www.iqandreas.com/temp/moustache-overlay/moustache-00.png';
}

function randomImage() {
    var overlayImg = document.querySelector("#moustache");
    overlayImg.src = getRandomMoustacheURL();
}