JS综合案例:显示按钮的说明性文字

来自CloudWiki
跳转至: 导航搜索
 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>按钮的说明性文字</title>
<script type="text/javascript">
	function linkOn(x){
	with(link[x]){
	linkmessage.innerHTML=msg;
	linkmessage.style.top=dtop;
	linkmessage.style.left=dleft;
	linkmessage.style.background=bgcolor;}
	linkmessage.style.visibility="visible";
	}
	
	function linkOff(){
	linkmessage.style.visibility="hidden";
	}
	
	function Display(msg,bgcolor,dtop,delft){
	this.msg=msg;
	this.bgcolor=bgcolor;
	this.dtop=dtop;
	this.dleft=delft;
	}
	var link=new Array();
	link[0]=new Display('努力使每个人都成为JavaScript开发的高手。','bisque',150,430)
	link[1]=new Display('JavaScript技术普及从书','bisque',190,430)
</script>
</head>
<br>
<body>
   	<div id="linkmessage" style="position: absolute; visibility: hidden; width=40%">
	</div>
	<p>
        <input type=button value="[本书宗旨]" href="#" onmouseover="linkOn(0)" onmouseout="linkOff()">
    	<input type=button value="[关于本书]" href="#" onmouseover="linkOn(1)" onmouseout="linkOff()"> 
	</p> 
</body>
</html>