鼠标滑过,图片放大效果。

<SCRIPT LANGUAGE="JavaScript">
var offsetX=120;
var offsetY=00;
function Fpop()
{
var oImg =event.srcElement;
var px =oImg.offsetLeft;
var py =oImg.offsetTop;
popDiv.innerHTML ="<img src=""+oImg.src+"" />"
popDiv.style.left =px+offsetX;
popDiv.style.top =py+offsetY;
popDiv.style.display="";
}
function Fhidden()
{
popDiv.style.display="none";
}
</SCRIPT>
<div id="popDiv" style="position:absolute;z-index:10;border:1px solid black;display:none;"></div>
<img src="http://www.ddvip.com/images/logo1.gif" width="120" height="55" onmouseout="Fhidden()" onmouseover="Fpop()">
<Img Src="http://www.ddvip.com/images/logo.gif" width=250hight=75 Border=0 onMouseOver='this.width=500' onMouseOut='this.width=250'>
<Img Src="http://www.ddvip.com/images/logo.gif" width=125 Border=0 onMouseOver='this.width=this.width*2' onMouseOut='this.width=this.width/2'>
上面这个太垃圾了,下面的比较好.
<!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=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div id="a1" style=" position:absolute; z-index:2;"></div>
<table width="200" border="1">
   <tr>
     <td>&nbsp;<img src="aa.gif" alt="a" onmousemove="show(event,'aa.gif','来电小精灵')" onmouseout="hide(this)" /></td>
     <td>&nbsp;<img src="aa.gif" alt="a" onmousemove="show(event,'aa.gif','aaa')" onmouseout="hide(this)" /></td>
   </tr>
   <tr>
     <td>&nbsp;<img src="aa.gif" alt="a" onmousemove="show(event,'aa.gif','bbb')" onmouseout="hide(this)" /></td>
     <td>&nbsp;<img src="aa.gif" alt="a" onmousemove="show(event,'aa.gif','ccc')" onmouseout="hide(this)" /></td>
   </tr>
   <tr>
     <td>&nbsp;<img src="aa.gif" alt="a" onmousemove="show(event,'aa.gif','dddd')" onmouseout="hide(this)" /></td>
     <td id="img1" >&nbsp;<img src="aa.gif" alt="a" border="0" onmousemove="show(event,'aa.gif','eeee')" onmouseout="hide(this)"/></td>
   </tr>
</table>
<script language="javascript">
function show(event,_this,mess)
{
    event = event || window.event;
    var t1="<table     cellspacing='1' cellpadding='10' style='border-color:#CCCCCC;background-color:#FFFFFF;font-size:12px;border-style:solid;    border-width:thin;text-align:center;'><tr><td><img src='" + _this   + "' width='300' height='225' >    <br>"+mess+"</td></tr></table>";
    document.getElementById("a1").innerHTML =t1;
    //document.getElementById("a1").innerHTML = "<img src='" + _this.src + "' >";
    document.getElementById("a1").style.top   = document.body.scrollTop + event.clientY + 10 + "px";
    document.getElementById("a1").style.left = document.body.scrollLeft + event.clientX + 10 + "px";
    document.getElementById("a1").style.display = "block";
}
function hide(_this)
{
    document.getElementById("a1").innerHTML = "";
    document.getElementById("a1").style.display = "none";
}
</script>
</body>
</html>

 

你可能感兴趣的:(图片)