JavaScript更改圖像的來源

我試圖通過JavaScript替換圖像。我現在所擁有的是這樣的HTML：JavaScript更改圖像的來源

<div class="col-md-4 " id="demo3"> 
    <input type="image" src="intro.jpg" width="600px" onclick="gamepaper();" /> 
</div>

和這個JavaScript：

document.write("<input type='image' src='intro-win.jpg' width='600px' />");

現在的問題是，這個形象現在是一個新的頁面上，並不會取代舊的圖像。

我曾經想過做這樣的函數之一：

function changeSource() { 
    var image = document.querySelectorAll("img")[0]; 
    var source = image.src = image.src.replace("placeholder.png","01.png"); 
};

但這並沒有工作過。

來源

2015-12-01 maracuja-juice

試一下。 $（「demo3 input」）。attr（'src'，01.png）; –

只是出於好奇，爲什麼一個圖像的輸入元素？ – KarelG

因爲它也是一個按鈕。但是你是對的，在更換圖像後，它不應該是一個按鈕了。 –

您需要使用input標籤：

function changeSource() { 
    var image = document.querySelectorAll("input")[0]; 
    var source = image.src = image.src.replace("placeholder.png","01.png"); 
};

但更好的方法是添加一個ID和目標是：

document.write("<input type='image' src='intro-win.jpg' width='600px' id='MyImg' />"); 

function changeSource() { 
    var source = MyImg.src = MyImg.src.replace("placeholder.png","01.png"); 
};

來源

2015-12-01 13:18:26

只要給一個ID您的圖像，然後使用該ID在document.ready函數上，像這樣改變源代碼。

<div class="col-md-4 " id="demo3"> 
    <input id="myImage" type="image" src="intro.jpg" width="600px" onclick="gamepaper();" /> 
</div>

下頁

$(document).ready(function() { 
    $('#myImage').attr("src", "myOtherSource.jpg"); 
});

來源

2015-12-01 13:27:55 Jaswinder

jQuery！= JavaScript –

你使用你的HTML input type image，但在你的js您正在尋找img。這應該如下所示：

var image = document.querySelectorAll("input[type=image]")[0];

來源

2015-12-01 13:50:29 Azim

JavaScript更改圖像的來源

回答

相關問題