Solution 1 :

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;
}

Problem :

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!

Comments

Comment posted by enxaneta

if you need to use the background image so many times you can clip the image with the corresponding path

Comment posted by Timo Vossen

I’m sorry, I forgot to change the src. I edited the code now. The background is only one time in the code.

By

Leave a Reply

Your email address will not be published. Required fields are marked *