Question

我想只使用javascript更改图片而不更改html上的任何内容

这是HTML

<td bgcolor="#2A2A1B" style="width: 128px;" valign="top">
    <img id="ContentPlaceHolder1_imgClanmark" src="../images/clan/clanmark20130211202115640.png" style="height:128px;width:128px;" />
</td>

现在这是我的js

var photo = document.getElementById('ContentPlaceHolder1_imgClanmark');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://i.imgur.com/jztMCqb.png';
photo.src = img.src;

尝试了它并且它不会工作

也使用了这个

function FirstPic()
{
    var pic1 = document.getElementById("ContentPlaceHolder1_imgClanmark"); 
    if (pic1 == typeof('image')) return;
    pic1.src = "http://i.imgur.com/jztMCqb.png";
}

但是我应该再次在html上添加代码

<img onload='FirstPic()' id='ContentPlaceHolder1_imgClanmark' src='http://i.imgur.com/jztMCqb.png' />

有人可以帮我这个吗？

对不起，我还没有更新这个问题这就是我做的事情

-

window.onload = function() {
  var photo = document.getElementById('ContentPlaceHolder1_imgClanmark');
  var img = new Image();
  img.src = 'http://i1203.photobucket.com/albums/bb384/zendesigns/sfdfi/sfdfilogo_zps9302a288.gif';
  img.addEventListener('load', myFunction, false);
  function myFunction() {
   photo.src = img.src;
  }
}

-

感谢Stano

Answer 1

如果这是第一次页面加载，你有没有理由等待onload事件？

document.getElementById('ContentPlaceHolder1_imgClanmark').src = 'http://i.imgur.com/jztMCqb.png';

会改变来源吗？

修改

另一方面，此链接上的图片：http://i.imgur.com/jztMCqb.png无法热链接，并在您尝试链接时返回 403 forbidden ，因此无论你做什么，这张图片都不会出现！

Answer 2

只需更改src：

    $("#ContentPlaceHolder1_imgClanmark").attr("src","pass_here_new_image_source");

如何使用Javascript更改IMG

2 个答案: