Code
var blnDOMSUPPORT = (document.getElementById) ? true : false;
window.onload = window_load;
function window_load()
{
if ( blnDOMSUPPORT )
{
document.getElementById('icon1').onclick = swapimage;
document.getElementById('icon2').onclick = swapimage;
document.getElementById('icon3').onclick = swapimage;
}
else
{
document.images['icon1'].onclick = swapimage;
document.images['icon2'].onclick = swapimage;
document.images['icon3'].onclick = swapimage;
}
}
function swapimage()
{
if ( blnDOMSUPPORT )
{
var imgMain = document.getElementById('mainimage');
var divParent;
// create new image element
var imgNew = document.createElement('img');
// give it an image
// here I use the src of the icon just for convenience
// you'd want to somehow determine the src of your desired image
imgNew.src = this.src;
// give it an id
imgNew.id = 'mainimage';
// replace image
divParent = imgMain.parentNode;
divParent.replaceChild(imgNew, imgMain);
}
else
{
// old school image swap
document.images['mainimage'].src = this.src;
alert( 'old school' );
}
}
<div id="main">
<img id="mainimage" src="http://www.w3schools.com/css/smiley.gif">
</div>
<div id="icons">
<img id="icon1" src="http://www.w3schools.com/css/smiley.gif">
<img id="icon2" src="http://www.w3schools.com/images/vxhtml.gif">
<img id="icon3" src="http://www.w3schools.com/images/print.gif">
<input type="button" value="Toggle DOM Support" onclick="window.blnDOMSUPPORT = !window.blnDOMSUPPORT;">
</div>