透明度を利用したロールオーバー

■使い方

$('#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

■サンプルプレビュー

ロールオーバーサンプル

画像以外でも利用可能

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

文字文字

ダミーエリア