Hatena::ブログ(Diary)

KAZUMiX memo

2007-10-17

クロスフェードするロールオーバー処理をお手軽に実装するJavaScript

| クロスフェードするロールオーバー処理をお手軽に実装するJavaScriptを含むブックマーク

2009年6月3日更新
ブラウザの「戻る」でフェード状態が残らないように修正。またリンクになっていなくてもフェードの対象にするようにした。

_rollout → _rollover

マウスカーソルが画像の上に重なったとき、その画像ファイル名の最後が _rollout となっている場合、その _rollout 画像を _rollover にフェードさせるJavaScriptです。

サンプルのロールオーバー用の画像は次のようなファイル名になっています。

menu01_rollout.png最初のメニューの標準画像
menu01_rollover.png最初のメニューのロールオーバー画像
menu02_rollout.png2番目のメニューの標準画像
menu02_rollover.png2番目のメニューのロールオーバー画像
menu03_rollout.png3番目のメニューの標準画像
menu03_rollover.png3番目のメニューのロールオーバー画像

ロールオーバーのためのidやclassの設定は不要。上記のように画像を用意してJavaScriptを読み込むだけです。また、ファイルの拡張子は、標準画像とロールオーバーで同じなら何でもオッケーです。

ダウンロード
rollover2.js

どうぞご利用下さい。(MIT License)

webaweba 2009/07/15 15:48 利用させて頂こうと思い、ダウンロードさせてもらったのですが、気づいた点を書いておきます。勘違いだったらすみません。
このスクリプトをつっこむと、全ての画像の「_rollover」画像を探そうとするようなので、ロールオーバーしたくない画像に、カーソルを画像の左上に当てると、「×印」が出てしまいます。
おそらく_rolloverを探そうとして見つからないという事でしょうか。
差し出がましいですが、改善して頂けたら非常にうれしく思います。

webaweba 2009/07/15 15:50 すいません。
本当に勘違いでした。
名前に_rolloutと書かなければ良いのですね・・・。
どうもすいません。

dobakundobakun 2009/08/07 19:31 ナイスなスクリプト、ありがとうございます。
Shift_JISのページに組み込んだところ最初は上手く動かなかったのですが、javascriptの文字コードをUTF-8に指定してよみこんだところ、うまくいきました。

ゆっけゆっけ 2009/09/24 14:00  IEで印刷しようとすると、ロールオーバーの部分が印刷されません。
 印刷プレビューでは表示されるのですが・・・。
 ファイヤーフォックスでは正常に印刷されます。他のrollover2.js紹介サイトのデモも、ロールオーバー部分のみ印刷されません。

としとし 2010/08/12 00:15 どうしても上手くいかなく質問させてください。
設置後ロールオーバーはするのですがロールオーバーしたときにどうしても画像の周りにボーダーがついてしまいます。
ブラウザはIEとFireFoxです他のSafari、Chrome、operaは尽きません。

カメカメ 2011/10/30 10:59 はじめまして、使いやすいものをありがとうございます。
どうしても解決できない問題で、ulのリスト項目などにした場合、
ul {list-style-type: none;}など指定すると思いますが、
その場合クロームでは、ロールオーバー時にかならり左に_rolloverが画像が表示されるという不具合が現れます。
ul {list-style-type: none;}を消せば解説しますが、ul {list-style-type: none;}を外せないので、なにか解決策があれば教えてください。

シュンシュン 2011/12/13 14:39 とても便利なスクリプトですね。
ありがとうございます。

カメさんと同じく、クロームで不具合が出ましたが、
list-style-type: none;に加え、
list-style-position: inside;
を指定したところ上手くいくようでした。
(※別途、スタイルで必要があれば、list-style-position: outside;を指定しています。)

うまくいくといいですね。

シュンシュン 2011/12/13 14:46 すみません、勘違いで上記の方法で
クロームの表示がうまくいきませんでした。
失礼しました。

yeah-cubeyeah-cube 2012/01/07 09:37 Chromeの問題ですが、透過gifを作ってlist-styleに指定して回避できましたよ。

例)!importantは適宜に。

#header ul{
list-style:url(パス/crome_bugix.gif)!important;
}

JokerJoker 2012/02/08 03:37 firefox10にアップしたところ、rolloverされる時に黒色の画像が表示されるようになりました。お気に入りのjQueryですので、何とか改善方法はないでしょうか?

IEやchromeは正常です。