2017-01-19 1 views
0

이미지 맵 배치가있는 작은 이미지가 있습니다. 영역을 클릭 할 때마다 test1, test2 또는 test3 영역을 클릭했는지에 관계없이 test2 영역의 불투명도 만 변경해야합니다. jquery 구문을 잘 알지 못하기 때문에이 문제를 해결할 수있는 방법을 알려 주시면 감사하겠습니다. 고맙습니다.image.map 영역의 불투명도 변경

<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'); 
}); 
+0

Jquery 플러그인이 있다고 생각합니다. - https://github.com/jamietre/ImageMapster –

+0

가능한 중복 - http://stackoverflow.com/questions/8343531/is-it-possible-to-style-a -mouseover-on-an-image-map-using-css –

답변

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

또는

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

고마워요,하지만 웬일인지 아무것도하지 않습니다 –

+0

아마 이것은 당신에게 도움이 될 것입니다 : http://stackoverflow.com/questions/3887953/how-to- 불투명 한 지역지도 – mariobros

0

사용하십시오

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

고마워요,하지만 웬일인지 아무것도하지 않습니다 –

0
Try this: 

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

'alt'속성 텍스트 값이 "test2"인 모든 요소의 불투명도가 변경됩니다.

+0

고마워요,하지만 웬일인지 그것은 아무것도하지 않습니다 –