THE HAM MEDIA BLOG

透明度を利用したロールオーバープラグイン「jquery-opacity-rollover.js」を使いやすくしてみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
jquery
plugin
rollover
opacity

opacity rollover

以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。

今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。

※追記(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の括弧の中で、初期の透明度と、マウスオーバーさせたときの色の濃さを指定することで、透明度の調整をすることができます。

カッコ内の左が初期値で、コンマを挟み、2番目にマウスオーバー時の透明度を指定します。

■サンプルプレビュー

ロールオーバーサンプル

色の変化速度を変える

デフォルトでは、最初は非透明状態で、マウスを乗せることで少し透明をつけるようにしていました。しかし、最初は少し薄く、マウスが乗ったときに色を濃くしたいなんてケースもあると思います。そんな場合は下記のような指定にします。

■使い方

$('#over4').opOver(1.0,0.6,200,500);

opOvernの括弧の中で、初期の透明度と、マウスオーバーさせたときの色の濃さを指定の後で、その変化の速度を変更することができます。

左から3つめの数字がマウスを乗せた時の色の変化時間(1秒=1000)と、マウスが離れたときの変化時間を指定します。

■サンプルプレビュー

ロールオーバーサンプル

1つ目のサンプルと比べてください。速度を変えるだけでも、印象が違うということがわかると思います。

winkの速度を変える

■使い方

$('#over5').wink(200);

opOverの時とは指定の順序が違うので要注意。ここで主に変更するのが、そのwinkの速度だと思われたので、それを頭に持ってきてあります。

デフォルト状態で'slow'が指定されております。これを200とかにすると下記サンプルのようになります。

■サンプルプレビュー

ロールオーバーサンプル

ウィンクというより、カメラのフラッシュ…ストロボみたいな感じになります。

winkの透明度もかえる

■使い方

$('#over6').wink('slow',0.2,1.0);

これも変更することが可能です。初期値は、デフォルトが1.0でマウスが乗った瞬間が0.2になっています。これを、上記例にしてみえると、下記サンプルのようになります。

■サンプルプレビュー

ロールオーバーサンプル

画像以外でも利用可能

セレクタさえ指定すれば、画像でなくてもプラグインを適応することができます。ブロック全体にも、テキスト文字だけにもどちらでも利用可能です。

文字文字

ダミーエリア

プラグインのダウンロード

下記リンクを右クリックし、リンク先を保存で保存してりようしてください。ここのをダイレクトに利用することだけは絶対にないようにお願いいたします。

ライセンスはMITなので自由に使ってください。

何かほかにアイディアがありましたら、それもお伝えしていただけたら嬉しいです。

この記事へのコメント
素晴らしいロールオーバーですね。
是非使わせて頂きたくてダウンロード差せて頂きました。
残念な事に上手く設置ができなくてご指導してい頂けますか。

1・jqueryですが1.3/jquery.min.jsでも良いですか?

2・opacity-rollover2.1.jsに記載されているソースを書きたせば良いのでしょうか?

ソースを何処に追加すれば良いか分かりません。

まったくの素人でjsの事が分かりませんので、ご指導のほどお願いします。
Posted by haru at 2010年01月21日
>haruさん
コメントありがとうございます。ですが、以下は回答しておきますね!
1,jQueryは1.3系でも1.4でも利用できます!
2,header内で、scriptタグを利用し、jQueryとpluginを読み込むようにします。
3,scriptタグに
$(function(){
$('使用したい場所').opOver();
});
などを指定すると利用できます。

jQueryのpluguinの基本的な使い方については、
様々なところで書いておりますので、まずはそこを参考にしてみてください。
Posted by ハム at 2010年01月21日
ありがとうございます。

解決できました。

画像の入れ替えのロールオーバーのエクフトも
記事に書かれていましたが、このjsで使用できますか?

ソース指定で1枚の画像ソースのみで入れ替えができれば、このjsのみで多様できるのですが次回カスタマイズする予定がありましたら、検討してください。^^

まだ・・使いたいjsもありますので、使わせてもらいますね。

今後も宜しくお願いします。
Posted by haru at 2010年01月22日
こんにちは。
使わせていただきます^^

とても素敵なスクリプトで、設置した時もとてもキレイです。
手軽に実装できてこれから幅が広がりそうです。

ひとつ質問なのですが、画像はpngでは使えないのでしょうか?
なぜかロールオーバー時に1枚目の画像も一緒に見えてしまいます。
(1枚目と2枚目が重なった状態に見えます)

firefoxxと、safariで確認しましたが両方とも同じ状態です。

よろしければご教授ください。
Posted by SAKI at 2010年03月27日
>SAKIさん
利用して頂き、ありがとうございます!
まず、今回の質問の件はPNGかどうかの問題とは違い、
おそらく使い方もしくは適用のさせ方が影響しているのではないかと考えられます。
サンプルの画像もPNGですし、下記のようなエントリーもあるので、参考までに。
http://h2ham.seesaa.net/article/141330505.html

もし宜しければHTML・CSS・JSをどのように書いたのかというのを教えて頂ければ対応方法をお教えできると思います!
「重なった状態」というのがどういう状態か見当がついていないので、現状教えて頂けますでしょうか?
Posted by ハム at 2010年03月27日
お返事ありがとうございます。
すみません、上記とは別の質問なのですが、
複数の画像に同じ効果を設定したい場合はどうすればよいのでしょうか。

html内にjavaを書いて、効果を付けたい画像にidで指定してあげても、複数の画像ですと、最初の1枚にしか効果が出ません。。。

どのように記述すれば良いのでしょうか。

初心者で大変恐縮ですが、ご教授下さい。
Posted by SAKI at 2010年03月27日
>SAKIさん
返答が遅くなりすみません。
まず、HTMLのid属性についてですが、一つのidにつき、1ページに1回だけしか使えません。
複数同じidを使っているようでしたら、それはclassにすべきなので、修正してください。
これはjQueryとかというよりも、HTMLのコーディングでの間違いですね。

jQueryでも最初の1枚にしか効果がでない理由も、idは1ページに同じのが存在しないことが前提なので、一つしか適用されていないのです。

つまり今回の適用先も、idではなく、classにしたり、親要素のidを指定して、その中の子要素に適用するようにセレクタを付けるなどで対応できます。

例1: $('.hoge') //class="hoge"に適用
例2: $('img','#hoge') //id="hoge"の中のimgに適用
Posted by ハム at 2010年03月30日
お世話様です。
お返事遅くなり、申し訳ありません。

>複数同じidを使っているようでしたら、
>それはclassにすべきなので、修正してください

既にここから間違っていました…

こちらのソースをじっくり見たり勉強してみて、とても勉強になりました。

もう一度HTMLを見返してみます。
とても素敵なプラグインをどうもありがとうございました!
また、ご丁寧に教えて頂いてとても助かりました。
また何かありましたらよろしくお願い致します。
Posted by SAKI at 2010年04月06日
かなり、使いたいロールオーバーに近くて、是非、ご利用したいのです。
しかし私の場合、徐々に透過する画像まではいいのですが、
その下にテキストボックスを配置したいる為、
どうしても透過する画像をアルファ0%にしたいのですが、どうすればいいでしょうか?

javascriptをいじるにも無知でよく分からず、すみません。
是非ご教授ください。
Posted by ペロ at 2011年02月04日
とてもかっこいい、すばらしいプラグインをどうもありがとうございました!
是非、使わせていただきないのですが、そこで、大変申し訳ないのですが
質問させてください。

このプラグインで、同じページにリンクは出来ますが
別ページにリンクさせる方法が、どうしてもわかりません。

素人ですので、やり方を是非、教えていただきたいです。

よろしくお願いいたします。
Posted by 黒田 at 2011年08月16日
>黒田さん
同じページにリンクということは<a href="#◯◯">リンク</a>みたいになっているのかと思われます。
リンクしたいページをhrefの中に設定してください。
Posted by ハム at 2011年08月20日
すばらしいプラグイン、ありがとうございます。
今回pngで適用させていただいたのですが、
プラグインを使うと、IE6、IE7での透過に使っている
いわゆる「iepngfix」が効かなくなってしまいます…。

何か対応策有りましたらご伝授ください。
よろしくお願いいたします。
Posted by mika at 2011年09月29日
初めまして
色々苦労しましたが(5時間くらい)
実装することができました。
ありがとうございました
Posted by corococo at 2011年10月22日
このロールオーバーを設定すると「lightbox」が使えなくなるのですが!・・・私の設定が間違っているのでしょうか?
Posted by fumio at 2012年01月15日
何度もすみません!
2010/3/30のSAKIさんへのご回答で・・・

例1: $('.hoge') //class="hoge"に適用
例2: $('img','#hoge') //id="hoge"の中のimgに適用

とあったのですが・・・
具体的にどの部分にどのように記述したらよいかわからないのですが?
よろしくお願いいたします。
Posted by fumio at 2012年01月15日
firefox10にアップしたところ、画像をクリックすると黒色の画像が表示されるようになりました。他のホームページでも別のjQueryのrolloverを使用しているサイトも軒並みこの現象です。ちなみにIEやchromeは問題ありませんでした。

便利なjQueryなので、解決策はありますでしょうか。
よろしくお願いいたします。
Posted by joke at 2012年02月08日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

半透明を利用したロールオーバー
Excerpt: サイバーガーデンbiz WEBサイト「サイバーガーデンbiz」のロゴの上にマウスオーバーすると、華やかではないけれど、かすかに透明になって上品なロールオーバーをみせる。これはなんだろうか?と、ここ2..
Weblog: WordPress版Clipboard
Tracked: 2009-12-08 23:48

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。