如何使用JavaScript更改img src?

cosmichero2025

我知道还有其他类似问题,但我一直尝试关注这些问题,但我不知道自己到底在做什么错。我已声明pic变量已链接到具有相应ID“ pic”的图像,并且尝试了许多不同的示例,并尝试遵循类似这样的其他问题,但无济于事。

-真正的问题----

我希望通过单击按钮将图像的src更改为工作区中的另一个src。

HTML:

<img class="trans" id="pic" src="images/link_rouge.png" alt="" width="1000" height="333" /> 

JavaScript:

var pic = document.getElementById('pic');

function rouge() {
    pic.src = "images/link_rouge.png";
}

function blue() {
    pic.src = "images/link_blue.png";
}

我知道这些功能已经可以使用按钮了,因为它们会影响页面上某些更改颜色的div,唯一不变的就是图像。

人造丝

EventTarget.addEventListener()方法在调用的EventTarget上注册指定的侦听器。

使用addEventListeneroverbutton元素附加click事件,并将您的处理程序函数绑定到这些事件。

var pic = document.getElementById('pic');

function rouge() {
  pic.src = "http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png";
}

function blue() {
  pic.src = "http://bin.smwcentral.net/u/1944/Link%2BBlue%2BTP%2Bshrunk.png";
}
document.getElementById('btn1').addEventListener('click', rouge);
document.getElementById('btn2').addEventListener('click', blue);
img {
  width: 200px;
}
<button id='btn1'>rouge</button>
<button id='btn2'>blue</button>
<br/>
<img class="trans" id="pic" src="http://www.projectvictorycosplay.com/images/zelda/Links/3198_render_link.png" alt="" width="1000" height="333" />

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章