`
cuisuqiang
  • 浏览: 3937607 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
3feb66c0-2fb6-35ff-968a-5f5ec10ada43
Java研发技术指南
浏览量：3651913
社区版块
存档分类
最新评论

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

    博客分类：
  • JS
JavaScriptHTML 
阅读更多 
<!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>

 

分享到：
| Xpath java.lang.NoClassDefFoundError: or ...
评论
1 楼 cuisuqiang 2012-06-29   
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 鼠标悬停提示 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showDetail( e,str ){
	document.all.showDetailDiv.innerHTML="提示内容：<br>" + str;
	// 为的是让提示的DIV显示在鼠标的右下角
	document.all.showDetailDiv.style.left = event.x + 10;
	document.all.showDetailDiv.style.top = event.y + 20;
	// DIV样式显示
	document.all.showDetailDiv.style.display = "";
}
function closeDetail(){
	document.all.showDetailDiv.style.left = 0;
	document.all.showDetailDiv.style.top = 0;
	// DIV隐藏
	document.all.showDetailDiv.style.display = "none";
}
//-->
</SCRIPT>
<BODY>
<input type="image" width=100 height=120 src="http://dl.iteye.com/upload/picture/pic/110263/8d4d9bf1-5626-33ea-8344-ae5c7789442e.jpg" onmousemove="showDetail(this,'端午粽飘香，离人望故乡')" onmouseout="closeDetail()">
<input type="image"  width=100 height=120 src="http://dl.iteye.com/upload/picture/pic/110263/8d4d9bf1-5626-33ea-8344-ae5c7789442e.jpg" onmousemove="showDetail(this,'惜君只欲苦死留，富贵何如草头露')" onmouseout="closeDetail()">
<input type="image"  width=100 height=120 src="http://dl.iteye.com/upload/picture/pic/110263/8d4d9bf1-5626-33ea-8344-ae5c7789442e.jpg" onmousemove="showDetail(this,'雨后轻寒犹未放，春愁酒病成惆怅')" onmouseout="closeDetail()">

<div id="showDetailDiv" style="width: 200px;height: 2px;position:absolute;left=0;top=0;display:none;border:1px red solid;background-color: #FF55BB"></div>
</div>
</BODY>
</HTML>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics