JavaScript教程:onmouseover控制图片
| <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.phpstudy.net/images/common/xml.gif" width="50px" height="50px"> <img src="http://www.phpstudy.net/images/common/xml.gif" width="50px" height="50px"> <img src="http://www.phpstudy.net/images/common/xml.gif" width="50px" height="50px"> <img src="http://www.phpstudy.net/images/common/xml.gif" width="50px" height="50px"> </div> <img src="http://www.phpstudy.net/images/common/xml.gif" width="50px" height="50px"> <img src="http://www.phpstudy.net/images/common/xml.gif" width="50px" height="50px"> <img src="http://www.phpstudy.net/images/common/xml.gif" width="50px" height="50px"> <img src="http://www.phpstudy.net/images/common/xml.gif" width="50px" height="50px"> </div> </body> </html> |