当前位置:首页 > 开发 > Web前端 > 前端 > 正文

缩略图显示和鼠标悬浮大图显示

发表于: 2010-07-16   作者:cuisuqiang   来源:转载   浏览:
摘要: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var width = 300;  //设置层 宽
var height = 300; // 设置层 高

function init(){
document.all.im.width = width;
document.all.im.height = height;
}

function a( e ){
document.all.im.src = e.src;
document.all.d.style.left = event.x;
document.all.d.style.top = event.y;
document.all.d.style.display = "";
}

function b(){
 document.all.d.style.left = 0;
document.all.d.style.top = 0;
document.all.d.style.display = "none";
}
//-->
</SCRIPT>
<BODY onload="init()">
<input type="image" width=100 height=100 src="01.jpg" onMousemove="a(this)" onmouseout="b()">
<input type="image"  width=100 height=100 src="02.jpg" onMousemove="a(this)" onmouseout="b()">
<input type="image"  width=100 height=100 src="03.jpg" onMousemove="a(this)" onmouseout="b()">
<div id="d" style="position:absolute;left=0;top=0;display:none;border: 1px #FF00FF solid;" >
<input id="im" type="image">
</div>
</BODY>
</HTML> 

 

缩略图显示和鼠标悬浮大图显示

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号