我如何让我的代码一次显示一个图像

How would I make my code show one image at time?

本文关键字：显示 一次 一个 图像 我的 代码      更新时间：2023-09-26

如何让我的代码一次显示一个图像?

<!DOCTYPE html>
    <html lang ="en">
    <head>
    <title> VIS</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" >
    function showImage(id){
          if(document.getElementById(id).style.visibility =='visible')
             document.getElementById(id).style.visibility = 'hidden';
           else
              document.getElementById(id).style.visibility= 'visible';
        }
    </script>
    </head>
    <body>

    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
              alt="Pumpkins" id="Pum"/>
    <button onclick="showImage('Pum');">Pumpkins</button>
    </div>
    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
              alt="Pumpkins" id="Straw"/>
    <button onclick="showImage('Straw');">Strawberries</button>
    </div>
    <div style="position: relative; visibility: visible;"> 
    <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
              alt="Pumpkins" id="Ras"/>
    <button onclick="showImage('Ras');">Rasberries</button>
    </div>




    </body>
    </html>

我的代码工作得很好，但我希望它一次显示一个图像。当我点击其中一个时，它会隐藏另一个。

用我的代码，可以显示尽可能多的图像和尽可能少的图像。我该怎么做呢，我能发送多个id作为参数吗?

试试:

首先获取所有图像并隐藏它们，如果您希望在加载时显示任何特定的图像，只需忽略该索引。加载后，你可以做你的按钮动作，因为你正在尝试。如果你想隐藏按钮上的可见图像的其余部分，那么只需获取可见图像并隐藏它并显示单击的图像。

     <!DOCTYPE html>
                <html lang ="en">
                <head>
                <title> VIS</title>
                <meta charset="utf-8"/>
                </head>
                <body>
            
            
                <div style="position: relative; visibility: visible;"> 
                <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
                          alt="Pumpkins" id="Pum"/>
                <button onclick="showImage('Pum');">Pumpkins</button>
                </div>
            
                <div style="position: relative; visibility: visible;"> 
                <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
                          alt="Pumpkins" id="Straw"/>
                <button onclick="showImage('Straw');">Strawberries</button>
                </div>
            
                <div style="position: relative; visibility: visible;"> 
                <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437"
                          alt="Pumpkins" id="Ras"/>
                <button onclick="showImage('Ras');">Rasberries</button>
                </div>
                </body>
              <script type="text/javascript" >
              removeVisibility();
                function showImage(id){
                       removeVisibility();
                      if(document.getElementById(id).style.visibility =='hidden')
                         document.getElementById(id).style.visibility = 'visible';
                    }
                 function removeVisibility(){
              var imgs=document.getElementsByTagName('img');//get all the images
              for(var i=0;i< imgs.length;i++){
            	  imgs[i].style.visibility= 'hidden'; //hide them
              }
                          }
                </script>
                </html>

相关文章：