のっけからアレなタイトルで恐縮でございますが。どうぞ皆々様最後までお付き合いいただきたく申し上げ候。
えっと………
ロールオーバーとかいう類の技術がございます。画像とか文字とかの上にポインティングデバイスが通過すると画像が変わったり文字の色が変わったり背景色が変わったりするっていうアレでございます。
旧来はJavaScriptあたりでOnMouseOverイベントを拾ったりしてごにょごにょしていたのですが。
それがCSSで再現できるようになったんです凄いですねぇ。………で片付きゃここに書いたりしませんって。
何はともあれ。サンプルが書いてあるPageをいくつか取り上げて見ましょう。
http://www.mushline.com/junky/2003/111523.shtml
http://zyco.abz.jp/design/index11.shtml
http://www.masahiko.info/blog/archives/000793.html
http://www.stylish-style.com/csstec/basic/l-rollover5.html
http://www.stylish-style.com/csstec/basic/l-rollover6.html
問題点をいくつか取り上げてみたいかと思います。
1.いいからFORMでつかうんじゃねぇ
Aエレメントで記述できる範囲ならいざ知らず。ロールオーバを「FORMのsubmitで」使いたがるシーンというのが、いや実際に出てきたわけですよ業務で。
なんですかロールオーバのために、普通ならINPUT type=image"で片付くところを「Aエレメントで記述＆CSSでギミック＆onClickイベント拾ってJavaScriptでsubmitする」ってあなた正気ですか？
まぁサイトポリシー次第なのでしょうが…私ならマイクロセック単位でNG出します。
2.ちょっとあんまりにもトリッキーなんでないがい？
Aエレメントに会話を限定いたします。これが「a と a:hover とで、urlの内容を変える」んなら、特に文句もございません。多分、JavaScriptよりもスムーズ……だと思うです多分。ちょっと微妙ですが。
が。
上述のURLはいずれも「onMouseの画像とoffMouseの画像をくっつけて１枚」にしてるです。モノによってはさらに「Clickedの画像」までくっつけてたり、あまつさえ「複数のボタン画像を全部くっつけて１枚にしていたり」。
で、CSSの記述とか使って「作画領域を限定することで画像の見方を変えている」です。
一応、デザイナたちの言によれば
- 画像ファイルの数が減って管理しやすい
- 画像が切り替わるまでのタイムラグを無くす事が出来る(ロールオーバ時にカーソル砂時計が出ない)
- JavaScriptが減るのでファイルサイズが減少する
などのメリットがあるとか。
いやまぁわからんではないのですが。２番に関しては、思うところも多々あるのですがまだ許容できないでもないのですが多分或いは。
１番に関しては…ちょっと………。
CSSについてお勉強をされているのはよろしいと思うのですが。が…デザイナと技術者の間の深い溝を感じてしまう瞬間ではあります(苦笑
実際、技術系ではまったくひっかからなかったしなぁ。
このあたり、また別項でじっくり検討してみたいところです。
