如何创建标签图像库？

要创建标签图片库，您需要使用 HTML、CSS 和 JavaScript。 HTML 将使正文的结构，CSS 将使它看起来不错。这种标签图片库在网站上看起来很有吸引力。通过使用 JavaScript，您可以轻松更改图库中显示的图片。
创建结构：在本节中，我们将为选项卡图片库创建一个基本的网站结构。

• 用于制作结构的 HTML 代码：

html

 

    
    

 

    

        
GeeksforGeeks
         
        
A Computer Science Portal for Geeks
         
Tab Image Gallery
 
    
 
    
    

        

            Here the Photo will be displayed
        
 
        

            
            
            
        
 
        

            
            
             
            
        
    

 

设计结构：在上一节中，我们已经创建了基本网站的结构。在本节中，我们将设计标签图库的结构，然后使用 JavaScript 更改标签图库的图片效果。

• 看起来不错的 CSS 代码结构：

CSS

• 画廊动画的 JavaScript 代码：

javascript

    function gfg(imgs) {
        var expandImg = document.getElementById("expand");
        var imgText = document.getElementById("geeks");
        expandImg.src = imgs.src;
        imgText.innerHTML = imgs.alt;
        expandImg.parentElement.style.display = "block";
    }

组合 HTML、CSS 和 JavaScript 代码：此示例是上述部分的组合。

html

 

    
    
        How To Create a Tab Image Gallery
    
    
        h1 {
            color: green;
        }
     
        /* column pic */
        .column {
            float: left;
            width: 25%;
            padding: 10px;
        }
     
        /* Style the images of gallery */
        .column img {
            opacity: 0.6;
            cursor: zoom-in;
            padding: 5px;
        }
         
        .column img:hover {
            opacity: 1;
            transform: scale(1.1);
            transition: 0.5s;
        }
         
        .column img:active {
            opacity: 1;
        }
     
        * {
            box-sizing: border-box;
        }
         
        /* Expanding image text */
        #geeks {
            position: absolute;
            left: 200px;
            padding-top: 100px;
            font-size: 28px;
            color: #EFECE9;
        }
         
        #geeks:hover {
            color: #ADE3BD;
            cursor: wait;
        }
    

 

 
    
        GeeksforGeeks
        A Computer Science Portal for Geeks
         
Tab Image Gallery
 
    
 
    
    
        Here the Photo will be displayed
 
        
            
            
            
        
 
        
            
            
        
    
    
        function gfg(imgs) {
            var expandImg = document.getElementById("expand");
            var imgText = document.getElementById("geeks");
            expandImg.src = imgs.src;
            imgText.innerHTML = imgs.alt;
            expandImg.parentElement.style.display = "block";
        }
    

 

输出：