当将鼠标放在图像的特定区域上时，我无法弄清楚如何使mouseOver变得模糊

Question

我在下面的代码中在画布上显示了地图图像。 我希望每次将鼠标悬停在一个城市上时，它都会显示一般信息和城镇图像。 我试图通过添加鼠标的X和Y坐标来做到这一点。 但是，我不知道在特定城市上空时如何弹出弹幕。 提前感谢。

<html>
<head>
<script>
    function SetValues(){
            var s = 'X=' + window.event.clientX +  ' Y=' + window.event.clientY ;
            document.getElementById('divCoord').innerText = s;
        }     

    function draw(){
            var drawing = document.getElementById("myCanvas");
            var con = drawing.getContext("2d");
        var pic = new Image();
            pic.src="map.gif";
            pic.addEventListener("load", function(){con.drawImage(pic,10,10,drawing.width,drawing.height)},false);    
        } // end draw

    window.addEventListener("load", draw,false);  

    </script>

  </head>

<body onmousemove=SetValues()>
    <div id="divCoord"></div>
    <canvas id="myCanvas" width="1100" height="600"></canvas>


</body>
</html>

Answer 1

首先，您应该使用svg标签，并且在svg内部，可以使用circle标签定义圆的位置。 您还可以将动作设置为圆圈（例如鼠标悬停等）以显示信息。

而且，您应该将城市名称和说明放在一起。 数组。

这是工作的JSFiddle 。 您可以看看小提琴，它易于理解和实施。

HTML：

    <svg width="500" height="500">
        <circle id="Istanbul" cx="210.30461736313532" cy="307.8193968817877" r="26.885237584964727" class="circle"></circle>
        <circle id="Van" cx="267.4647517358868" cy="330.86253973380485" r="16.126313899958664"></circle>
    </svg>

JS：

var cities = { "Istanbul": "Welcome to Istanbul!", "Van": "Welcome to Van!"};

var blurb = $('#blurb');

$('circle').hover(
  function() { //mouseover
      blurb.css({top:$(this).offset().top - 25, left:$(this).offset().left});
      blurb.html(cities[$(this).attr('id')]);
      blurb.fadeIn('fast');
      //alert(cities[$(this).attr('id')]);
  },
  function() { //mouseout
      blurb.fadeOut('fast');
      //alert('Bye Bye');
  }
);

CSS：

.circle{fill: #a6dba0; stroke-width: 1px; stroke: #222222; opacity: 0.8;}

#blurb{
    border:1px solid gainsboro;
    background-color:Beige;
    position:absolute;
    display:none;
}

当将鼠标放在图像的特定区域上时，我无法弄清楚如何使mouseOver变得模糊

问题描述

1 个解决方案

解决方案1
0 2014-03-05 02:40:12

当将鼠标放在图像的特定区域上时，我无法弄清楚如何使mouseOver变得模糊

问题描述

1 个解决方案

解决方案1 0 2014-03-05 02:40:12

解决方案1
0 2014-03-05 02:40:12