如图要实现鼠标停在a,b,c三个区域时,area出现不同的图片。
用onMouseOver实现。我希望在那基础上添加动态的效果,比如渐渐淡出的显示图片,有没有什么方法?
注:要求在原来的基础上添加,不能完全用别的jquery代替。

解决方案 »

  1.   

    是不能用jQuery实现还是不能用jQuery插件实现?
      

  2.   

    来个jQuery方法~
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title><style type="text/css">
    div.divABC { height:100px; width:100px; border:1px solid red; }
    #targetArea div { display:none; }
    </style><script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
    var arrImg = {'divA':'1.jpeg','divB':'2.jpeg','divC':'3.jpeg'};  //图片文件,注意路径
    $("div.divABC").hover( function() {
    var thisDivID = $(this).attr("id");
    $("#targetArea div").append('<img src="' + arrImg[thisDivID] + '"></img>').fadeIn();
    }, function() { $("#targetArea div").fadeOut(); $("#targetArea div img").remove();  });
    });
    </script>
    </head><body>
    <div id="divA" class="divABC"></div>
    <div id="divB" class="divABC"></div>
    <div id="divC" class="divABC"></div>
    <div id="targetArea"><div></div></div>
    </body>
    </html>
      

  3.   

    img标签写错了
    $("#targetArea div").append('<img src="' + arrImg[thisDivID] + '"></img>').fadeIn();
    改为:
    $("#targetArea div").append('<img src="' + arrImg[thisDivID] + '" />').fadeIn();
      

  4.   

    是onMouseOver这个方法实现的
    <map name="Map">
    <area shape="poly" coords="36, 80, 35, 123, 137, 129, 135, 78" alt="Frozen Food Submenu"
    href="#" onMouseOver="changeDisplay(1)">
    <area shape="poly" coords="165, 80, 165, 123, 256, 129, 255, 78" alt="Fresh Food Submenu"
    href="#" onMouseOver="changeDisplay(3)">
    <area shape="poly" coords="293, 80, 293, 123, 383, 129, 384, 78" alt="Beverages Food Submenu"
    href="#" onMouseOver="changeDisplay(4)">
    <area shape="poly" coords="422, 80, 422, 123, 515, 129, 513, 78" alt="Home Health Submenu"
    href="#" onMouseOver="changeDisplay(2)">
    <area shape="poly" coords="553, 80, 553, 123, 647, 129, 644, 78" alt="Pet Submenu"
    href="#" onMouseOver="changeDisplay(5)">
    </map>
      

  5.   

    onMouseOver="changeDisplay(5)"
    这个javascript的function能不能实现一些特别的效果显示出图片。原本只是直接变化,看上去不够好看。
      

  6.   

    function的代码,效果就是直接变化。
    function changeDisplay(type) {
                if (type == 1) {
                    FrozenFood.style.visibility = "visible";
                    HomeHealth.style.visibility = "hidden";
                    FreshFood.style.visibility = "hidden";
                    Beverages.style.visibility = "hidden";
                    PetFood.style.visibility = "hidden";
                }