今日からJリーグ開幕ですね。
サガン鳥栖はなんとか白星発進でした。
さて、むかしむかしにあったような話題を今更蒸し返す僕ですが、ボタンにマウスオーバーして背景色や画像が変わる、いわゆるロールオーバー。
これはマウスを重ねた時に『あなたは今このページへ行こうとしているよ』と、他のボタンとの差をつけることで、認識させる方法ですよね。
初期の頃はDreamweaverにて画像ボタンの場合はjavascriptを吐き出してくれたので使っていましたが、ここ最近はスタイルシートで書くことが多くなりました。
その理由の一つとしては、テキストでメニューを作ることが増えて、画像ボタンにすることが少なくなったからなんですけどね。
久しぶりに画像ボタンでロールオーバー…ってやってるときに、ふと思ったんです。
『あれ？ロールオーバーってjavascriptに任せるべきか？いやcssか？どっちだ』って。
目次
cssでロールオーバー
テキストナビゲーションの時のロールオーバーは、もうcss使えば簡単ですよね。
テキスト色とか背景色とか変えるだけなんで。
画像の場合はどうします？
僕はボタンにマウスオーバーしたら、そのボタン画像を透過させて背景画像を表示する方法をよく取ります。
#nav-global {
margin: 0;
padding: 0;
list-style-type: none;
background: url(bg_nav.png) no-repeat left top;
}
#nav-global li {
float: left;
}
#nav-global li:hover img {
opacity: 0;
}
簡単にかくとこんな感じです。
javascriptでロールオーバー
では、javascriptでロールオーバーする時を考えてみます。
例によってjQuery使う前提です。
$(function(){
$('#nav-global li img').on(hover, function(){
$(this).attr('src', $(this).attr('src').replace('_off', '_on'));
});
});
すいません、これテストしてないコードです。
多分、こんなかんじでいけるんじゃないかな。
いわゆる『nav_off.png』というのを『nav_on.png』に置き換えるやり方です。
ロールオーバーは視覚的か機能的か
ここでcssとjavascriptのそれぞれの用途を確認しておくと、cssは装飾的というか視覚的というか、HTMLという文書構造に対して、それを飾る役割になります。
javascriptは、狭い見方になりますが動きの役割になります。
では、ロールオーバーするのは、視覚的なのか、機能的なのか。どちらでしょうか。
判断が難しいところですが、どうも『機能的』な印象が強い気がします。
理由としては、装飾的と言われればそうだけれども、『見た目を整える = 初期表示』なんじゃないかなと。
であれば、ロールオーバーするのは機能的部分、つまりjavascriptが担うべき部分なんじゃないかなと。
まとめ
でも結局のところ、どちらでもいいかな。とは思うんですけどね。（まとまってない…）
cssにもjavascriptにも『hover』あるし（どっちが最初に作られたとか知らないけど）。
例えばJSオフった時に、javascriptでロールオーバーしなかったからって、そうそうサイトの閲覧に支障をきたすような気がしないんですよね。作り方にもよるでしょうけど。
でもjavascriptに任せるとなると、css側の『hover』の用途がなくなる気がしますよね。
ロールオーバーとかで透過度変えるcssも出番なくなるか…
javascriptだと『hover』とか以外にもいろいろあるから…、いや出番とかそういう問題じゃないですけどね。
最近はcssでアニメーションとかもできるようになってきたりして、cssでできることが増えてきた分、javascriptはそういう装飾的っぽい機能的な部分を捨てながら、もっと違う部分で本来担うべき部分でがっつり使う言語になるのかなぁ。と思ったりしています。
あれ、そう考えると今までcssが担うべき部分が担えなかったからjavascriptが手を貸していたけど、そろそろcssも成長してきたからjavascriptが手を引くかな。ってところなのかな…。
なんかそう考えるとスッキリする感じ。
まとめながら結局は『やっぱロールオーバーはcssだな』という結論に落ち着いたっぽいです…
そいぎ～。
