javascript - クリックで画像変更

Question

テーブルがあり、クリックしたときに画像を変更したいのですが、<td>以前に決定した画像のURLである必要があります。

ページのリンクに入力した画像のその URL (たとえば、img をクリック)

index.html?type=dog

次に、スクリプトはリンクから変数を読み取ります。スクリプトに変数を作成します。

type = httpGetVars["type"]

猫のimgの場所をクリックすると、スクリプトは猫の.pngを犬の.pngに置き換える必要があり、この方法で試しました。

<img src="cat.png" onClick="document.write("<img src=\""+ type + ".png\">);

score 1 · Accepted Answer

img次のように定義できます。

<img src="some_image_url.extension" onclick="switchImage(this)" />

次に、switchImage関数で現在の画像を確認して、別の画像に変更できます。

var switchImage = function(image) {
    if(image.src == dogImage) {
        image.src = catImage;
    } else {
        image.src = dogImage;
    }
};

サンプルフィドルを作成したので、動作を確認できます。

score 1 · Accepted Answer

<img id="foo" src="cat.png />

<img>IDを指定fooします。たとえば、次のようになります。

document.getElementById('foo').src = type +".png";

既存の<img>src を新しいイメージに変更するだけです。

2 に答える 2