createElement添加onMoserOver动作的问题

style type="text/css">
<!--
.t1 {
    border: 1px solid #666666;
}
-->
<!--
.t2 {
    border: 0px solid #ffffff;
}
-->
</style>
<div id=a2></div>
<input type=button name=ok onclick=add("efMultiAngleIcon.gif",100,200,1)>
<input type=button name=ok onclick=add("200129748-001.jpg",600,100,2)>
<input type=button name=ok onclick=del("Pic1")>
<script language=JavaScript>
var izIndex=0;
var ozIndex=0;
var i=1;
var xx=0,yy=0
function add(Images,top,left,zindex){
  var test=document.createElement("Img");
  test.src=Images;
  test.id="Pic"+i;
  test.onMouseOver=im;//添加onMouserOver动作成功但是没有反应，
  test.onMouseOut=om; //添加onMouserOut也没有反应，？？？有谁知道帮忙解答一下，谢谢各位了阿。
  test.onclick=function (){alert(event.srcElement.innerHTML);};
  test.ondragstart=ds; 
  test.ondrag=dg;
  test.style.cssText="position:absolute;left="+top+";top="+left+";z-index:"+zindex+";"
  document.body.insertAdjacentElement("beforeEnd",test);
  i++
}
function list()
{
  var imgall = document.getElementsByTagName('img');
  alert(event.srcElement.style.zIndex)
  i++
}

function ds()
{
  var ThisID=event.srcElement;
  xx=event.x-ThisID.offsetLeft;
  yy=event.y-ThisID.offsetTop;
}
function dg()
{
  var ThisID=event.srcElement;
  ThisID.style.left=event.x-xx;
  ThisID.style.top=event.y-yy
}
function dt()
{
  var ThisID=event.srcElement;
  ThisID.style.cursor="move";
  alert(ThisID.style.cursor)
}
function im()
{
   //alert(event.srcElement.id)
   ozIndex=event.srcElement.style.zIndex;
   event.srcElement.style.zIndex=100;
   event.srcElement.className="t1";
}
function om()
{
    //alert("aa")
    event.srcElement.style.zIndex=ozIndex;
    event.srcElement.className="t2";

}
function rm()
{
 document.body.removeChild(event.srcElement)
}
function del(iid)
{
document.body.removeChild(eval(iid));
i--;
}
</script>