鼠标移动到图片就会显示另一张图片(代码) 有更新!

  ideal

    两种效果

    案例一代码

    <html>
    <head>
    <script language="javascript" >
     
        function show_img()//显示图片函数,鼠标移到链接触发
            {document.getElementById("img_1").style.display = "block";}
        function hide_img()//隐藏图片函数,鼠标离开链接触发
    	{document.getElementById("img_1").style.display = "none";}
            
    </script>
    </head>
    <body>
    <div align="center">
       <a href="#"  onMouseOver="show_img()" onMouseOut="hide_img()" >
         <img id="img_2" src="#"  /></a><!--自己定义图片src链接!-->
       <div align="center"><img id="img_1" src="#"  style="display:none" />
     </div>
    </div>
    
    </body>
    </html>
    

    案例二代码

    <div class="imglist" align="center">
    	<img class="show" src="#"/>
    	<img class="hidden" src="#"/>
    </div>
    <style>
    	.imglist .show{display:block;}
    	.imglist .hidden{display:none;}  
    </style>  
    <script>
    $(document).ready(function(){
       $(".imglist .show").mouseover(function(){
          $(this).parent(".imglist").children(".show").css("display","none");
          $(this).parent(".imglist").children(".hidden").fadeIn();
          $(this).parent(".imglist").children(".hidden").css("display","block");
        });
       $(".imglist .hidden").mouseout(function(){
          $(this).parent(".imglist").children(".hidden").css("display","none");
          $(this).parent(".imglist").children(".show").fadeIn();
          $(this).parent(".imglist").children(".show").css("display","block");
       });
    })</script>
    </body>
    </html>
    
    

    本站使用「署名 4.0 国际」创作共享协议,可自由转载、引用,但需署名作者且注明文章出处