HTML：更改圖片onclick？

Question

我有兩個html代碼：一個是黑色圖像表，另一個是同一張表，但唯一的區別是圖像是橙色的（但唯一改變的是顏色）。

當我點擊一張黑色圖像時，我希望它變成橙色並保持橙色。請，我該怎麼做？

這是我的代碼的一部分，其中黑色圖像（Alarm.jpg，報警-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

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

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

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

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