您的位置：首页 > Web前端 > JavaScript

网页链接说明的JS程序

2015-09-29 17:43 561 查看

通过even对象t获取对象属性(srcElement或target属性)的使用和将事件设置为属性的使用，制作网页链接说明的小JS demo

//在Internet Explorer的event属性中event.srcElement代表元素出现的对象
//在Netscape和Firefox的event属性中event.target代表元素出现的对象
<!document html>
<body>
<h1>为网页链接添加说明</h1>
<center>
<a href="http://baidu.com" id="ex1">example1</a><br/>
<a href="http://sogou.com" id="ex2">example2</a><br/>
<a href="http://huohu.com" id="ex3">example3</a><br/>
<h2 id="description"></h2><br/>
</center>

<script language="javascript" type="text/javascript">
function hover(e){
if(!e) var e = window.event;
whichlink = (e.target) ? e.target.id : e.srcElement.id; //whichlink获取元素的对象
if(whichlink=="ex1") desc="示例1";
else if(whichlink=="ex2") desc="示例2";
else if(whichlink=="ex3") desc="示例3";
t = document.getElementById("description");
t.innerHTML = desc;
}

function cleardesc(){
t = document.getElementById("description");
t.innerHTML = "";
}

alink = document.getElementById("ex1");
alink.onmouseover = hover; //将事件设置为属性，注意onmouseover都是小写。
alink.onmouseout=cleardesc;

blink = document.getElementById("ex2");
blink.onmouseover = hover;
blink.onmouseout=cleardesc;

clink = document.getElementById("ex3");
clink.onmouseover = hover;
clink.onmouseout=cleardesc;
</script>
</body>
</html>

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

标签： javascript

相关文章推荐

新的分享

章节导航