To handle the required combinations of six images, one approach is to create a single large image containing all variations. Depending on the user's input, you can then display the corresponding section of the image within a div element and place clickable areas that match the division lines.
This method may not always be practical, especially with a larger number of answers or images to manage.
Alternatively, you could utilize SVG shapes and fill them with the necessary images for a more flexible solution.
You might find Raphael.js helpful for this purpose; the documentation provides guidance on implementation.
Another option involves using HTML5 canvas:
http://jsfiddle.net/julienbidoret/GKP7X/1/
(credit goes to julienbidoret for the jsfiddle)
Javascript:
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
var img = document.createElement('IMG');
img.onload = function () {
ctx.save();
ctx.beginPath();
ctx.moveTo(20, 0);
ctx.lineTo(240, 0);
ctx.lineTo(220, 240);
ctx.lineTo(0, 240);
ctx.closePath();
ctx.clip();
ctx.drawImage(img, 0, 0);
ctx.restore();
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/2/2b/Clouds.JPG";
HTML:
<canvas id="c" width="300" height="300" ></canvas>
Both SVG and canvas elements are compatible with IE9.