画像の操作：
画像のスワップ
主に、<a>Nodeの onmouseoutイベントに設定して画像を切り替えるのに使用する。
指定した画像のファイル名の「_」から拡張子の間を「off」にする。
ロールオーバーのために$imgOver()と併用する。
String1
<img>Nodeのidを指定
String2
ファイル名に _off. 以外を使う場合に指定 (例) filename_now.png
●必須引数 ●オプション引数(省略可能)
記述例
$imgOut('button1')
$imgOut('button1', '_now')
注意点
画像のファイル名には、「_on.拡張子」「_off.拡張子」「_xxx.拡張子」を必ず使用する。
スマホなどのタッチデバイスでは機能しない仕様。(タッチインターフェースにonmouseイベントは無いため)
動作サンプル
細い文字の周囲が透過しているPNG画像のサンプル。
HTML :
<a href="…" onmouseover="$imgOver('btn1')" onmouseout="$imgOut('btn1')"><img id="btn1" src="images/btn_1_off.png" width="250" alt=""></a>
強い塗り色を持ったPNG画像のサンプル。デフォルト状態のファイル名に「_off」以外を使うケース。
HTML :
<a href="…" onmouseover="$imgOver('btn2')" onmouseout="$imgOut('btn2','_selected')"><img id="btn2" src="images/btn_2_selected.png" width="250" alt=""></a>
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。