更改< img>使用javascript标记src [英] changing <img> tag src with javascript

问题描述

我一直在尝试使用javascript更改我制作的网页上的图片。到目前为止，当我点击原始图像时，我的代码不会做任何事情。这是我在html文档中对JS的第一次实验，所以我可以简单地说明我如何使用它。

 < ; h1>标题名称< / h1> 
< div> 
< img alt =alt texttitle ='hover over text'id ='chango'src =images / rsz_josh.jpgonclick =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; 
休息; 
 case img2：
 document.getElementById（chango）。src = img3; 
休息; 
默认值：
 document.getElementById（chango）。src = img1; 
休息; 
}; 
}; 
< / script> 
< / div> 
  

解决方案

原因是文档.getElementById（'chango'）。src 返回图像的绝对URL，而不是相对的。因此，没有任何一个case语句匹配。

解决这个问题的一个想法是将URL拆分为斜线，并比较文件名而不使用任何路径。 b
$ b

编辑：稍微简单一点的方法是使用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; 
} 
  

I have been trying to use javascript to change the image on a webpage I have made. so far my code dosn't do anything at all when I click on the original image. this is my first experiment with JS in a html doc so i could be something simple about how i have to use it.

<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>

解决方案

The reason is that document.getElementById('chango').src returns an absolute URL to the image, not a relative one. Thus none of your case statements match.

An idea for fixing that is to split the URL at the slashes and just compare the filename without any path.

EDIT: A slightly easier way would be to use JavaScript's indexOf to see if the URL contains the string. This assumes none of the image names are substrings of other image names.

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; 
}

这篇关于更改< img>使用javascript标记src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！