2017-01-19 2 views
0

У меня есть небольшое изображение с размещением карты изображения. Когда бы ни была нажата область, мне нужно будет изменить непрозрачность только области test2, независимо от того, нажата ли тестовая область test1, test2 или test3. Поскольку я не знаю синтаксиса jquery очень хорошо, я был бы признателен, если бы вы могли сказать мне, как это решить. Спасибо.изменить непрозрачность изображения.map area

<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 Plug-in - 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- give-opacity-on-area-map – 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

Спасибо, но почему-то ничего не делает –