【至急】クリッカブルマップでリンクがない箇所を半透明マスクにしたい(透明度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の使用は可能です。

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2018/03/28 00:39:10
  • 終了:2018/04/04 00:40:05

回答(0件)

回答はまだありません

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません