如何在一个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 /图像

回答

相关问题