C# 图像在鼠标上方闪烁_C#_Javascript_Jquery_Visual Studio 2012_Onmouseover

C# 图像在鼠标上方闪烁

c# javascript jquery visual-studio-2012

C# 图像在鼠标上方闪烁,c#,javascript,jquery,visual-studio-2012,onmouseover,C#,Javascript,Jquery,Visual Studio 2012,Onmouseover,我有一张来自地图的图像，还有一些来自图像地图上几个区域（蓝色）的其他图像。其他图像表示鼠标悬停时应显示的蓝色区域。但我有个问题。当我把鼠标放在图像地图上的区域上时，它们开始闪烁。例如，当我将鼠标悬停在特定区域上时，我希望在不闪烁onmouseover和onmousemove的情况下激活蓝色区域。我将放置一个.gif图片（光标未显示）以显示当我将鼠标光标移到图像上时遇到的问题，我还将发布代码以查看是否缺少任何内容或必须进行更改 $（'.world\u map\u container a

我有一张来自地图的图像，还有一些来自图像地图上几个区域（蓝色）的其他图像。其他图像表示鼠标悬停时应显示的蓝色区域。但我有个问题。当我把鼠标放在图像地图上的区域上时，它们开始闪烁。例如，当我将鼠标悬停在特定区域上时，我希望在不闪烁onmouseover和onmousemove的情况下激活蓝色区域。我将放置一个.gif图片（光标未显示）以显示当我将鼠标光标移到图像上时遇到的问题，我还将发布代码以查看是否缺少任何内容或必须进行更改






$（'.world\u map\u container area'）。每个（函数（）{
//将操作分配给鼠标悬停事件
$（此）.mouseover（函数（e）{
var country_id=$（this.attr（'id'）。replace（'area_'，''）；
$（'#'+country_id）.css（'display'，'block'）；
});
//将操作分配给mouseout事件
$（此）.mouseout（函数（e）{
var country_id=$（this.attr（'id'）。replace（'area_'，''）；
$（'#'+country_id）.css（'display'，'none'）；
});
});
div.world_map_container#transparent_map{
位置：绝对位置；
z指数：20；
宽度：530px；
高度：380px；
边界：无；
}
分区世界地图容器{
右边距：15px；
宽度：530px；
高度：380px；
位置：绝对位置；
右填充：0px！重要；
}
世界地图和集装箱ul li分部{
显示：无；
位置：绝对位置；
文本缩进：-9999px；
z指数：30；
}
#雷森{
背景：url（“Sliki/resen.gif”）无重复滚动0透明；
高度：380px；
右：0；
顶部：0px；
宽度：530px；
}
#斯科普里{
背景：url（“Sliki/skopje.gif”）无重复滚动0透明；
高度：380px；
右：0；
顶部：0px；
宽度：530px；
}
#科卡尼{
背景：url（“Sliki/kocani.gif”）无重复滚动0透明；
高度：380px；
右：0；
顶部：0px；
宽度：530px；
}

在悬停图像上，添加usemap以使用相同的地图。这样，它们在显示时不会触发mouseout事件

看这把小提琴：

我用你的mouseout事件更改了我的mouseout事件，它可以工作（不闪烁），但因为我是javascript新手，我不明白你复制id上方区域的意思。你能告诉我应该添加什么来实现这一点吗？是的，图像变成了一个正方形区域，这意味着当我将光标从整个图像地图中移出时，蓝色区域停止显示。@user1408956我用一个新的/更简单的解决方案更新了我的答案。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%--<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />--%>
<script type="text/javascript"   src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<%--<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>--%>


