我有一个包含四个部分的图像映射,本质上我想:
- 点击某个部分后,为所选部分添加颜色轮廓。
- 单击新部分时,从先前选择的部分中删除轮廓,并将颜色轮廓添加到新部分。
这是我试过的:
在我包含的样式 block 中
.act{
outline: purple solid thick;
}
然后,jQuery,
$('area').click(function(){
choice = $(this).attr('alt');
$('#choice').html(choice);
$(this).addClass('act');
});
记住,最后一行会添加类“act”,但不会在单击新部分时删除类。同样,在我看来,$(this).siblings().removeClass('act');应该做那个把戏??? 最后,html,
<div class = "container">
<div class = "row">
<div class = "col-md-8">
<img src="plate1.jpg" width="800" height="618" border="0" usemap="#map" />
<map name="map">
<area shape="rect" coords="58,26,373,274" alt="1" nohref="nohref" />
<area shape="rect" coords="427,28,742,272" alt="2" nohref="nohref" />
<area shape="rect" coords="60,325,380,571" alt="3" nohref="nohref" />
<area shape="rect" coords="426,325,747,571" alt="4" nohref="nohref" />
</map>
</div>
</div>
</div>
感谢大家的贡献。 最好的问候,
最佳答案
也许这对你有帮助。
关于javascript - 单击时向图像映射部分添加颜色轮廓(jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32627735/