【至急】クリッカブルマップでリンクがない箇所を半透明マスクにしたい(透明度50%程度)

タイトルの通りです。
以下の①②コードではマスクはかかりませんでした。当たり前ですが、③は全面に半透明マスクがかかります。
IE10, Chrome, firefoxで確認しました。

■style
.mask { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; }

■body①
<img src='xxx.png' usemap='#ImageMap' alt='' />
<map>
<area class='mask' shape='rect' coords='10,10,20,20' />
<area class='nomask' shape='rect' coords='20,20,30,30' href='index.html' alt='xxx' />
;

■body②
<img src='xxx.png' usemap='#ImageMap' alt='' />
<map>
<div class='mask'>
<area shape='rect' coords='10,10,20,20' />
</div>
<area shape='rect' coords='20,20,30,30' href='index.html' alt='xxx' />
;

■body③
<div class='mask'>
<img src='xxx.png' usemap='#ImageMap' alt='' />
<map>
<area shape='rect' coords='10,10,20,20' />
<area shape='rect' coords='20,20,30,30' href='index.html' alt='xxx' />
;
</map>
</div>

area要素にstyleを直接記載してもマスクはかかりません。
いろいろ調べてみましたが、どうしてもわからず困っております。
図の差し替え方法は不可としますが、javascriptの使用は可能です。

申し訳ありませんが、どうぞよろしくお願いします。