前回xml宣言文について書きましたが、さらにイロイロ調べてみようと
googleにて『xml宣言』と検索かけたら、前回のエントリが名立たるリファレンスサイトに
混じって1ページ目の上の方に表示されていて、
ヘタな事は書けないなっとビビりまくっているナンバです。
（スタッフブログ恐るべし...罰金制度恐るべし...）

今回は当たり障りなく、自分が今まで通ってきた道（ロールオーバー）の話です。

大昔はドリのビヘイビアとかで
onmouseover="MM_swapImage('Image1','','ホバー画像',1)"
onmouseout="MM_swapImgRestore()"
こんなの使っていましたが、ソースもjavascriptも汚いってワケで

ふた昔前ほどには流行っていたこともありcssにての画像置換を使っていました。
通常時とホバー時を一つの画像にしてcssにて切り替えるモノですね。
/*--html--*/
<ul><li><a href="●" title="●">テキスト</a>></li></ul>
/*--css--*/
ul{text-indent:-4649em; list-style:none;}
li a {width:●●px; height:●●px; background: url(画像) no-repeat;
background-position:left;}
li a:hover{background-position:right;}
こんなヤツ。

んで、それだとcssはonで、背景画像をoffしていると何も表示されないので
ユーザビリティ的にどうなの？って話や、text-indentで枠外にテキストを飛ばすってのは
seo的にどうなの？って話や、ieとかだと一瞬チラつくって事で
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
↑こんなjavascriptを入れたり、親要素の背景に同じ画像を読み込ませたりしましたが
結局javascriptに頼るならってんで
ひと昔前はjavascriptでホバーさせるモノを使っていました。
navi01_on.gif→navi01_off.gif（smartRollover）みたいなヤツ。

でも、出来る事ならjavascriptを使いたくない派な自分としては
現在は、やはりcssにてのロールオーバーを使っています。

ただ上記に挙げたユーザビリティ的にどうなの？
って事で
/*--html--*/
<p><a href="●" title="●"><img src="画像までのパス" alt="●" /></a></p>
/*--css--*/
p{background:url(ホバー時画像) top left no-repeat;}
p a {display:block;}
p a:hover {background-color:transparent;}
p a:hover img {visibility:hidden;}
ってのを使っています。

ソースの書き方にも流行り廃りはあるかも分かりませんが
ドリのビヘイビア
　　　↓
css画像置換
　　　↓
javascriptによるホバー
　　　↓
cssにてホバー時に画像を消して背景画像を表示させる

って感じで現在は落ち着いています。
またより良いモノが出てきたらサクっと移行するのでしょうが...
作業的には面倒なのですが、今現在使っているモノが一番スマートな気がします。

ちなみに、自分は頭の悪いie6用にコンポーネントは使用せざる得ませんが...
プルダウンメニューなどもjavascriptは使用せずcssにて実装しています。
ある意味自己満足なのでしょうが、そうゆう拘りのようなモノが積み重なって
より良いサイト制作に繋がってゆけばイイなぁと思う今日この頃です。