HTML：改变图片点击？答案

【问题标题】：HTML: changing image onclick?HTML：改变图片点击？
【发布时间】：2014-12-27 04:29:47
【问题描述】：

我有两个 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 不太了解，有人可以帮帮我吗？

【问题讨论】：

这些实际上是图像而不是按钮。
我更新了，谢谢，是的，它们是图像。当我单击黑色图像时，我希望它是橙色图像并保持橙色
你正在改变图像而不是颜色 :) 你需要 javascript 或 jQuery :)
我应该使用什么@BojanPetkovski？你能告诉我一个链接或某事我可以了解如何做到这一点吗？
图片是一样的，只是背景是橙色的吗？然后使图像透明，只需将背景颜色从黑色更改为橙色 :)

标签： jquery html css button colors

【解决方案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");
}

jsFiddle 也可用。

（根据评论海报的建议，从“event.srcElement”更改为“event.target”）。

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

【讨论】：

您的代码仅适用于 IE。 srcElement 仅在 IE 中可用。在所有其他浏览器中，它是目标 :)
@BojanPetkovski 哦……我不同意你的观点，但我在 Chrome 上构建并运行了它……所以看起来 Chrome 也有这个属性。

【解决方案2】：

$(function(){
	$('.imagewrapper').on('click', 'img.black', function(){
		$(this).next('img.orange').fadeIn();
	});
	$('.imagewrapper').on('click', 'img.orange', function(e){
		e.stopPropagation();
		$(this).fadeOut();
	});
});

.imagewrapper{
	position: relative;
}
img.black{
	position: relative;
	z-index: 1;
	background-color: black;
}
img.orange{
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	background-color: orange;
	display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
	<tr>
	    <td colspan="2">
	    	<div class="imagewrapper">
		        <img src="Alarm.jpg" width="153" height="159" alt="" class="black">
		        <img src="AlarmOrange.jpg" width="153" height="159" alt="" class="orange">
		    </div>
	    </td>
	    <td>
	    	<div class="imagewrapper">
		        <img src="Alarm-17.jpg" width="142" height="159" alt="" class="black">
		        <img src="AlarmOrange-17.jpg" width="142" height="159" alt="" class="orange">
		    </div>
	    </td>
	    <td>
	    	<div class="imagewrapper">
		        <img src="Alarm-18.jpg" width="141" height="159" alt="" class="black">
		        <img src="AlarmOrange-18.jpg" width="141" height="159" alt="" class="orange">
		    </div>
	    </td>
	    <td colspan="3">
	    	<div class="imagewrapper">
		        <img src="Alarm-19.jpg" width="161" height="159" alt="" class="black">
		        <img src="AlarmOrange-19.jpg" width="161" height="159" alt="" class="orange">
		    </div>
	    </td>
	    <td>
	        <img src="espacio.gif" width="1" height="159" alt="">
	    </td>
	</tr>
</table>

【讨论】：

【解决方案3】：

这是一个纯 CSS 解决方案的想法。我正在更改background-color，但您可以将background-image 更改为您的图像。

.target {
  display: inline-block;
  background-color: black;
  color: white;
  padding: 4px 8px;
}
.hidden-target {
  display: none;
}
.hidden-target:checked + .target {
  background-color: orange;
}

<table>
  <tr>
    <td>
      <input id="hidden-flag1" type="radio" class="hidden-target">
      <label for="hidden-flag1" class="target">Click</label>
    </td>
    <td>
      <input id="hidden-flag2" type="radio" class="hidden-target">
      <label for="hidden-flag2" class="target">Click</label>
    </td>
    <td>
      <input id="hidden-flag3" type="radio" class="hidden-target">
      <label for="hidden-flag3" class="target">Click</label>
    </td>
    <td>
      <input id="hidden-flag4" type="radio" class="hidden-target">
      <label for="hidden-flag4" class="target">Click</label>
    </td>
  </tr>
</table>

【讨论】：