画像の切り替え

　JavaScriptで画像を切り替える、というのを試してみました。*1

• サンプル：画像の切り替え

　2枚の画像を切り替えるというシンプルなのです。

index.html

<input type="button" value="「怒」へ切り替え" 
    onClick="changeImage( document.kido, 'Do.jpg' ); return false;">
</form>
<input type="button" value="「喜」へ切り替え" 
    onClick="changeImage( document.kido, 'Ki.jpg' ); return false;">
</form><BR>
　<BR>
<IMG NAME="kido" SRC="Ki.jpg" BORDER="0"><BR>

• IMGタグのNAMEパラメーターで、そのタグの名前（ここでは"kido"）を付ける。
• そうするとdocument.kidoでそのタグにアクセスできる。

　これをchangeImage()メソッドに渡します。

test.js

/**
    画像を切り替えます。
    @param objName 切り替え先。<img name="xxx"> なら document.xxx を渡せばOK。
    @param imageUrl 画像のURL。
*/
function changeImage( objName, imageUrl )
{
    // objName で渡されたオブジェクトの src パラメーターを
    // imageUrl で置き換えます（結果、画像が変わります）。
    objName.src = imageUrl;
}

　引数objNameで渡された「IMGタグのオブジェクト」のsrcパラメーターを、imageUrlで渡された「画像のURL」で置き換えます。
　すると画像が切り替わります。

　……フィールドに値を入れたら実際に置き換わる、ゆーんは慣れないなぁ。
　C#のアクセサみたいなもんか？　あの、実際にはメソッドが呼ばれるゆー。
　そう思うことにしよう。

　これで画像の切り替えができたから、次はXMLのパーシングかな。

*1:Ajax関係なし。