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

質問

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

回答No.1

ORUKA1951 · ベストアンサー

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

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