私はこれを理解することができません...
HTML:
<div class="wrap">
<div>
<a>OOOO</a>
</div>
<img src="./plusminus.png" width="30px" height="30px" alt="PlusMinus" usemap="#plusminus" />
<map name="plusminus">
<area class="plus" shape="poly" coords="8,0,12,0,20,11,15,11,15,18,5,18,5,12,0,12,0,9" alt="Plus" href="#" />
<area class="minus" shape="poly" coords="15,11,26,11,26,16,29,16,29,19,21,29,17,29,11,20,11,18,15,18" alt="Minus" href="#" />
</map>
</div>
<div class="wrap">
<div>
<a>OOOO</a>
</div>
<img src="./plusminus.png" width="30px" height="30px" alt="PlusMinus" usemap="#plusminus" />
<map name="plusminus">
<area class="plus" shape="poly" coords="8,0,12,0,20,11,15,11,15,18,5,18,5,12,0,12,0,9" alt="Plus" href="#" />
<area class="minus" shape="poly" coords="15,11,26,11,26,16,29,16,29,19,21,29,17,29,11,20,11,18,15,18" alt="Minus" href="#" />
</map>
</div>
jQuery:
$(function() { //run when the DOM is ready
$('a').click(function() {
$(this).parent().parent().toggleClass('hilight');
});
$('.plus').click(function() {
$(this).parent().parent().toggleClass('hilight');
});
});
タグはa
必要に応じて機能しますが、イメージ マップをクリックすると、クリックされた div ではなく、一番上の div のみが強調表示されます??