用了js做了个图片链接特效，链接后图片出现了红色小叉号

我用javascript做了个图片特效，当鼠标移到图片(onmouseover)上时1.png展开变成2.png，当鼠标移出图片(onmouseout)时再收缩变回1.png,如果此图片没有超链接效果很好，可是当做了超链接后，鼠标点击图片后进行网页链接，然后鼠标移开图片，发现图片变成了红色小叉号。当鼠标再移上去图片效果又出来了，为什么呢？是不是onclick影响了onmouseout，还是其他什么原因。<head>
<style>
        .hutia {  filter:progid:DXImageTransform.Microsoft.RevealTrans(); }
</style>
     <script>
        var i = 0;
        var s1,s2,s3;
        function $(str){ return(document.getElementById(str)); }
        window.onload = function(){
        $("head2").onmouseover=doTransition;
        $("head2").onmouseout=doTransitionEnd;
        }
         // 鼠标移入图片效果
        function doTransition(){
               if(this.filters[0].status == 2){
                //如果转换正在进行，则停止转换的效果，并显示最终的结果
                this.filters[0].stop();
            }else{
                //如果转换未进行，则执行转换
                //设置滤镜转换效果为设置值
                this.filters[0].transition = 14;
                //捕获对象初始显示状态
                this.filters[0].apply();
                //改变对象src属性，载入新的图片
                 this.src = "..\\image\\2.png";
                //执行转换
                this.filters[0].play(0.05);
            }
        }
         //鼠标称出图片效果
        function doTransitionEnd(){
            if(this.filters[0].status == 2){
                this.filters[0].stop();
            }else{
                this.filters[0].transition = 13;
                this.filters[0].apply();
                this.src = "..\\image\\1.png";
                this.filters[0].play(0.2);
            }
        }
    </script>
</head>
<body>
....
<td style="width: 150px; height: 34px;" >
    <a href="../教学服务/learing.aspx"><img id="head2" class="hutia" src="../image/1.png" /> </a></td>
....
</body>