change opacity of image.map area

Question

I have a small image, with image map placement. Whenever area is clicked, I would need to change opacity of test2 area only, no matter if test1, test2 or test3 area is clicked. As I don't know jquery syntax very well, I would appreciate if you could tell me how to solve this. Thank you.

<img src="testing.png" usemap"testing-map" />

<map name="testing-map">

    <area shape="rect" coords="426,274,456,300"  alt="test1" />
    <area shape="rect" coords="456,274,618,300"  alt="test2" />
    <area shape="rect" coords="618,274,678,300"  alt="test3" />

</map>

Jquery:

$('area').on('click', function() {
 --- no idea --- .css('opacity', '0.1');
});

I think there's a Jquery Plug-in - https://github.com/jamietre/ImageMapster — Paulie_D, Jan 19 '17 at 13:23
Possible duplicate - http://stackoverflow.com/questions/8343531/is-it-possible-to-style-a-mouseover-on-an-image-map-using-css — Paulie_D, Jan 19 '17 at 13:24

score 0 · Answer 1 · answered Jan 19 '17 at 13:21

0

$('map area').on('click', function() {
   $('area[alt="test2"]').css('opacity', '0.1');
});

or

$('map area').on('click', function() {
   $('area[alt="test2"]').attr('css', 'opacity:0.1');
});

answered Jan 19 '17 at 13:21

mariobros

859
4
12
31

Thank you, but for some reason it does nothing – Testing man Jan 19 '17 at 13:42
Maybe this will be helpful for you: http://stackoverflow.com/questions/3887953/how-to-give-opacity-on-area-map – mariobros Jan 19 '17 at 13:44

Karthikeyan Vedi · Answer 2 · 2017-01-20T13:09:24.030

0

Try using

$('area[alt=test2]').css({'opacity':'0.1'});

edited Jan 20 '17 at 13:09

answered Jan 19 '17 at 13:21

Karthikeyan Vedi

1,360
1
11
17

Thank you, but for some reason it does nothing – Testing man Jan 19 '17 at 13:42

score 0 · Answer 3 · answered Jan 19 '17 at 13:23

0

 Try this: 

    $('area').on('click', function() {
      $("area[alt=test2]").css('opacity', '0.1');
    });

This will change the opacity of all elements with 'alt' attribute text value equal to "test2".

answered Jan 19 '17 at 13:23

Mayank Nimje

573
4
16

Thank you, but for some reason it does nothing – Testing man Jan 19 '17 at 13:42

change opacity of image.map area

3 Answers3

Linked