0

I want my img be clickable for only its non-tansparent area because it blocks images that are behind.For example when I click north France it chooses Germany. How can this be possible? I have something like this and all of the countries are an image on html page.

Here is the image of my website:

enter image description here

callmebob
  • 6,128
  • 5
  • 29
  • 46
Burak
  • 319
  • 5
  • 16
  • You could assign an [imagemap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map) with a polygon `area` to the desired country, then assign click events to that `area` instead of the entire image. – Blazemonger Jan 12 '16 at 19:54

1 Answers1

3

Your image is a JPEG. It has no transparent parts. However, the easiest way to assign different actions to different regions would be to use an image map. I used this online tool to create areas corresponding to France and Germany. You should be able to create areas for all the other countries in just a few minutes.

<map name="Map" id="Map">
 <area alt="" title="" href="#" shape="poly" coords="248,165,275,136,
  316,127,327,117,314,96,321,77,337,68,344,68,336,90,332,97,335,114,
  352,120,373,111,387,125,394,163,361,175,367,193,378,198,368,205,369,
  215,363,214,350,226,323,240,288,238,312,197,274,185"
  onclick="alert('Germany'); return false" />
 <area alt="" title="" href="#" shape="poly" coords="159,199,194,202,
  196,186,202,184,218,192,235,179,236,169,249,167,277,186,314,197,289,
  235,302,239,304,274,292,286,260,281,250,298,222,289,215,291,193,285,
  202,256,196,232,175,216,159,213"
  onclick="alert('France'); return false" />
 <!-- et cetera -->
</map>
<img src="https://i.stack.imgur.com/pGuAF.jpg" alt="" usemap="#Map" />
r3mainer
  • 23,981
  • 3
  • 51
  • 88