areaタグのマウスオーバー時に枠線

HTML上に
<area href="a.htm" shape="rect" alt="四角形" coords="1,1,2,2">
のように四角で囲んだところをリンクにすることはできますが、
なおかつ、マウスオーバーしたときに、
四角の部分を色の枠線で囲むことは可能でしょうか？

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2012/10/09 23:29

出来ません。

coordsは単に属性値で、サーバーないし内部機構に対して座標を指定するだけです。
shape="rect"でよいなら、通常のナビゲーションでよいのでは?
　普通のリンク<a href="">をブロックにして、画像の上に絶対配置して、:hoverや:active擬似クラスでborderを引く。CSS3のborder-radiusを使うと角丸や円までは対処できるでしょう。:hoverでsolid、:activeでinsetにすればよい。そのとき画像を右下に数ピクセルずらすと良いでしょう。
　複雑な図形であっても、リンクの機能自体はその周囲でよければ、borderつきの画像に置き換えれば・・。

HTML5だとcanvas要素が使えます。ただ、javascriptコードを書かなければならないので結構大変です。