<script>
functionGetAbsPosition(obj)
{
varcurleft=0,curtop=0;
do{
curleft+=obj.offsetLeft;
curtop+=obj.offsetTop;
}while(obj=obj.offsetParent);
return[curleft,curtop];
}
functionShowFloatingImage(image,width,height)
{
varid="trailimageid";
varnewdiv=document.getElementById(id);
if(newdiv==null)
{
newdiv=document.createElement('div');
newdiv.setAttribute('id',id);
newdiv.setAttribute('onmouseout',"HideElement('"+id+"');");
document.body.appendChild(newdiv);
}
newdiv.innerHTML='<imgsrc='+image.src+'width='+(image.width+width)+'height='+(image.height+height)+'/>';
varabsPos=GetAbsPosition(image);
newdiv.style.position="absolute";
newdiv.style.posLeft=absPos[0]-width/2;
newdiv.style.posTop=absPos[1]-height/2;
newdiv.style.display="block";
}
functionHideElement(id)
{
varelem=document.getElementById(id);
elem.style.display="none";
}
</script>
例子:
代码如下:
<body>
<imgsrc="1.jpg"width="300"height="300"onmouseover="ShowFloatingImage(this,150,150);"/>
</body>
|