Question

我有两个html代码：一个是带有黑色图像的表，另一个是同一个表，但唯一的区别是图像是橙色的（但唯一改变的是颜色）。

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

这是我的代码中黑色图像的一部分（Alarm.jpg，Alarm-17.jpg，其他闹钟是按钮）：

<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");
}

也可以使用jsFiddle。

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

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

Answer 2

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

HTML：改变图像onclick？

3 个答案: