如何使用 HTML 在点击时显示图像？

有时，网页可能包含与该页面内容不相关的图像。这些不寻常的图像是在网页加载时加载的，这会增加加载时间。网页上更多的加载时间可以减少访问者的数量。

在本文中，我们提出了解决此问题的方法。我们将学习如何仅在用户使用 HTML、CSS 和 JavaScript 点击图片时显示图片。

使用 JavaScript更改属性的显示属性：在此方法中，我们将在 < img>中设置显示属性 使用style属性标记。我们必须为图像设置“显示：无”。之后，当用户单击按钮时，我们将调用一个 JavaScript函数，该函数将访问图像以将其显示属性更改为阻塞。

脚步：

• 在 HTML 代码中创建 元素。
• 为 元素添加样式并将显示属性设置为无。
• 创建一个 JavaScript “show()” 可以访问图像并将显示属性更改为block的函数。
• 在 HTML 代码中添加按钮，当用户单击它时调用“show()”函数。

例子：

HTML

 

    
 
        /* Set display to none for image*/
        #image {
            display: none;
        }
    

 

    
        GeeksforGeeks
        Click on the button to see image
 
        
        
    
 
    
        Show Image
    
 
    
        function show() {
 
            /* Access image by id and change
            the display property to block*/
            document.getElementById('image')
                    .style.display = "block";
 
            document.getElementById('btnID')
                    .style.display = "none";
        }
    

 

输出：

使用带有空src属性的标记：显然，使用空src值，用户将无法在网页上看到图像。我们将使用为用户单击按钮而实现的 JavaScript函数设置src属性的值。但是，某些浏览器（例如 Chrome）在使用此方法时不会删除损坏的图像图标。

脚步：

• 创建具有空src属性的 元素。
• 在 JavaScript 中创建“show()”函数，该函数可以获取图像并将图像源链接添加到src属性。
• 添加 HTML 按钮，当用户点击它时调用“show()”函数。

例子：

HTML

 

    
        GeeksforGeeks
        Click on the button to see image
 
        
        
    
 
    
        Show Image
    
 
    
        function show() {
 
            /* Get image and change value
            of src attribute */
            let image = document.getElementById("image");
 
            image.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
 
            document.getElementById("btnID")
                    .style.display = "none";
        }
    

 

输出：

使用引导模式：我们将使用引导模式在单击按钮时显示图像。我们需要将引导 CDN 与 HTML 代码集成以使用它。我们可以将引导 CDN 添加到我们的 HTML 文件中，如下面的示例代码中添加的那样。

脚步：

• 将引导 CDN 添加到 HTML 文件。
• 创建 Bootstrap 模态并将图像添加到模态的主体。
• 创建一个 HTML 按钮以触发模式。

例子：

HTML

   
    

 
  
      GeeksforGeeks
        
     
Click on the button to see image
 
        
    
    
        Show image
    
  
    
    
         
        
            
             
                
                
                    
                
 
                
                    
                        Close
                
                
            
        
    
   
    
    
    
    
    
    
      

 

输出：