点击更改图像

Question

我有一张桌子，当我点击它时，我想在<td>中更改图像，但它必须是我之前确定的图像的网址。

我输入的图片网址到页面的链接（例如点击img）

index.html?type=dog

然后脚本将从链接中读取变量。我将为脚本创建变量。

type = httpGetVars["type"]

现在当我点击img of cat的地方时，脚本应该将 cat .png替换为 dog .png，我就这样尝试了。

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

Answer 1

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

为<img>提供一个ID - foo，例如：

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

您只需将现有的<img> src更改为新图片。

Answer 2

您可以像以下一样定义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;
    }
};​

我已经制作了Sample Fiddle，因此您可以看到它正在运行。