大家有空吗？进来帮我实现一个功能。

就是一个图片连接 ，当我把鼠标放上去的时候，图片的边框会显示另外一种颜色！！如何实现。要用JS吗？有没有源代码。发我一下。谢谢！！

解决方案 »

  1.   

    是用js实现，用客户端事件onmouseover事件，img.style.border.color="red"
      

  2.   

    <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;
        }
    }
    Webjx.Comfunction 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>
      

  3.   

    加js很短的代码:
    js:
        <script type="text/javascript">
        function changColor(flag)
        {
            if(flag=="1")
                document.getElementById("myImg").style.borderColor="#ff0000";
            else
                document.getElementById("myImg").style.borderColor="#0000ff";
        }
        </script>html
    <a href="default.aspx"><img id="myImg" src="Images/picture.jpg" width="440" height="58" border="2" alt="" onmouseover="changColor(1)"  onmouseout="changColor(2)" /></a>
      

  4.   


    <style type="text/css">
    img{border:......}
    img:hover{border:......}
    img:visited{border:......}
    </style>