2007-10-17
クロスフェードするロールオーバー処理をお手軽に実装するJavaScript
PC |
- 2009年6月3日更新
- ブラウザの「戻る」でフェード状態が残らないように修正。またリンクになっていなくてもフェードの対象にするようにした。

マウスカーソルが画像の上に重なったとき、その画像ファイル名の最後が _rollout となっている場合、その _rollout 画像を _rollover にフェードさせるJavaScriptです。
サンプルのロールオーバー用の画像は次のようなファイル名になっています。
| menu01_rollout.png | 最初のメニューの標準画像 |
|---|---|
| menu01_rollover.png | 最初のメニューのロールオーバー画像 |
| menu02_rollout.png | 2番目のメニューの標準画像 |
| menu02_rollover.png | 2番目のメニューのロールオーバー画像 |
| menu03_rollout.png | 3番目のメニューの標準画像 |
| menu03_rollover.png | 3番目のメニューのロールオーバー画像 |
ロールオーバーのためのidやclassの設定は不要。上記のように画像を用意してJavaScriptを読み込むだけです。また、ファイルの拡張子は、標準画像とロールオーバーで同じなら何でもオッケーです。
- ダウンロード
- rollover2.js
どうぞご利用下さい。(MIT License)
トラックバック - http://d.hatena.ne.jp/KAZUMiX/20071017/rollover2

このスクリプトをつっこむと、全ての画像の「_rollover」画像を探そうとするようなので、ロールオーバーしたくない画像に、カーソルを画像の左上に当てると、「×印」が出てしまいます。
おそらく_rolloverを探そうとして見つからないという事でしょうか。
差し出がましいですが、改善して頂けたら非常にうれしく思います。
本当に勘違いでした。
名前に_rolloutと書かなければ良いのですね・・・。
どうもすいません。
Shift_JISのページに組み込んだところ最初は上手く動かなかったのですが、javascriptの文字コードをUTF-8に指定してよみこんだところ、うまくいきました。
印刷プレビューでは表示されるのですが・・・。
ファイヤーフォックスでは正常に印刷されます。他のrollover2.js紹介サイトのデモも、ロールオーバー部分のみ印刷されません。
設置後ロールオーバーはするのですがロールオーバーしたときにどうしても画像の周りにボーダーがついてしまいます。
ブラウザはIEとFireFoxです他のSafari、Chrome、operaは尽きません。
どうしても解決できない問題で、ulのリスト項目などにした場合、
ul {list-style-type: none;}など指定すると思いますが、
その場合クロームでは、ロールオーバー時にかならり左に_rolloverが画像が表示されるという不具合が現れます。
ul {list-style-type: none;}を消せば解説しますが、ul {list-style-type: none;}を外せないので、なにか解決策があれば教えてください。
ありがとうございます。
カメさんと同じく、クロームで不具合が出ましたが、
list-style-type: none;に加え、
list-style-position: inside;
を指定したところ上手くいくようでした。
(※別途、スタイルで必要があれば、list-style-position: outside;を指定しています。)
うまくいくといいですね。
クロームの表示がうまくいきませんでした。
失礼しました。
例)!importantは適宜に。
#header ul{
list-style:url(パス/crome_bugix.gif)!important;
}
IEやchromeは正常です。