</head>
<body id="uiBody" class="regions" dir="ltr">
<form id="form2" runat="server">
    <asp:PlaceHolder ID="PlaceHolder1" runat="server">
    <div class="world_map_container">
        <img src="Sliki/maptransparent.gif" usemap="#the_world_map" id="transparent_map" />

        <map name="the_world_map" id="the_world_map">
            <area shape="poly" coords="167,335,168,321,166,318,161,313,156,308,148,308,146,304,143,302,137,301,136,293,133,283,130,277,127,273,127,270,129,266,133,261,133,253,132,248,128,242,124,240,121,240,118,243,114,248,108,254,100,258,94,261,92,261,91,268,87,274,83,279,81,281,81,286,81,291,81,295,75,298,69,304,67,308,66,316,69,318,79,319,86,319,88,321,91,324,94,326,100,325,102,322,103,317,100,315,95,314,88,312,85,308,87,303,90,300,94,297,98,294,104,293,109,293,113,295,119,303,124,311,127,318,130,327,131,335,132,338,135,336,140,332,144,331,148,331,151,333,155,336,162,336,167,335" href="Default2.aspx" id="area_resen" alt="Resen" />
            <area shape="poly" coords="171,45,167,47,161,47,162,50,167,50,167,53,164,55,157,64,161,68,169,88,172,89,175,102,175,105,179,105,180,109,187,116,187,118,202,121,202,124,212,124,216,121,216,116,245,116,253,113,255,110,254,104,253,103,259,103,265,104,269,105,272,103,272,95,274,90,277,87,282,86,285,84,287,78,288,76,280,75,274,74,270,72,265,67,263,63,257,63,254,60,251,57,250,56,247,57,241,56,237,55,234,52,229,49,227,44,227,38,231,35,233,33,231,31,226,29,225,28,225,21,220,20,216,22,213,24,212,26,210,28,207,28,205,26,202,26,200,28,199,31,196,33,192,39,188,43,189,45,189,47,185,50,179,52,175,52,172,50,171,47,171,45" href="Default2.aspx" id="area_skopje" alt="Skopje" />
            <area shape="poly" coords="397,47,388,47,383,56,384,61,384,66,382,70,379,71,375,71,375,76,373,82,372,88,372,94,377,96,389,109,408,109,409,98,405,92,409,89,406,80,412,80,421,77,424,74,423,68,429,66,425,63,415,53,398,53,397,47" href="Default2.aspx" id="area_kocani" alt="Kocani" />
        </map>
        <ul>
            <li id="resen" style=""><a href="#">resen</a></li>
            <li id="skopje"><a href="#">skopje</a></li>
            <li id="kocani"><a href="#">kocani</a></li>
        </ul>
    </div>
    <script type="text/javascript">
        $('.world_map_container area').each(function () {
            // Assigning an action to the mouseover event
            $(this).mouseover(function (e) {
                var country_id = $(this).attr('id').replace('area_', '');
                $('#' + country_id).css('display', 'block');
            });

            // Assigning an action to the mouseout event
            $(this).mouseout(function (e) {
                var country_id = $(this).attr('id').replace('area_', '');
                $('#' + country_id).css('display', 'none');
            });


        });
    </script>
    <style type="text/css">
        div.world_map_container #transparent_map {
        position: absolute;
        z-index: 20;
        width: 530px;
        height: 380px;
        border: none;


        }

        div.world_map_container {

        margin-right:15px;
        width:530px;
        height:380px;
        position:absolute;
        padding-right:0px !important;
        }


    div.world_map_container ul li {
        display: none;
        position: absolute;
        text-indent: -9999px;
        z-index: 30;        
        }

    #resen {
        background: url("Sliki/resen.gif") no-repeat scroll 0 0 transparent;
        height: 380px;
        right: 0;
        top: 0px;
        width: 530px;

    }

    #skopje {
        background: url("Sliki/skopje.gif") no-repeat scroll 0 0 transparent;
        height: 380px;
        right: 0;
        top: 0px;
        width: 530px;



    }

    #kocani {
        background: url("Sliki/kocani.gif") no-repeat scroll 0 0 transparent;
        height: 380px;
        right: 0;
        top: 0px;
        width: 530px;

    }

</style>  
    </asp:PlaceHolder>
</form>
</body>
</html>

<img src="https://www.google.com/images/srpr/logo4w.png" usemap="#theMap_map" />
<map id="theMap_map" name="theMap_map">
    <area shape="poly" coords="1,1,1,50,50,50,50,1,1,1" id="area1" style="background: #FF0000;" href="#" />
</map>

<img src="https://www.google.com/images/srpr/logo4w.png" id="hover" usemap="#theMap_map" />