作業の覚え書き

Web 制作 Memo

By

インラインJavaScriptでロールオーバー

なるべく更新の手間が省けて、JavaScriptの処理が遅いブラウザに負担をかけないロールオーバーは、画像を読み込む場所に直接JavaScriptを書くことだ、との話を聞いたので試しに実装してみた。

<a href=”index.html”><img src=”01_off.jpg” alt=”Home” onmouseover=”this.src=’01_on.jpg'” onmouseout=”this.src=’01_off.jpg'” onmouseup=”this.src=’01_off.jpg'” onkeyup=”this.src=’01_off.jpg'” /></a>

最後のonmouseupは、タッチ端末などマウスオーバーが動作しない環境でのチラつき(一瞬画像が消える)現象への対策。(そういえばWindows8のタッチパネルでマウスオーバってどうなるんだろう?)
それじゃあマウスオーバー用の画像でいいじゃないかと onkeyup=”this.src=’01_on.jpg としてみたが、一瞬のチラつきが見られたので onmouseup を使い、それだけだとバリデートエラーが出るので onkeyup を併記した。

■ロールオーバーあれこれ

いまやロールオーバーを全く使っていないサイトの方が珍しいように思う。
ロールオーバーの時代の流れとともに流行が変わっていって、CSSNightでも「ロールオーバー今昔物語」と題して、ロールオーバーを実現する手法の変遷について語られたことがあった。

・MM_swapImage
DreamweaverやFireworksで簡単に実装できる MM_swapImage が昔は重宝された。
ただ、この方法はヘッダーにスクリプトを追加した上にを書き込むので、いろいろとめんどくさい。
ちゃんと理解して使わないと、画像だけ削除しちゃってScriptだけが残ったままとなり、無用なエラーを吐き出す。このようなページを今も時々見かける。

・smartRollover.js
_off のついた画像にマウスオーバーすると、同じファイル名の _on 画像に差し替えるしくみ。JSライブラリを読み込み、ファイル名を _on/_off で用意すれば良いだけなので実装は一番簡単である。ただし、ページ内のすべての画像に対して適用されるため、 _on だけあって _off がなかったりすると、マウスオーバーで「×」が出るという残念なことに。

・rollover.js
ロールオーバー用に _o 画像を用意し、ロールオーバーを適用したい画像に class=”imgover” を付加する。
こちらはクラス指定した画像だけに適用されるので若干安心?

・背景画像+テキスト
デザイン性を追求しない文字中心のサイトであれば問題ないが、環境によって見た目が変わる、レイアウト崩れが置きやすいなど面倒が多い。現状まだHTML5+CSS3を安心して使える状況にはないのでWebフォントという訳にもいかない。

・画像置換+ネガティブマージン(-9999px)
これは背景画像の上にCSSを使ってマウスオーバー画像を表示、テキストはネガティブマージンを使って画面の外に置くという、一時期大流行した方法。SEOスパムと判断される恐れもあるという考えから最近では使われなくなった。サイト運営側にすればSEO云々が一番気になるところだが、IEデフォルトで印刷するとメニューが消える、なんらかの理由で画像が表示されなかった場合、リンクの存在がわからなくなることもある、表示されるべきテキストをわざわざCSSで消すというあたり、スマートじゃない。

・CSSで透明度を変更
簡単で環境を選ばないが、リンク画像が全部半透明になるのはちょっと鬱陶しいので、指定した個所だけにしようと思うと その都度CSSに書かないといけなくなる。

・CSSスプライト
最近主流となりつつある方法?チラつきの心配もない。しかし、これもまた背景画像をスプライトして画像置換を使うとなるとSEOスパムとか印刷で出ないとかの問題が出る。

参考
背景画像を使わない方法
CSSスプライトについてあれこれ。

というわけで現段階では様子見かな、CSSスプライト。

個人的にはHTMLコードをシンプルに書きたい派なので smartRollover.js がいいんだけどね。