クリックするとリンク範囲が表示されてしまう落とし穴

Webデザインには、あなたの知らない「落とし穴」がたくさん。大きなものから小さなものまで、それが及ぼす影響はさまざまだ。カンペキだと思っているあなたのサイトも、実はすでに暗い穴の中かも・・・。

　リンクが設定されている個所をクリックすると、リンク範囲が点線で表示されるが、それを非表示にする方法を紹介しよう。

たとえば、画像上にリンクエリアを指定するクリッカブルマップにした際、リンク範囲とイメージに若干のズレがあると違和感を感じるが、非表示にすることでそれが気にならなくなる。クリッカブルマップは、複雑なテーブルを組んだりすることなく画像リンクを設定できるが、クリックした瞬間、リンク指定したエリアが枠として見えてしまう【1】。このようなサイトのイメージを崩す現象は回避したい。

＜head＞?＜/head＞間のクリッカブルマップ指定は【2】の通り。ボディ以下のリンクエリアの記述は【3】の通り。＜a＞タグもしくは＜area＞タグに「onFocus="this.blur()」を記載することで、クリック時にリンクエリアに表示される枠を非表示にすることができる。この方法はInternet Explorer（以下、IE） 6.0で有効である。

解説：横山 剛

（※本文中、及びキャプション内で使用している「＜」、「＞」は、全角になります。ご注意ください。）