如何在一個DIV /圖像

我不知道是否有可能在一個div /圖像的不同區域的點擊運行不同的JavaScript功能的特定區域點擊運行不同的JavaScript函數。如何在一個DIV /圖像

例如，如果我有一個尺寸爲100px X 100px的圖像，並且每當用戶點擊圖像的左上角20％時（即，如果用戶點擊了0％從圖像的頂部降低20％，從圖像的左側降低0％到20％），這可能嗎？

如果是這樣，我也做一個不同的JavaScript警報功能（具有不同的警報消息）運行，如果是30％之間的40％下降從的頂部區域內的用戶點擊圖像，並從圖像的左側50-60％？

我需要通過使用高度和寬度的百分比，而不是明確地限定的像素的數目來定義的區域。

這種事可能，如果是這樣，它需要一個庫，以檢測光標/觸摸的位置？

來源

2017-08-15 Emily

有你想過在圖像上放置一些div元素？爲這些元素分配點擊事件....或者嘗試跟蹤鼠標的x/y位置並計算圖像內的位置？ – NewToJS

是的，這是可能的。你試過什麼了？ – colecmc

你必須把頂部圖像的div元素（磚），並加入到他們的事件偵聽器或做圖像上的每一次點擊的動態計算並顯示警告 – Observer

可以使用position（）函數上的click事件。如果圖像ID =「MYIMAGE」你可以做這樣的事情：

$("#myImage").click(function(e) { 
    var horizpercent = 20; 
    var vertpercent = 20; 
    var posX = e.pageX - $(this).position().left; 
    var posY = e.pageY - $(this).position().top; 
    var width = $(this).width(); 
    var height = $(this).height(); 
    if (posX < width * horizpercent/100 && posY < height * vertpercent/100) { 
     alert('ye') 
    } 
});

來源

2017-08-15 19:05:27 Kevin

你還應該提到你的答案是使用一個庫....'jQuery'，所以這將是相關的解釋如何包含該庫，所以OP可以至少嘗試你的解決方案....'jQuery'沒有標記所以提供解釋如何鏈接到庫的jQuery解決方案將是一個明智之舉，不要假設每個人都知道如何去做。這可能是它未被標記的原因。 – NewToJS

oooh是的，如果有人使用普通的老javascript，我總是假設jquery：去這裏下載jquery min並將它包含在你的佈局中http://jquery.com/download/ – Kevin

解決方案是建立在圖像元素多重疊加。

<div class="ovrl-container"> 
    <img src="..." alt="..."> 
    <div class="ovrl ovrl1"></div> 
    <div class="ovrl ovrl2"></div> 
    <div class="ovrl ovrl3"></div> 
</div>

.ovrl-container必須爲position:relative，所有兒童position:absolute。 .ovrl必須有z-index大於圖片才能捕捉點擊，而不是圖片本身。 .ovrl1，.ovrl2，.ovrl3應該根據自己的需求進行大小和位置。

在JS一部分，您正在收聽的點擊.ovrl1，.ovrl2，.ovrl3，jQuery的例子：

$('.ovrl').click(function(){ 
if($(this).hasClass('ovrl2')){ 
// action only for ovrl2... 
} 
})

來源

2017-08-15 19:13:55

我認爲最好的形式給出是將圖像設置爲主DIV /容器的背景下，然後使用「display：flex」屬性，將div放入容器中，在需要的百分比中設置寬度和高度。然後，你可以添加事件偵聽器的每個格：

<div class="container" style="display: flex"> 
<div id="left-ear" style="height: 20%; width: 30%" onClick="event"></div> 
<div id="space-inbetween-ears" [same height and width= 100 - (leftearWitdh 
x2)></div> 
<div id="right-ear..." [same as leftEar] onClick="event"></div> 
</div>

事情是這樣的......

來源

2017-08-15 19:17:18 GuilloteL

一個jQuery的無實現可能是這樣的：

var click = document.getElementById("click"); 
 
click.onclick = function (evt) { 
 
    var xOff = click.offsetLeft; 
 
    var yOff = click.offsetTop; 
 
    var clickedX = evt.pageX - xOff; 
 
    var clickedY = evt.pageY - yOff; 
 
    click.innerHTML = `Clicked on relative pos: ${clickedX}, ${clickedY}`; 
 
};

<div style="height: 200px;">Some random height</div> 
 
<div style="height: 50px; background-color: #fdd;" id="click"></div>

來源

2017-08-15 19:30:01

如何在一個DIV /圖像

回答

相關問題