画像の操作：

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

主に、<a>Nodeの onmouseoutイベントに設定して画像を切り替えるのに使用する。
$imgOverFade()で重ねた画像を徐々に透明にする。(透明にした後も画像は残っている)
フェイドインのために$imgOverFade()と併用する。

String
<img>Nodeのidを指定
Bool
元画像を透過 true = 透過させる ・ false = 透過させない ／ 省略した場合は true となる
●必須引数 ●オプション引数(省略可能)

記述例

$imgOutFade('button1')
$imgOutFade('button1', false)

注意点

元画像の透過指示をする場合には、$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コードなどは省略して提示している。