Problem using elem.dataset with IE and JSFiddle

dataset seems to be undefined in IE. That is probably the major source of the issue. Everything else works just fine on IE9 64 bit.

You could just store that state locally in JS:

for (var i = 0; i < buttons.length; i++) 
    register( i )

function register( i ){
    button = buttons[i];
    button.onclick = function() {
        changeBGImage(i);
    };
}

Or you can do a lookup

for (var i = 0; i < buttons.length; i++) 
    button = buttons[i];
    button.onclick = function() {
        changeBGImage(this.getAttribute('data-index'));
    };
}

this.dataset.index does not work on IE. Try using this.getAttribute("data-index").

IE < 10 does not support elem.dataset. You'd need to explicitly get the attribute: http://jsfiddle.net/ZSB67/1/.

changeBGImage(this.getAttribute('data-index'));

In the future, you might want pressing F12 and looking at the console for errors, since it said what was causing the problem here.

The reason why the dataset property is not recognized by older versions of IE (actually all of them except IE11+) is the fact that it was introduced in HTML5 which those versions do not support or support it only partially.

In order to obtain this property's value, one can use pure js like

changeBGImage(this.attributes.getNamedItem("data-index").value)

or simplier by using the getAttribute() method:

changeBGImage(this.getAttribute("data-index"))

or jQuery (v 1.2.3+):

$(".bg_swap").click(function(){
    changeBGImage($(this).data("index"));
})