Проверьте, какая часть была нажата?

Question

Вы можете проверить JS или JQuery, в какую часть изображения было нажато?

К примеру, мы имеем следующее: Picture

Вы можете проверить, если пользователь нажал на определенную ручке? Например, красный?

Благодаря

Answer 1

использование image-mapping лучше для такого рода требования. отобразите требуемую область и ссылку на требуемый URL. узнать больше о image-mappinghttp://www.w3schools.com/tags/tag_map.asp

Answer 2

У вас есть по крайней мере три варианта:.

1. разбить изображение на несколько изображений друг с одной ручкой, а затем положить их в ссылку, которая определяет перо (например <a href="#red"><img src="redpen.jpg" /></a>

2. Вы можете использовать HTML-карту с тегами области.

3. Вы можете использовать координаты вашего кли ск событие, чтобы решить, какое перо было щелкнул, как описано в этом ответе: https://stackoverflow.com/a/4249711/387573

Answer 3

Если вы не хотите использовать карту изображения, вы можете просто обнаружить клику положение х & у по отношению к изображению, а затем оттуда, выяснить, что вы хотите сделать.

Это будет не очень доступно, но это будет работы.

Вы можете отрегулировать относительную позицию x & y так, как показано на рисунке. (Попробуйте нажать на желтой ручкой)

var image = document.querySelector('img'); 
 

 
image.addEventListener('click', onClick, true); 
 

 
function onClick(event){ 
 
\t \t var imageBoundingRect = image.getBoundingClientRect(); 
 
    
 
    var x = event.pageX - imageBoundingRect.left; 
 

 
    // We are not using the y co-ordinate but this is how you would get it. 
 
    var y = event.pageY - imageBoundingRect.top; 
 

 
\t if (x >= 345 && x <= 380){ 
 
     alert('Clicked on the yellow pen.') 
 
    } 
 
}

<img src="http://www.wilde13-werbemittelkatalog.de/pictures/werbekugelschreiber.jpg"/>