我無法弄清楚如何在將鼠標放在圖像的特定區域時使mouseOver模糊不清

我有我的代碼，下面我在畫布上顯示了一張圖的圖像。我希望每當我滑過一個城市時，它會顯示一般信息和城鎮的圖像。我試圖通過加入鼠標的X和Y座標來做到這一點。但是，我不知道當我在某個特定的城市時，我會怎樣做一個流行歌曲。 Thankx提前。我無法弄清楚如何在將鼠標放在圖像的特定區域時使mouseOver模糊不清

<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>

來源

2014-03-05 user3298474

你有你的圖像城市的硬編碼位置？它們會動態變化還是永遠都是相同的圖像和城市？ –

它的圖片和城市總是一樣的。 – user3298474

首先，你應該使用SVG標籤和SVG裏面，你可以使用圈標籤定義圓的位置。您還可以將操作設置爲圓形（如鼠標懸停等）以顯示信息。

而且你應該把城市的名字和blurb的解釋保存在assoc裏。陣列。

這裏是工作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; 
}

來源

2014-03-05 02:40:12

我無法弄清楚如何在將鼠標放在圖像的特定區域時使mouseOver模糊不清

回答

相關問題