Swapping images
Add images on a page and save the page

Now select one image and insert event

Run time behavior: (Link)
Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>swap image</title>
<script type="text/javascript">
<!--
function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n;

 if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;

if(o.id==id || o.name==id) return o;
 if(o.childNodes) c=o.childNodes;
if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}

function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}
// -->
</script>
</head>

<body onload="FP_preloadImgs(/*url*/'img38.jpg',/*url*/'img36.jpg')" style="color: #000080; background-color: #FCEFBC">

<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 108px; top: 44px" id="layer1">
<img alt="" src="img36.jpg" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'img38.jpg',/*id*/'img2',/*url*/'img36.jpg');" /></div>
<div style="position: absolute; width: 100px; height: 100px; z-index: 2; left: 215px; top: 45px" id="layer2">
<img alt="" src="img38.jpg" id="img2" /></div>

</body>

</html>