定义几个超连接。鼠标放上去时显示对他们的描述。
用到了onmouseover和onmoouseout两个事件。html代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Discriptive Links</title>
</head>
<body >
<h1>Discriptive Links</h1>
<p>Move the mouse pointer over one of these links to view a description</p>
<ul>
<li><a id="order" href="order.html">order</a></li>
<li><a id="email" href="email.html">email</a></li>
<li><a id="complain" href="complain.html">complain</a></li>
</ul>
<h2 id="description"></h2>
<script type="text/javascript" src="test2.js"></script>
</body>
</html>test2.js代码如下
function cleardesc(){
d=document.getElementById("description");
d.innerHTML="";
}
function hover(e){
if(!e){
var e =window.event;
}
whichlink=e.target.id?e.target.id:e.srcElement.id;
if(whichlink=="order"){desc="order a product."}
if(whichlink=="email"){desc="send us a message."}
if(whichlink=="complain"){desc="insult us,our products,our families."}
d=document.getElementById("description");
d.innerHTML=desc;
}
orderlink=document.getElementById("order");
orderlink.οnmοuseοver=hover;
orderlink.οnmοuseοut=cleardesc;
emaillink=document.getElementById("email");
emaillink.οnmοuseοver=hover;
emaillink.οnmοuseοut=cleardesc;
complainlink=document.getElementById("complain");
complainlink.οnmοuseοver=hover;
complainlink.οnmοuseοut=cleardesc;其中对连接绑定事件那9行代码可以用jquery批量加。这里就先不研究了。
有个细节要注意的是，并没有写传递event这个值，方法里就直接可以接受并赋值给e。挺好。
记得有一次我直接在html元素里写 οnclick="testEvent(e)"传不过去事件对象。改成οnclick="testEvent(event)"就传过去了。html中定义定义时间传递event对象时参数必须为event吗？待考证。
1122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
