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 个答案: