透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた
以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。
今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。
※追記（09/07/24）若干修正し、2.1にバージョンアップしました。
（今までのでも問題なく動作します。）
ダウンロード
プラグインはjQueryと下記プラグインを一緒に使ってください。
透明度を利用したロールオーバー
これは以前と同じ通常の使い方。マウスが画像の上にのると、画像の色が薄くなるロールオーバー。
■使い方
$('#over1').opOver();
適応させたいセレクタを指定し、opOver()で適応させる。
■サンプルプレビュー
これだけでも十分使えると思われます。画像を複数用意しなくとも、色の濃い画像を用意するだけで画像が変わったような感じになります。
一瞬光ったようなロールオーバー
これは今回よりデフォルトで追加してみたロールオーバーです。
CSS Niteのページでも使われているような、一瞬光って元に戻るロールオーバー。CSS Niteのサイトでは「wink（ウィンク）」なんて名前がついていたロールオーバーです。
■使い方
$('#over2').wink();
winkの使い方は適応させたいセレクタを指定し、そしてwink()をつけるだけ。
■サンプルプレビュー
ピカッとフラッシュがたかれたような動作になっています。
意外と使える場面が多いようなので、デフォルトで入れました。
それぞれのカスタマイズ方法
これら二つは、少しだけユーザー設定を入れてカスタマイズできるようになっています。
今までのでは、スクリプトを変更しなればなりませんでしたが、今回のバージョンでは、セレクタ指定と同時にできるようにしてみました。
以下、カスタマイズ例とサンプルを用意してみました。
薄い状態から濃い状態へのロールオーバー
デフォルトでは、最初は非透明状態で、マウスを乗せることで少し透明をつけるようにしていました。しかし、最初は少し薄く、マウスが乗ったときに色を濃くしたいなんてケースもあると思います。そんな場合は下記のような指定にします。
■使い方
$('#over3').opOver(0.6,1.0);
opOvernの括弧の中で、初期の透明度と、マウスオーバーさせたときの色の濃さを指定することで、透明度の調整をすることができます。
カッコ内の左が初期値で、コンマを挟み、２番目にマウスオーバー時の透明度を指定します。
■サンプルプレビュー
色の変化速度を変える
デフォルトでは、最初は非透明状態で、マウスを乗せることで少し透明をつけるようにしていました。しかし、最初は少し薄く、マウスが乗ったときに色を濃くしたいなんてケースもあると思います。そんな場合は下記のような指定にします。
■使い方
$('#over4').opOver(1.0,0.6,200,500);
opOvernの括弧の中で、初期の透明度と、マウスオーバーさせたときの色の濃さを指定の後で、その変化の速度を変更することができます。
左から３つめの数字がマウスを乗せた時の色の変化時間（1秒=1000）と、マウスが離れたときの変化時間を指定します。
■サンプルプレビュー
1つ目のサンプルと比べてください。速度を変えるだけでも、印象が違うということがわかると思います。
winkの速度を変える
■使い方
$('#over5').wink(200);
opOverの時とは指定の順序が違うので要注意。ここで主に変更するのが、そのwinkの速度だと思われたので、それを頭に持ってきてあります。
デフォルト状態で'slow'が指定されております。これを200とかにすると下記サンプルのようになります。
■サンプルプレビュー
ウィンクというより、カメラのフラッシュ…ストロボみたいな感じになります。
winkの透明度もかえる
■使い方
$('#over6').wink('slow',0.2,1.0);
これも変更することが可能です。初期値は、デフォルトが1.0でマウスが乗った瞬間が0.2になっています。これを、上記例にしてみえると、下記サンプルのようになります。
■サンプルプレビュー
画像以外でも利用可能
セレクタさえ指定すれば、画像でなくてもプラグインを適応することができます。ブロック全体にも、テキスト文字だけにもどちらでも利用可能です。
文字文字
ダミーエリア
プラグインのダウンロード
下記リンクを右クリックし、リンク先を保存で保存してりようしてください。ここのをダイレクトに利用することだけは絶対にないようにお願いいたします。
ライセンスはMITなので自由に使ってください。
何かほかにアイディアがありましたら、それもお伝えしていただけたら嬉しいです。
是非使わせて頂きたくてダウンロード差せて頂きました。
残念な事に上手く設置ができなくてご指導してい頂けますか。
１・jqueryですが1.3/jquery.min.jsでも良いですか？
２・opacity-rollover2.1.jsに記載されているソースを書きたせば良いのでしょうか？
ソースを何処に追加すれば良いか分かりません。
まったくの素人でｊｓの事が分かりませんので、ご指導のほどお願いします。
コメントありがとうございます。ですが、以下は回答しておきますね！
１，jQueryは1.3系でも1.4でも利用できます！
２，header内で、scriptタグを利用し、jQueryとpluginを読み込むようにします。
３，scriptタグに
$(function(){
$('使用したい場所').opOver();
});
などを指定すると利用できます。
jQueryのpluguinの基本的な使い方については、
様々なところで書いておりますので、まずはそこを参考にしてみてください。
解決できました。
画像の入れ替えのロールオーバーのエクフトも
記事に書かれていましたが、このｊｓで使用できますか？
ソース指定で1枚の画像ソースのみで入れ替えができれば、このｊｓのみで多様できるのですが次回カスタマイズする予定がありましたら、検討してください。＾＾
まだ・・使いたいｊｓもありますので、使わせてもらいますね。
今後も宜しくお願いします。
使わせていただきます^^
とても素敵なスクリプトで、設置した時もとてもキレイです。
手軽に実装できてこれから幅が広がりそうです。
ひとつ質問なのですが、画像はpngでは使えないのでしょうか？
なぜかロールオーバー時に1枚目の画像も一緒に見えてしまいます。
(1枚目と2枚目が重なった状態に見えます)
firefoxxと、safariで確認しましたが両方とも同じ状態です。
よろしければご教授ください。
利用して頂き、ありがとうございます！
まず、今回の質問の件はPNGかどうかの問題とは違い、
おそらく使い方もしくは適用のさせ方が影響しているのではないかと考えられます。
サンプルの画像もＰＮＧですし、下記のようなエントリーもあるので、参考までに。
http://h2ham.seesaa.net/article/141330505.html
もし宜しければＨＴＭＬ・ＣＳＳ・ＪＳをどのように書いたのかというのを教えて頂ければ対応方法をお教えできると思います！
「重なった状態」というのがどういう状態か見当がついていないので、現状教えて頂けますでしょうか？
すみません、上記とは別の質問なのですが、
複数の画像に同じ効果を設定したい場合はどうすればよいのでしょうか。
html内にjavaを書いて、効果を付けたい画像にidで指定してあげても、複数の画像ですと、最初の1枚にしか効果が出ません。。。
どのように記述すれば良いのでしょうか。
初心者で大変恐縮ですが、ご教授下さい。
返答が遅くなりすみません。
まず、HTMLのid属性についてですが、一つのidにつき、１ページに１回だけしか使えません。
複数同じidを使っているようでしたら、それはclassにすべきなので、修正してください。
これはjQueryとかというよりも、HTMLのコーディングでの間違いですね。
jQueryでも最初の１枚にしか効果がでない理由も、idは１ページに同じのが存在しないことが前提なので、一つしか適用されていないのです。
つまり今回の適用先も、idではなく、classにしたり、親要素のidを指定して、その中の子要素に適用するようにセレクタを付けるなどで対応できます。
例1： $('.hoge') //class="hoge"に適用
例2： $('img','#hoge') //id="hoge"の中のimgに適用
お返事遅くなり、申し訳ありません。
>複数同じidを使っているようでしたら、
>それはclassにすべきなので、修正してください
既にここから間違っていました…
こちらのソースをじっくり見たり勉強してみて、とても勉強になりました。
もう一度HTMLを見返してみます。
とても素敵なプラグインをどうもありがとうございました！
また、ご丁寧に教えて頂いてとても助かりました。
また何かありましたらよろしくお願い致します。
しかし私の場合、徐々に透過する画像まではいいのですが、
その下にテキストボックスを配置したいる為、
どうしても透過する画像をアルファ0%にしたいのですが、どうすればいいでしょうか？
javascriptをいじるにも無知でよく分からず、すみません。
是非ご教授ください。
是非、使わせていただきないのですが、そこで、大変申し訳ないのですが
質問させてください。
このプラグインで、同じページにリンクは出来ますが
別ページにリンクさせる方法が、どうしてもわかりません。
素人ですので、やり方を是非、教えていただきたいです。
よろしくお願いいたします。
同じページにリンクということは<a href="#◯◯">リンク</a>みたいになっているのかと思われます。
リンクしたいページをhrefの中に設定してください。
今回pngで適用させていただいたのですが、
プラグインを使うと、IE6、IE7での透過に使っている
いわゆる「iepngfix」が効かなくなってしまいます…。
何か対応策有りましたらご伝授ください。
よろしくお願いいたします。
色々苦労しましたが（５時間くらい）
実装することができました。
ありがとうございました
2010/3/30のＳＡＫＩさんへのご回答で・・・
例1： $('.hoge') //class="hoge"に適用
例2： $('img','#hoge') //id="hoge"の中のimgに適用
とあったのですが・・・
具体的にどの部分にどのように記述したらよいかわからないのですが？
よろしくお願いいたします。
便利なjQueryなので、解決策はありますでしょうか。
よろしくお願いいたします。