javascript image swap using DOM
It uses them to support swapping images with different sizes.
Just changing the src property causes the swapped images to be distorted in IE.
This script uses replaceChild instead.
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' ); } }
It would be used with HTML like this
<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>