悬停的弹出窗口
上一篇 /
下一篇 2012-05-17 23:42:02
/ 个人分类：javascript
网页上常见的形式就是把鼠标放到图片上，弹出一个窗口显示这个图片的详细描述，将鼠标移开，窗口就消失。
这种动作涉及到javascript的事件mouseover,mouseout
我们需要做的就是
将弹出窗口的函数分配给mouseover事件，
将删除窗口的函数分配给mouseout事件。
然后针对每个图片增加事件监听器.下面是最简单的示例。
<html>
<head>
<script. type="text/javascript">
function manageEvent(eventObj, event, eventHandler) {
if ( eventObj.addEventListener) {
eventObj.addEventListener(event, eventHandler, false);
}else if ( eventObj.attachEvent) {
event = "on" + event;
eventObj.attachEvent(event, eventHandler);
}
}
window.onload=function() {
var imgs = document.getElementsByTagName("img");
for( var i = 0; i < imgs.length; i++){
manageEvent(imgs[i],"mouseover", showWindow);
manageEvent(imgs[i],"mouseout", removeWindow);
}
}
function showWindow() {
var img = document.getElementById("test");
var div = document.createElement("popup");
div.id = "popup";
var txt = document.createTextNode("tanchuneirong");
div.appendChild(txt);
document.body.appendChild(div);
}
function removeWindow() {
var popup = document.getElementById("popup");
if(popup)
popup.parentNode.removeChild(popup);
return false;
}
</script>
</head>
<body>
<img id="test" src="1.JPG" width="10%" height="10%"></img>
</body>
</html>
收藏
举报
TAG:
