クリッカブルマップのタップした場所をハイライト

クリッカブルマップ（クライアントサイドイメージマップ）の質問です。

Android 4 Chromeにて、クリッカブルマップでタップしたareaがハイライトしません。
iPhone対策のontouchstartなど試しましたがだめ。
<area>にonclickでthis.style.borderを変えても反応せず。
cssでarea:activeなどしてみてもダメ。
よく考えたらクリッカブルマップはPCでもハイライトしないですよね。

ちなみにAndroid 4 ブラウザではハイライトしてくれます。
いい技はないでしょうか？

サンプルはこちらです。お手元のスマホでお試しください。
http://mattstow.com/experiment/responsive-image- …

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/10/24 11:31

mapでの座標指定は利用することができません。

もっとも良いのは、mapではなくスタイルシートで矩形領域を指定して、色がわかる部分だけ色を変えた背景に置き換えることです。
[例]日本地図で東京都に合わせると東京都の色が変わる方法
1) 通常のナビゲーションリストを作成します。
2) リンク(A要素)をスタイルシートで(sttic以外の)地図上にabsoluteで配置します。
3) 矩形領域にも地図と同じ背景を位置を指定して配置します。
　（外見上は同じに見えます。）
4) その矩形領域にマウスオンすると、東京都部分だけ色の変わった地図に変更されます。

　テキストブラウザやスクリーンリーダー、パソコンは無論、検索エンジンにも利用できる方法としたらこの方法が良いでしょう。ただしあまり複雑な図形には向きません。

　スマホ限定でしたら、canvasを利用する方法が良いでしょう。これは人にアドバイスできるほど詳しくないのでご勘弁を