鼠标经过图片变大特效代码,变大的图片是另外一张图片
本特效代码实现的功能是:
鼠标经过,图片会变大,变大的图片是另外一张图片,带有该图片的文字说明,可显示。
代码如下:
<!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> <img src=" <td> <img src="p2.gif" alt="www.panpan.org" onmousemove="show(event,'b2.jpg','来吧www.panpan.org')" onmouseout="hide(this)" /></td>
</tr>
<tr>
<td> <img src="p3.gif" alt="盼盼欢迎你" onmousemove="show(event,'b3.jpg','盼盼欢迎你啊')" onmouseout="hide(this)" /></td>
<td> <img src="p4.gif" alt="panpan" onmousemove="show(event,'b4.jpg','www.panpan.org')" onmouseout="hide(this)" /></td>
</tr>
<tr>
<td> <img src="p5.gif" alt="小盼" onmousemove="show(event,'b5.jpg','盼盼')" onmouseout="hide(this)" /></td>
<td id="img1" > <img src="p6.gif" alt="好东西等着你" border="0" onmousemove="show(event,'b6.jpg','大饱眼福')" onmouseout="hide(this)"/></td>
</tr>
</table>
<script>
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>
==========================
over