このブログのロゴでも使用してるんだけど、ロールオーバーでフェードするボタンを簡単に実装できるJavaScriptをご紹介します。（スクリプトの名前は不明）
どうやら利用は自由のよう。作者様に大感謝です。
ちょっと追記（2009-04-02）
このスクリプト、どうやら「shift-jis」コードのHTMLでは動作しないようです。
そんなことって常識なんでしょうかね？僕にはわかりません。
とりあえず「UTF-8」と「euc-jp」では動きました。以上、些細な報告でした。
こちらにいただいたコメントによって解決しました！
まだまだ自分は勉強不足だと、改めて実感しました。
コメントをくれた名も無い方、ありがとうございます。
まずはこちら↓から「rollover2.js」をダウンロード。
クロスフェードするロールオーバー処理をお手軽に実装するJavaScript – KAZUMiX memo
次に、ダウンロードしたjsファイルを<head>要素内で読み込む。
<script type="text/javascript" src="../js/rollover2.js"></script>
そして、ロールアウト時・ロールオーバー時の2パターンの画像を用意し、その2つの画像を同じ階層（フォルダ）へアップロード。
このときそれぞれの画像の名前は、必ず「～_rollout.拡張子」「～_rollover.拡張子」にします。
例） 「sample_rollout.jpg」 「sample_rollover.jpg」
最後に、ロールアウト後の「～_rollout.拡張子」の画像をimgタグで貼り付け、それに任意のリンクを貼ります。そして実際にブラウジングしてポインタをオーバーしてみると・・・
↑マウスオーバーしてみて
応用してこんなのも
たったこれだけで、イケてるフェード効果のあるロールオーバーを実装できます。
簡単なので、ロールオーバーが少し寂しい時とかに使ってみては？
2 Comments
コメントありがとうございます。
＞DR先のjsファイルエンコードがUTF-8になってるためで、
＞Shift-JSに保存し直せば普通に使えました。
なるほど、そういうことだったんですね。そんな基本的なことも分かっていなかったなんて、なんとも恥ずかしいです・・・。
勉強になりました。またご意見・アドバイスいただけると嬉しいです。
ありがとうございました！
>>このスクリプト、どうやら「shift-jis」コードのHTMLでは動作しないようです。
DR先のjsファイルエンコードがUTF-8になってるためで、
Shift-JSに保存し直せば普通に使えました。