点击更改图片答案

【问题标题】：Change image on click点击更改图片
【发布时间】：2012-06-30 09:10:40
【问题描述】：

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

我输入到页面链接的图像 URL（例如通过点击 img）

index.html?type=dog

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

type = httpGetVars["type"]

现在，当我点击 cat 的 img 在哪里时，脚本应该将 cat.png 替换为 dog.png，我以这种方式尝试过。

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

【问题讨论】：

【解决方案1】：

您可以像下面这样定义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，以便您可以看到它正在运行。

【讨论】：

【解决方案2】：

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

给<img> 一个id - 例如foo：

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

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

【讨论】：