单击时更改图像

Change image on click

本文关键字：图像 单击      更新时间：2023-09-26

我有一个表格，我想在单击它时更改其<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'">);

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

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

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

您只需将现有<img> src 更改为新映像即可。

您可以

像下面这样定义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;
    }
};​

我做了一个示例小提琴，所以你可以看到它正在运行。

相关文章：