通過JavaScript更改Img Src
[英]Changing Img Src through JavaScript
問題描述
嗨，我正在嘗試在頁面加載時更改圖庫中的圖像。 我正在嘗試按照此處最常發布的方式進行操作
function changeImg(){
var img1 = document.getElementById("wows1_0");
img1.src = "WOWSlider/data1/images/ContactSupport.jpg";
}
然后在這里打電話
<body onload="changeImg()">
這是我畫廊的代碼
<div id="wowslider-container1" class="grid_7 alignGallery">
<div class="ws_images"><ul>
<li><img src="WOWSlider/data1/images/BookARoom.jpg" alt="full screen slider" title="full screen slider" id="wows1_0"/></li>
<li><img src="WOWSlider/data1/images/ContactSupport.jpg" alt="ContactSupport" title="ContactSupport" id="wows1_1"/></li>
</ul></div>
<div class="ws_thumbs">
<div>
<a href="#wows1_0" title="full screen slider"><img src="WOWSlider/data1/tooltips/bookaroom.jpg" alt="" /></a>
<a href="#wows1_1" title="ContactSupport"><img src="WOWSlider/data1/tooltips/contactsupport.jpg" alt="" /></a>
</div>
</div>
<div class="ws_shadow"></div>
但是每次我調用函數時，圖像都不會改變。
如果有人可以提供任何指導或幫助，我將不勝感激。
3 個解決方案
解決方案1
0 2015-01-28 12:56:46
您需要先預加載圖像：
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"WOWSlider/data1/images/ContactSupport.jpg",
"WOWSlider/data1/images/OtherImage.jpg"
);
解決方案2
0 2015-01-28 12:59:56
首先，刪除主體onLoad。 其次，這應該是您的html腳本：
<body>
<div id="wowslider-container1" class="grid_7 alignGallery">
<div class="ws_images">
<ul>
<li><img src="WOWSlider/data1/images/BookARoom.jpg" alt="full screen slider" title="full screen slider" id="wows1_0"/></li>
<li><img src="WOWSlider/data1/images/ContactSupport.jpg" alt="ContactSupport" title="ContactSupport" id="wows1_1"/></li>
</ul>
</div>
<script type="text/javascript">
changeImg();
</script>
<div class="ws_thumbs">
<div>
<a href="#wows1_0" title="full screen slider"><img src="WOWSlider/data1/tooltips/bookaroom.jpg" alt="" /></a>
<a href="#wows1_1" title="ContactSupport"><img src="WOWSlider/data1/tooltips/contactsupport.jpg" alt="" /></a>
</div>
</div>
<div class="ws_shadow"></div>
</body>
這應該是您的javascript：
function changeImg(){
var img1 = document.getElementById("wows1_0");
img1.src = "WOWSlider/data1/images/ContactSupport.jpg";
}
解決方案3
0 2015-01-28 13:02:56
我會在結束body標簽之前用JavaScript替換onload事件。
您是否正在尋找這樣的東西？
var $img = document.getElementById('yourImg');
var path = 'http://your-new-path-to-image.com';
$img.src = path;
// or
// $img.setAttribute('src', path);
http://codepen.io/codelabr/pen/RNZobB
最好的祝福
Jquery/Javascript 使用 IF/ELSE 語句更改 img SRC
[英]Jquery/Javascript changing img SRC with IF/ELSE statement
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.