鼠标移动到一张图片上显示另外一张图片

Question

  用JS实现：鼠标移动到一张图片上，在原位置上显示另外一张图片，并在图片上出现可以超链接的文字

Answer 1

提供思路，使用onmouseover, 替换image 的src，文字方面，预先使用div 包含a标签，然后同时处理，应该可以解决。

Answer 2

<div>
            <img src="http://t3.baidu.com/it/u=2067536300,3086431432&fm=13&gp=0.jpg" onmouseover="ChangeImg(this,'要显示的文字');" />
            <a href="http://www.baidu.com"><span id="spanFont"></span></a>
        </div>    <script type="text/javascript">
        function ChangeImg(img,font) {
            spanFont.innerText = font;
            spanFont.style.display = "block";
            img.src = "http://t3.baidu.com/it/u=1853483217,2998772967&fm=13&gp=0.jpg";
        }
    </script>

Answer 3

 <script type="text/javascript">
        function ChangeImg(img,font) {
            spanFont.innerText = font;
            spanFont.style.display = "block";
            if(img.src=="http://t3.baidu.com/it/u=1853483217,2998772967&fm=13&gp=0.jpg"
) return;
            img.src = "http://t3.baidu.com/it/u=1853483217,2998772967&fm=13&gp=0.jpg";
        }
    </script>

Answer 4

这个还要考虑页面布局了，一般这种效果实用性不太强，倒是onmouseover事件控制，显示解释的图片出现的可能性大点。
这样，
<script>
  var shuoming=document.createElement("div");
  var text=document.getElementById("textid");
  boolean sign=true;
function show(){
  sign=false;
  text.parentNode.appendChild(shuoming);
  shuoming.style.top=parseInt(text.style.top)+10+"px";
  shuoming.style.left=parseInt(text.style.left)+10+"px";
  shuoming.style.zIndex=3;//大于1即可
}
function hide(){
  if(!sign){
     text.parentNode.removeChild(shuoming);
}
}
</script>必要时可添加classname,通过css操控

Answer 5

用CSS就解决了。<style>
a:link {width:100px;height:50px;background:url('http://www.baidu.com/img/baidu_jgylogo3.gif');text-align:center;line-height:50px;font-size:1px}
a:hover {background:url('http://www.google.com.hk/images/nav_logo83.png');color:red;font-size:18px;font-weight:bold;}
</style>
<a href="链接">链接文字</a>