用onlick一次更改單獨的圖像

我已經編碼了大約兩個星期。我目前正嘗試使用JavaScript來生成一個包含多個圖像文件的頁面，當我單擊它們時，我想分別單獨更改這些圖像文件。我可以用最好的方式來描述它，如果你可以想象一組撲克牌面朝下，並且我希望能夠點擊每一張撲克牌並將它變成另一張圖片，並且能夠再次點擊以更換回來。用onlick一次更改單獨的圖像

請參閱我迄今爲止已完成的JavaScript和代碼。該腳本適用於我的第一張圖片，但不適用於任何其他圖片。任何幫助將不勝感激。

HTML：

<img id="imgOne" onclick="changeImageOne()" src="click_here.png" height="100" width="100"> 
<img id="imgTwo" onlick="changeImageTwo()" src="click_here.png" height="100" width="100">

的JavaScript：

var changeImageOne = function() { 
    var imageOne = document.getElementById('imgOne'); 
    if (imageOne.src.match("i.jpg")) { 
    imageOne.src = "click_here.png"; 
    } else { 
    imageOne.src = "i.jpg"; 
    } 
} 
var changeImageTwo = function() { 
    var imageTwo = document.getElementById('imgTwo'); 
    if (imageTwo.src.match("l.jpg")) { 
    imageTwo.src = "click_here.png"; 
    } else { 
    imageTwo.src = "l.jpg"; 
    } 
}

來源

2016-06-14 PJ Gannon

錯字@onlick，它是onclick

var changeImageOne = function() { 
 
    var imageOne = document.getElementById('imgOne'); 
 
    if (imageOne.src.match("i.jpg")) { 
 
    imageOne.src = "click_here.png"; 
 
    } else { 
 
    imageOne.src = "i.jpg"; 
 
    } 
 
    alert(imageOne.src); 
 
} 
 
var changeImageTwo = function() { 
 
    var imageTwo = document.getElementById('imgTwo'); 
 
    if (imageTwo.src.match("l.jpg")) { 
 
    imageTwo.src = "click_here.png"; 
 
    } else { 
 
    imageTwo.src = "l.jpg"; 
 
    } 
 
    alert(imageTwo.src); 
 
}

<img id="imgOne" onclick="changeImageOne()" src="click_here.png" height="100" width="100"> 
 
<img id="imgTwo" onclick="changeImageTwo()" src="click_here.png" height="100" width="100">

來源

2016-06-14 08:53:36 Rayon

Arrghh。非常感謝！希望我在浪費了兩個小時之前就問過js！ –

@PJGannon我很高興它幫助隊友！ _快樂編碼_ – Rayon

的JavaScript：

<script> 
function SWAPImage(idv,oldimg,newimg){ 
    document.getElementById(idv).attributes.src.value=newimg; 
    document.getElementById(idv).attributes["alt-src"].value = oldimg; 
} 
</script>

HTML：

<img class="image" src="a.jpg" alt-src="a_other.jpg" id="img1" onClick="SWAPImage(this.id,this.attributes.src.value,this.attributes['alt-src'].value)" /> 
<img class="image" src="b.jpg" alt-src="b_other.jpg" id="img2" onClick="SWAPImage(this.id,this.attributes.src.value,this.attributes['alt-src'].value)" /> 
<img class="image" src="c.jpg" alt-src="c_other.jpg" id="img3" onClick="SWAPImage(this.id,this.attributes.src.value,this.attributes['alt-src'].value)" />

我用ALT-src屬性來存儲它。當與任何image.It交換SRC點擊其他圖片ALT-SRC。

來源

2016-06-14 09:07:26

用onlick一次更改單獨的圖像

回答

相關問題