JavaScript教程:onmouseover控制图片

来源：网络整理责任编辑：栏目编辑发表时间:2013-07-01 15:33　点击:次

ASP PHP JSP JavaScript 网页设计 DIVCSS Ajax技术 HTML5

<html>
<head>
<style>
.imgActive
{
border:3px solid #000000;
}
</style>
<script type="text/javascript">
<!--
function attachImgEventListener()
{
var imageArray=document.getElementById("MM").getElementsByTagName("img");
    for(var i=0;i<imageArray.length;i++)
    {
       imageArray[i].onmouseover=imgOverListener;
     imageArray[i].onmouseout=imgOutListener;
    }
}

function imgOverListener(event)
{
var event=event || window.event;
var source = event.srcElement || event.target;
source.className="imgActive";
}
function imgOutListener(event)
{
var event=event || window.event;
var source = event.srcElement || event.target;
source.className="";
}
-->
</script>
</head>
<body onLoad="attachImgEventListener()">
<div id="MM">
<img src="http://www.webjx.com/images/common/xml.gif" width="50px" height="50px">
<img src="http://www.webjx.com/images/common/xml.gif" width="50px" height="50px">
<img src="http://www.webjx.com/images/common/xml.gif" width="50px" height="50px">
<img src="http://www.webjx.com/images/common/xml.gif" width="50px" height="50px">

</div>
<img src="http://www.webjx.com/images/common/xml.gif" width="50px" height="50px">
<img src="http://www.webjx.com/images/common/xml.gif" width="50px" height="50px">
<img src="http://www.webjx.com/images/common/xml.gif" width="50px" height="50px">
<img src="http://www.webjx.com/images/common/xml.gif" width="50px" height="50px">
</div>
</body>
</html>

JavaScript教程:onmouseover控制图片

相关新闻>>

今日头条

推荐热点

您可能感兴趣的文章

快速直达

新闻点评智问网络

新闻关注排行榜

WEB编程导航