Image overlay, click the icon without hitting the background

Question

I use HTML, CSS, JavaScript in Rails. My images are stored in the Applications / Assets / Images folder. My sound (for the onClick event listener) is stored in my public / audio folder.

I'm looking for layer images on top of each other, so I can target every single image to set different JavaScript onClick event listeners, but do these images render with an invisible background? which prevents clicks on the images that it overlays.

In offline mode, my gifs have no background. A selection of icons without a background for reference: http://findicons.com/search/gif

To emphasize that there is an invisible background for the image,

the bottom icon, this is the icon highlighted by clicking on the background of the icon (it is highlighted) also triggers an onClick JavaScript event listener

I use the rails command to render the image on my page.

<div id="id3"> <%= image_tag "gif_file.png" %> </div> 

My css targeting a div

 #id3 { position:absolute; } 

To reduce the amount of text and confusion, I leave a code that shows overlapping icons.

My .js file

 var soundright = '<audio autoplay="autoplay" src="/audios/hello.wav"></audio>' var sound = document.getElementById('sound'); var icon = document.getElementById('id3'); $(icon).click(function(){ $(sound).html(soundright); }); 

Please let me know how I can click on each rendered image that overlays noticeably (JavaScript onClick event listeners are added to each individual image) without clicking on the invisible background of the image that overlays on top of it.

Eliminating an invisible background is a solution that I could not find.

I try to make a target by superimposing images on each other and doing every part of the mouse click (onClick).

EDIT: just changed my last 3 paragraphs to make it easier to understand

Answer 1

Instead of eliminating the background and using JS, there is an HTML solution.

Combine the images into one image and then <map> to create an “image map” on it. This means creating <area> tags to identify areas that can be clicked, and each area (each image) can set different JS event listeners.

For a better idea of ​​how to use it, see the example that w3schools provides (this is very simple, you can create much more complex ones with other tools):

 <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm"> </map> 

There are also many tools for creating image maps (so you do not need to find the coordinates and record them manually), for example https://www.image-maps.com/ .

Image cards are a really cool solution to solve this particular problem!

Answer 2

This is the expected behavior of the <img> tags. They always have a rectangular hitbox.

There is a <map> that would provide the behavior you are looking for (after some configuration), but this has long been out of style.

You need to rethink your solution using HTML5 <canvas> or (shudder) Flash.

Hell, you can even use the same image with one onClick handler, which grabs the mouse coordinates from the event parameter (tooltip: e.clientX and e.clientY ) if you feel like you're getting a mess. :)