ImgHover

ImgHoverは、画像にマウスが乗った際の切り替え動作を実装します。
単純な画像の切り替えに加え、autoimageプラグインと組み合わせることでフェード効果を付けることも可能です。

imghover-1.0rc

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、あるいは切り替える画像を直接指定するようなことは、全てオプションで可能です。

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

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

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

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

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

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

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

fadeに設定する値は、0～100の数値です。100に近づくほど、均等に滑らかに効果が現れます。
値がゼロの場合、効果は一切無くダイレクトに切り替わります。

このオプションを利用するためには、別途autoimageプラグインをロードしておく必要があります。

デフォルトの値はゼロ（効果無し）です。

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

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