0

I am developing a game. For that I have several images (tiles) on top of each other, to have perspective. The problem is when I try to click on one of these tiles. As they are overlapped, when clicking on one, it is another image that receives the event. How do I ignore clicks on transparent parts of an image?

  • well two problems here so two work around 1) give all images a common identifier and each image a unique identifier class or Id whatever. Then using on click event on images/common identifier check if event target has what ever unique identifier you want to proceed with - if such and such do this else do that. – Syed Mar 27 '21 at 11:56
  • You can't click **part** of an image, that's not how click events work. – Paulie_D Mar 27 '21 at 11:58
  • 2) for transparent one you need to do calculations suppose your image is 200x200 and only centred 100x100 is coloured then you need to claculate where the click is happening on the image given that above no1 is met and script proceeds. now thats a whole lot of mess – Syed Mar 27 '21 at 11:58
  • I would without defiantly try intersection observer as it gives the functionality to do the calculations I would need to achieve the above https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API – Syed Mar 27 '21 at 12:00
  • The only way I know to do what you want reliably is to use canvas/dataurl and check whether the clicked coordinates are over a transparent part of the image or not. If they are, ignore that and go down to the next image. – A Haworth Mar 27 '21 at 12:05
  • @AHaworth How do I get images from canvas? Do I need to reverse engeneer the render process to know what is suposed to be painted there? –  Mar 27 '21 at 15:13
  • @Syed, I thought intersection observer worked on rectangular elements, will it ignore transparent parts - great if it would! – A Haworth Mar 27 '21 at 15:26
  • @AHaworth And if the images aren't rectangular? –  Mar 27 '21 at 17:10
  • Intersection observer works with the view pan ..... the calculation are made when something enters of leaves the view or portion of it. It hooks to the x and y coordinators even when object is moving. Primes is every object occupies some x and Y pixel space so observer would fire. It would not bother about the colour of the object per say. as long as long its not hidden or something of the same. So it would. – Syed Mar 27 '21 at 17:52
  • however your issue at hand is about images stacking on top of each other and lets say 5 images and you want to capture event on image 3 but it gets triggered on image 4 because its at the top in stacking order of code. then assuming part of the image is transparent and part is coloured you wish to ignore the transparent part. thats is where offered identifier suggestions even in that case click event will bubble only we either ignore it or consume it based on condition that is the gist. – Syed Mar 27 '21 at 17:55
  • Keeping in mind its going to be creative solution of bit of this mix and bit of that mix. stacking order suggestion https://stackoverflow.com/questions/61238332/how-to-catch-clicks-on-multiple-images – Syed Mar 27 '21 at 17:57
  • once the stacking order is done save your self a hair fall by adding image maps example here https://www.w3schools.com/html/html_images_imagemap.asp then run the logic on click event to detect image maps. if so do something other wise dont. – Syed Mar 27 '21 at 18:02
  • then have a look at this answer https://stackoverflow.com/questions/34867066/javascript-mouse-click-coordinates-for-image capturing x and y of mouse click ...I might try some dummy solution to show its way through – Syed Mar 27 '21 at 18:04
  • I have added an answer to creative what you are seeking. have look – Syed Mar 27 '21 at 19:26

1 Answers1

0

Here is what I have tried to recreate using map.

  1. stacked one image over another gave them come kind off identifiers
  2. You would notice if you click on bottom half of the image it does not trigger event because its map occupying on top of image.
  3. so we created a event on map area
  4. then created an infinite loop that run to match if element has id we desire if it does then we have run bit of code.

var spool = document.querySelectorAll('.clicked');

spool.forEach(item => {
  item.addEventListener('click', event => {
   alert(event.currentTarget.getAttribute('alt'));
  })
});




var mapo = document.querySelector('.map');

mapo.addEventListener('click', event => {


var searching = event.target.parentNode;
   while (true) {

    if (searching.id == 'trigerme') {
    alert(searching.getAttribute('alt'));
        break;
    } 
searching= searching.previousSibling;
    
  
}
   
   

  })
<img src="https://www.w3schools.com/html/workplace.jpg" alt="something else yes"  width="400" height="379" class='clicked' id="trigerme">

<img src="https://www.w3schools.com/html/frenchfood3.jpg" alt="something else no" style="position:relative; margin-top:-379px;" usemap="#workmap" width="400" height="379" class='clicked' >


<map name="workmap" class="map">
  <area shape="rect" style="background-color:red;" coords="34,44,270,350" alt="Computer" >

</map>
Syed
  • 696
  • 1
  • 5
  • 11
  • That's possible to use "usemap" in divs? –  Mar 27 '21 at 21:13
  • maps can be applied to images regardless to where they are be it in a div or out side it. As long as long there is an image and map and both are able to reference each other it would work. – Syed Mar 28 '21 at 08:39
  • However if you need same functionality with div without image of any of sort then you have to be creative again to use your own bunch of transparent divs on top either as pseudo elements or other wise – Syed Mar 28 '21 at 08:45
  • something around your need transparent + click events + images tacked up .... have a look around for dialogue element and see how you can work with for you https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog – Syed Mar 28 '21 at 08:48