画像の操作：

画像のスワップ：フェイド仕様

主に、<a>Nodeの onmouseoverイベントに設定して画像を切り替えるのに使用する。
指定した画像のファイル名の「_」から拡張子の間を「on」にした画像ファイルを上に重ねて透過でフェイドインさせる。
フェイドアウトのために$imgOutFade()と併用する。

String1
<img>Nodeのidを指定
String2
ファイル名に _on. 以外を使う場合に指定 (例) filename_now.png
Bool
元画像を透過 true = 透過させる ・ false = 透過させない ／ 省略した場合は true となる
●必須引数 ●オプション引数(省略可能)

記述例

$imgOverFade('button1')
$imgOverFade('button1', '_now', false)
◆ 重ねる画像を事前にキャッシュしておく関数
$imgOverFadePrep()
(例) <body onload="$imgOverFadePrep()">

注意点

画像のファイル名には、「_on.拡張子」「_off.拡張子」「_xxx.拡張子」を必ず使用する。

元画像の透過指示をする場合には、$imgOverFade() と $imgOutFade() で同じ指定にしないと動きが不自然になるので注意。

スマホなどのタッチデバイスでは機能しない仕様。(タッチインターフェースにonmouseイベントは無いため)

動作サンプル

細い文字の周囲が透過しているPNG画像のサンプル。

●元画像を透過させる：GOOD

●元画像を透過させない：エッジが美しくない点に注意

HTML : <a href="…" onmouseover="$imgOverFade('btn1a')" onmouseout="$imgOutFade('btn1a')"><img id="btn1a" src="images/btn_1_off.png" width="250" alt=""></a> <a href="…" onmouseover="$imgOverFade('btn1b',false)" onmouseout="$imgOutFade('btn1b',false)"><img id="btn1b" src="images/btn_1_off.png" width="250" alt=""></a>

強い塗り色を持ったPNG画像のサンプル。

●元画像を透過させる：変化の途中でボタン内部の塗り色が薄くなる点に注意

●元画像を透過させない：GOOD

HTML : <a href="…" onmouseover="$imgOverFade('btn2a','_selected')" onmouseout="$imgOutFade('btn2a')"><img id="btn2a" src="images/btn_2_off.png" width="250" alt=""></a> <a href="…" onmouseover="$imgOverFade('btn2b','_selected',false)" onmouseout="$imgOutFade('btn2b',false)"><img id="btn2b" src="images/btn_2_off.png" width="250" alt=""></a>
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。