用JavaScript更改<img>标签src

changing <img> tag src with javascript

本文关键字：标签 src img JavaScript 更改      更新时间：2023-09-26

我一直在尝试使用javascript来更改我制作的网页上的图像。 到目前为止，当我单击原始图像时，我的代码根本没有做任何事情。 这是我在 HTML 文档中使用 JS 的第一次实验，所以我可以简单了解如何使用它。

<h1>heading name</h1>
<div>
    <img alt="alt text"title='hover over text'id='chango'src="images/rsz_josh.jpg"onclick="changeImage()"/>
    <script language="javascript">
        var changeImage = function(){
            img1="images/rsz_josh.jpg";
            img2="images/rsz_josh2.jpg";
            img3="images/rsz_josh3.jpg";
            switch(document.getElementById('chango').src){
                case img1:
                    document.getElementById("chango").src=img2;
                break;
                case img2:
                    document.getElementById("chango").src=img3;
                break;
                default:
                    document.getElementById("chango").src=img1;
                break;
            };
        };
    </script>
</div>

原因是document.getElementById('chango').src返回图像的绝对 URL，而不是相对 URL。因此，您的案例陈述都不匹配。

解决这个问题的一个想法是在斜杠处拆分 URL，然后只比较没有任何路径的文件名。

编辑：一种稍微简单的方法是使用JavaScript的indexOf来查看URL是否包含字符串。这假定没有一个映像名称是其他映像名称的子字符串。

var changeImage = function(){ 
img1 = "rsz_josh.jpg"; 
img2 = "rsz_josh2.jpg"; 
img3 = "rsz_josh3.jpg"; 
console.log(document.getElementById('chango').src);
imgUrl = document.getElementById('chango').src
if (imgUrl.indexOf(img1) != -1) {
    document.getElementById("chango").src = 'images/' + img2; 
}
else if (imgUrl.indexOf(img2) != -1) {
    document.getElementById("chango").src = 'images/' + img3; 
}
else {
    document.getElementById("chango").src = 'images/' + img1; 
}
相关文章：