如何切换图像

How to toggle images

本文关键字：图像 何切换      更新时间：2023-09-26

我是一个编程傻瓜，

所有我需要的是能够切换两个图像，其中一个作为一个按钮的'向上状态'，然后'onclick'第二个图像出现并保持，直到它再次被点击，由此它被'向上图像'取代。

请不要嘲笑我这个可怜的失败的尝试。这是我的代码。

function change() {
   if (window.document.pic.src == "imgd1.svg"){
       window.document.pic.src ="imgd1over.svg";
   }
   else if(window.document.pic.src == "imgd1over.svg"){
       window.document.pic.src ="imgd1.svg";
   }
   <img src ="imgd1.svg" name ="pic" id = "test" onclick ="change()"/>

衷心感谢。

查看此演示

function change(image) {
   if (image.src.indexOf("imgd1.svg") > -1){
       image.src ="imgd1over.svg";
   }
   else{
       image.src ="imgd1.svg";
   }
}

在此示例中，image.src不仅是图像的名称，而且是完整的url: http://fiddle.jshell.net/_display/imgd1.svg。所以我用indexOf()来检查图像的源是否包含你想要的字符串。

此外，我已经改变了change()函数引用图像的方式:

 <img src ="imgd1.svg" name ="pic" id = "test" onclick ="change(this)"/>

使用change(this)将把自己的图像设置为事件的第一个参数，所以你不需要在window对象或getElementById事件中获取它。

function change() {
    var image = document.getElementById("test");
    if (image.src.indexOf("imgd1.svg") > -1 ){
        image.src = "imgd1over.svg";
    }
    else if(image.src.indexOf("imgd1over.svg") > -1 ){
        image.src = "imgd1.svg";
    }
}

工作代码:

<img src ="imgd1.svg" name="pic" onclick="change();"/>
<script>
    function change() {
       if (window.document.pic.src == "imgd1.svg"){
           window.document.pic.src ="imgd1over.svg";
       }
       else if(window.document.pic.src == "imgd1over.svg"){
           window.document.pic.src ="imgd1.svg";
       }
    }
<script>

查看完整的演示:http://jsfiddle.net/jswsze5q/

试试这个:

<script>
   function change() {
       var img1 = "imgd1.svg",
           img2 = "imgd1over.svg";
       var imgElement = document.getElementById('test');       
       imgElement.src = (imgElement.src === img1)? img2 : img1;
    }
</script>
<img src="imgd1.svg" id="test" onclick="change();"/>

例子:jsfiddle

尝试使用Jquery

var flag = 0;
function change(){
  if(flag){
    $("#img").attr("src","img1.png");
    flag = 0;
  }
  else{
    $("#img").attr("src","img2.png");
    flag = 1;
  }
}

最简单的切换选项其中变量flag作为检测哪个图像是活跃的标志img为图像控制的id。

代码包括Jquery从谷歌CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
相关文章：