ロールオーバーなどにおける画像のID指定の落とし穴

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

　JavaScriptで画像をロールオーバーさせるテクニックは、ほとんどのページで使われており、Webページを制作するにあたっては基本的な技術。だが、この簡単な技術でも気をつけないといけないことがある。

異なる画像に同じIDが指定されていると、ロールオーバーで画像を入れ替える命令を入れても、画像が入れ替わらなかったり、思ってもみない部分の画像が入れ替わってしまったりする【1】【2】。

こういったトラブルを防ぐためには、同一ページ内では、ほかの部分で使っていないIDを指定するとよい【3】【4】。またIDだけではなく、name指定も同じようにほかの部分で使っていない名前を指定しよう。ただしラジオボタンのname指定は、同じnameを使っていても別のグループとして認識されるので、同名使用は問題ない。さらに注意する点はID、nameの指定は日本語だと正しく認識されず、命令がきかなくなるのできちんと半角英数文字で指定すること。

Web制作の技術は日々進歩していくが、ここであらためて基本的な技術の落とし穴に落ちないように心がけてWeb制作をしていこう。

解説：横山 剛

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