您的位置：首页 > 其它

onmouseover事件显示连接描述

2013-11-22 12:32 141 查看

定义几个超连接。鼠标放上去时显示对他们的描述。

用到了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.onmouseover=hover;
orderlink.onmouseout=cleardesc;
emaillink=document.getElementById("email");
emaillink.onmouseover=hover;
emaillink.onmouseout=cleardesc;
complainlink=document.getElementById("complain");
complainlink.onmouseover=hover;
complainlink.onmouseout=cleardesc;

其中对连接绑定事件那9行代码可以用jquery批量加。这里就先不研究了。
有个细节要注意的是，并没有写传递event这个值，方法里就直接可以接受并赋值给e。挺好。

记得有一次我直接在html元素里写 onclick="testEvent(e)"传不过去事件对象。改成onclick="testEvent(event)"就传过去了。html中定义定义时间传递event对象时参数必须为event吗？待考证。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航