画像の操作：
画像のスワップ
主に、<a>Nodeの onmouseoverイベントに設定して画像を切り替えるのに使用する。
指定した画像のファイル名の「_」から拡張子の間を「on」にする。
ロールアウトのために$imgOut()と併用する。
String1
<img>Nodeのidを指定
String2
ファイル名に _on. 以外を使う場合に指定 (例) filename_now.png
●必須引数 ●オプション引数(省略可能)
記述例
$imgOver('button1')
$imgOver('button1', '_now')
◆ スワップ画像を事前にキャッシュしておく関数
$imgOverPrep()
(例) <body onload="$imgOverPrep()">
$imgOverPrep()
(例) <body onload="$imgOverPrep()">
注意点
画像のファイル名には、「_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画像のサンプル。
HTML :
<a href="…" onmouseover="$imgOver('btn2','_selected')" onmouseout="$imgOut('btn2')"><img id="btn2" src="images/btn_2_off.png" width="250" alt=""></a>
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。