Image in the way of clicking element

user_5397352 0
Viewed 42

I am making a clickable map with some pieces that stand out. See image below.

the map

The map is a SVG code with a background (dark map), every map piece in color (image) and a red overlay (path). A simple version of the format is this:

<image src="background" />

<image class="overlay" src="piece1" />
<path class="wijk"></path>

<image class="overlay" src="piece2" />
<path class="wijk"></path>

<image class="overlay" src="piece3" />
<path class="wijk"></path>

<image class="overlay" src="piece4" />
<path class="wijk"></path>

What I want is every time you click on an .wijk element it will show and but if you click on another one that one will show and the other will hide again. This is my Jquery code:

$(document).ready(function () {
    $(".wijk").fadeTo(1,0);
    $('.wijk').click(function() {
        $('.wijk').not(this).each(function(){
            $(this).fadeTo(1,0);
        });
        $(this).fadeTo(1,0.3);
    });
});

The problem here is that the img elements are making it imposible to click the right element. They are in front of it. I tried to specify the z-index but that didn't help.

At this point some of the map pieces work properly and others I have to click in one specific spot for them to work.

Please help!

svg css html jquery javascript
1 Answers

You can set the pointer-events CSS property to none on the images you don't want to be clickable. This will allow the clicks to effectively "pass through" to the elements behind them.

svg image.overlay {
  pointer-events: none;
}
user_53517210
Related