ImgHover

semooh作。
ImgHoverは、画像にマウスが乗った際の切り替え動作を実装します。
単純な画像の切り替えに加え、フェード効果を付けることも可能です。

imghover-1.1rc
jQuery Plugin

imgタグに

jg="imghover"

を記述することで、画像の切り替えが行われます。

<img src="/jglycy/img/muuu_01.gif" width="200" height="200" jg="imghover" />

切り替わる画像のデフォルト設定は、末尾に”_o”がついたファイルです。
上記の例であれば、muuu_01.gifはマウスが乗った際にmuuu_01_o.gifと切り替えられます。 こういったsafixやprefix、あるいは切り替える画像を直接指定するようなことは、全てオプションで可能です。

image属性を持つinput要素にも対応しました。

<form><input type="image" src="/jglycy/img/muuu_02.gif" width="200" height="200" jg="imghover" /></form>

imghoverをdivなどのimg以外のタグに指定した場合、そのタグの中に含まれる全てのimg画像に対して効果を設定します。

<div jg="imghover">
  <a href="#"><img src="/jglycy/img/muuu_01.gif" width="200" height="200" /></a>
  <a href="#"><img src="/jglycy/img/muuu_02.gif" width="200" height="200" /></a>
  <form><input type="image" src="/jglycy/img/muuu_03.gif" width="200" height="200" /></form>
</div>

まとめて指定する場合、要素中の画像でもHover状態になるのは以下のいずれかの場合のみです。

• aタグで囲まれたimg要素
• image属性を持つinput要素

これ以外の画像も全てHoverにしたい場合、btnOnlyオプションをfalseにして下さい。

切り替える画像を、prefixで設定します。
このオプションは例えば、'hover/'のように指定して他のパスに入った同名の画像を用いる場合などに便利です。

デフォルトでは値は設定されていません。

切り替える画像を、suffixで設定します。
例えば元の画像名が'muuu_01.gif'で'_hover'と設定した場合、切り替える画像名は'muuu_01_hover.gif'となります。

デフォルトは'_o'です。

切り替える画像の名前を直接指定します。
直接指定した場合、画像名はフルパスで必要なことに注意して下さい。
srcオプションとprefix/suffixオプションが同時に指定された場合、srcオプションが優先されます。

div要素などにimghoverを設定した場合に、要素内の全ての画像ではなく、以下のいずれかの条件を満たすもののみHover状態にします。

• aタグで囲まれたimg要素
• image属性を持つinput要素

全ての画像要素をHoverにしたい場合は、btnOnlyをfalseに設定して下さい。

デフォルトの値はtrueです。

fadeオプションを指定することで、画像の切り替えを滑らかにすることが出来ます。

<img src="/jglycy/img/muuu_03.gif" width="200" height="200" jg="imghover" jg:imghover="fade:true" />

デフォルトはfalseです。

フェード効果の速度を設定します。値が大きいほど、ゆっくりと切り替わるようになります。
このオプションは、fadeにゼロより大きな値が入っている場合のみ有効です。

<img src="/jglycy/img/muuu_01.gif" width="200" height="200" jg="imghover"
  jg:imghover="fade:true,src:'/jglycy/img/muuu_02.gif',fadeSpeed:1500" />

デフォルトの値は500です。