jquery - HTML:更改图像onclick？

Question

我有两个 html 代码:一个是带有黑色图像的表格，另一个是同一张表格，但唯一的区别是图像是橙色的(但唯一改变的是颜色)。

当我点击黑色图片时，我希望它变成橙色并保持橙色。请问，我该怎么做？

这是我的代码中黑色图像所在的部分(Alarm.jpg、Alarm-17.jpg 和其他 Alarm 是按钮):

<tr>
    <td colspan="2">
        <img src="Alarm.jpg" width="153" height="159" alt=""></td>
    <td>
        <img src="Alarm-17.jpg" width="142" height="159" alt=""></td>
    <td>
        <img src="Alarm-18.jpg" width="141" height="159" alt=""></td>
    <td colspan="3">
        <img src="Alarm-19.jpg" width="161" height="159" alt=""></td>
    <td>
        <img src="espacio.gif" width="1" height="159" alt=""></td>
</tr>

这是我其他代码中橙色图像所在的部分:

<tr>
    <td colspan="2">
        <img src="AlarmOrange.jpg" width="153" height="159" alt=""></td>
    <td>
        <img src="AlarmOrange-17.jpg" width="142" height="159" alt=""></td>
    <td>
        <img src="AlarmOrange-18.jpg" width="141" height="159" alt=""></td>
    <td colspan="3">
        <img src="AlarmOrange-19.jpg" width="161" height="159" alt=""></td>
    <td>
        <img src="espacio.gif" width="1" height="159" alt=""></td>
</tr>

我想这就像当我点击一张黑色图片时它应该将图片更改为橙色图片的图片但我不知道该怎么做。

我不太了解 HTML，有人可以帮助我吗？

Answer 1

您可以将事件处理程序附加到您的 <img>元素，以便在单击它们时调用 JavaScript 函数来替换“src”属性，从而生成替换图像。

这是一些示例 HTML

<img width="128" height="128"
src="http://www.neilkolban.com/stackexchange/images/greenButton.png"
onclick="changeColor(event);" />

还有一些示例 JavaScript:

function changeColor(event) {
    $(event.target).attr("src", "http://www.neilkolban.com/stackexchange/images/redButton.png");
}

A jsFiddle也可用。

(根据评论张贴者的建议，从“event.srcElement”更改为“event.target”)。

还需要加载 jQuery 插件才能使其工作。