Widget:Test: mudanças entre as edições

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(157 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 4: Linha 4:
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Seleção e Exibição de Imagens</title>
     <title>Busca de Imagens por Nome</title>
     <style>
     <style>
         .hidden {
         .input-group { margin-bottom: 1em; position: relative; }
        .dropdown {
            border: 1px solid #ccc;
             display: none;
             display: none;
            position: absolute;
            background-color: #fff;
            z-index: 1000;
            max-height: 150px;
            overflow-y: auto;
            width: 100%;
         }
         }
         .image-container img {
        .dropdown-item {
            padding: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        .dropdown-item img {
            margin-right: 10px;
        }
        .dropdown-item:hover {
            background-color: #f0f0f0;
        }
         .image-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .image-item {
            margin-bottom: 1em;
            text-align: center;
        }
        .image-item img {
            display: block;
            margin: 0 auto;
        }
 
        .variations-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 1em;
        }
 
        .variation-item {
            width: 30%;
            box-sizing: border-box;
            margin: 10px;
            text-align: center;
            border: 1px solid #ccc;
            padding: 10px;
        }
 
        .variation-item img {
             width: 100px;
             width: 100px;
             height: 100px;
             height: 100px;
             margin: 5px;
            display: block;
             margin: 0 auto 10px;
         }
         }
         select {
 
             margin: 5px;
         .swap-button {
            margin-top: 10px;
            cursor: pointer;
            width: 15px;
            height: 15px;
            background: url('https://wiki.pokexgames.com/images/2/2d/Comvip.png') no-repeat center;
            background-size: contain;
            display: block;
             margin: 0 auto;
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>
    <h1>Selecione o Tipo de Mapa</h1>
     <form id="imageForm">
 
         <div class="input-group">
     <form id="mapForm">
             <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">
         <div id="mapTypeSelection">
             <div id="dropdown" class="dropdown"></div>
             <label for="mapType">Tipo de Mapa:</label>
            <select id="mapType">
                <option value="">Selecione um mapa</option>
                <option value="1">Mapa Vermelho</option>
                <option value="2">Mapa Verde</option>
                <option value="3">Mapa Roxo</option>
             </select>
        </div>
 
        <div id="specificOptions" class="hidden">
            <label for="specificOption">Opções Específicas:</label>
            <select id="specificOption">
                <option value="">Selecione uma opção</option>
            </select>
         </div>
         </div>


         <div id="imageContainer" class="image-container hidden">
         <div id="imageContainer" class="image-container hidden">
             <!-- As imagens filtradas serão exibidas aqui -->
             <!-- As imagens e suas informações serão exibidas aqui -->
         </div>
         </div>
     </form>
     </form>


     <script>
     <script>
         const specificOptions = {
         const imageList = {
             1: ['Option 1-1', 'Option 1-2', 'Option 1-3'],
             'Charmander': {
            2: ['Option 2-1', 'Option 2-2', 'Option 2-3', 'Option 2-4'],
                imageUrl: 'https://wiki.pokexgames.com/images/6/65/004-Charmander.png',
            3: ['Option 3-1', 'Option 3-2']
                variations: [
                    {
                        imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                        description: 'Charmander XXX',
                        obtain: {
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                            text: 'Estilista'
                        },
                        additionalImages: [
                            'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',  // Frente
                            'https://example.com/left1.png',  // Lado Esquerdo
                            'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',  // Costas
                            'https://example.com/right1.png'  // Lado Direito
                        ]
                    },
                    { 
                        imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                        description: 'Charmander brabo.',
                        obtain: {
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                            text: 'Estilista'
                        },
                        additionalImages: [
                            'https://example.com/front2.png',  // Frente
                            'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',   // Lado Esquerdo
                            'https://example.com/back2.png',  // Costas
                            'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png'   // Lado Direito
                        ]
                    }
                ]
            },
         };
         };


         const images = {
         const imageSearch = document.getElementById('imageSearch');
            'Option 1-1': 'https://wiki.pokexgames.com/images/b/bc/BagOfPollem.png',
        const dropdown = document.getElementById('dropdown');
            'Option 1-2': 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png',
        const imageContainer = document.getElementById('imageContainer');
            'Option 1-3': 'https://wiki.pokexgames.com/images/3/34/DifferentImage.png',
 
            'Option 2-1': 'https://wiki.pokexgames.com/images/c/c4/ExampleImage.png',
        imageSearch.addEventListener('input', function() {
            'Option 2-2': 'https://wiki.pokexgames.com/images/5/56/AnotherExample.png',
             const searchValue = this.value.trim().toLowerCase();
            'Option 2-3': 'https://wiki.pokexgames.com/images/a/a6/SampleImage.png',
             dropdown.innerHTML = '';
             'Option 2-4': 'https://wiki.pokexgames.com/images/d/d7/FinalExample.png',
             'Option 3-1': 'https://wiki.pokexgames.com/images/e/e8/MapType3Option1.png',
            'Option 3-2': 'https://wiki.pokexgames.com/images/f/f9/MapType3Option2.png'
        };


        document.getElementById('mapType').addEventListener('change', function() {
            if (searchValue) {
            const selectedMapType = this.value;
                Object.keys(imageList).forEach(imageName => {
            const specificOptionSelect = document.getElementById('specificOption');
                    if (imageName.toLowerCase().includes(searchValue)) {
            const imageContainer = document.getElementById('imageContainer');
                        const dropdownItem = document.createElement('div');
           
                        dropdownItem.classList.add('dropdown-item');
            specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>';
                       
            imageContainer.innerHTML = '';
                        const imgElement = document.createElement('img');
           
                        imgElement.src = imageList[imageName].imageUrl;
            if (selectedMapType) {
                        imgElement.alt = imageName;
                const options = specificOptions[selectedMapType];
                       
                options.forEach(option => {
                        dropdownItem.appendChild(imgElement);
                    specificOptionSelect.innerHTML += `<option value="${option}">${option}</option>`;
                        dropdownItem.appendChild(document.createTextNode(imageName));
                       
                        dropdownItem.addEventListener('click', function() {
                            showImageInfo(imageName);
                            dropdown.style.display = 'none';
                        });
                        dropdown.appendChild(dropdownItem);
                    }
                 });
                 });


                 document.getElementById('specificOptions').classList.remove('hidden');
                 dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
             } else {
             } else {
                 document.getElementById('specificOptions').classList.add('hidden');
                 dropdown.style.display = 'none';
                document.getElementById('imageContainer').classList.add('hidden');
             }
             }
         });
         });


         document.getElementById('specificOption').addEventListener('change', function() {
         document.addEventListener('click', function(event) {
             const selectedOption = this.value;
             if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
            const imageContainer = document.getElementById('imageContainer');
                 dropdown.style.display = 'none';
           
            imageContainer.innerHTML = '';
           
            if (selectedOption) {
                const imageUrl = images[selectedOption];
                if (imageUrl) {
                    imageContainer.innerHTML = `<img src="${imageUrl}" alt="${selectedOption}">`;
                    imageContainer.classList.remove('hidden');
                }
            } else {
                 imageContainer.classList.add('hidden');
             }
             }
         });
         });
        function showImageInfo(imageName) {
            const imageInfo = imageList[imageName];
            let imagesHtml = `
                <div class="image-item">
                    <img src="${imageInfo.imageUrl}" alt="${imageName}">
                </div>
                <div class="variations-container">
            `;
            imageInfo.variations.forEach((variation, index) => {
                imagesHtml += `
                    <div class="variation-item">
                        <img src="${variation.additionalImages[0]}" alt="Variation Image" class="variation-image" data-variation-index="${index}">
                          <div class="swap-button" data-variation-index="${index}"></div>
                        <div class="image-info">
                            <b>Nome do Addon</b>: ${variation.description}
                            <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                        </div>
                    </div>
                `;
            });
            imagesHtml += '</div>';
            imageContainer.innerHTML = imagesHtml;
            imageContainer.classList.remove('hidden');
            // Alternar imagens ao clicar no botão de troca
            const swapButtons = document.querySelectorAll('.swap-button');
            swapButtons.forEach(button => {
                const index = button.getAttribute('data-variation-index');
                const variation = imageInfo.variations[index];
                let currentImageIndex = 0;
                button.addEventListener('click', () => {
                    currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
                    const variationImage = button.previousElementSibling;
                    variationImage.src = variation.additionalImages[currentImageIndex];
                });
            });
        }
     </script>
     </script>
</body>
</body>
</html>
</html>

Edição atual tal como às 03h33min de 17 de setembro de 2024

<!DOCTYPE html> <html lang="pt-BR"> <head> 

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Busca de Imagens por Nome</title>
   <style>
       .input-group { margin-bottom: 1em; position: relative; }
       .dropdown {
           border: 1px solid #ccc;
           display: none;
           position: absolute;
           background-color: #fff;
           z-index: 1000;
           max-height: 150px;
           overflow-y: auto;
           width: 100%;
       }
       .dropdown-item {
           padding: 8px;
           cursor: pointer;
           display: flex;
           align-items: center;
       }
       .dropdown-item img {
           margin-right: 10px;
       }
       .dropdown-item:hover {
           background-color: #f0f0f0;
       }
       .image-container {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
       }
       .image-item { 
           margin-bottom: 1em; 
           text-align: center;
       }
       .image-item img {
           display: block;
           margin: 0 auto;
       }

       .variations-container {
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           margin-top: 1em;
       }

       .variation-item {
           width: 30%;
           box-sizing: border-box;
           margin: 10px;
           text-align: center;
           border: 1px solid #ccc;
           padding: 10px;
       }

       .variation-item img {
           width: 100px;
           height: 100px;
           display: block;
           margin: 0 auto 10px;
       }

       .swap-button {
           margin-top: 10px;
           cursor: pointer;
           width: 15px;
           height: 15px;
           background: url('https://wiki.pokexgames.com/images/2/2d/Comvip.png') no-repeat center;
           background-size: contain;
           display: block;
           margin: 0 auto;
       }
   </style>

</head> <body> 

   <form id="imageForm">

           <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">

   </form>

   <script>
       const imageList = {
           'Charmander': { 
               imageUrl: 'https://wiki.pokexgames.com/images/6/65/004-Charmander.png', 
               variations: [
                   { 
                       imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                       description: 'Charmander XXX',
                       obtain: {
                           url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                           text: 'Estilista'
                       },
                       additionalImages: [
                           'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',  // Frente
                           'https://example.com/left1.png',   // Lado Esquerdo
                           'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',   // Costas
                           'https://example.com/right1.png'   // Lado Direito
                       ]
                   },
                   {  
                       imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                       description: 'Charmander brabo.',
                       obtain: {
                           url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                           text: 'Estilista'
                       },
                       additionalImages: [
                           'https://example.com/front2.png',  // Frente
                           'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',   // Lado Esquerdo
                           'https://example.com/back2.png',   // Costas
                           'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png'   // Lado Direito
                       ]
                   }
               ]
           },
       };

       const imageSearch = document.getElementById('imageSearch');
       const dropdown = document.getElementById('dropdown');
       const imageContainer = document.getElementById('imageContainer');

       imageSearch.addEventListener('input', function() {
           const searchValue = this.value.trim().toLowerCase();
           dropdown.innerHTML = ;

           if (searchValue) {
               Object.keys(imageList).forEach(imageName => {
                   if (imageName.toLowerCase().includes(searchValue)) {
                       const dropdownItem = document.createElement('div');
                       dropdownItem.classList.add('dropdown-item');
                       
                       const imgElement = document.createElement('img');
                       imgElement.src = imageList[imageName].imageUrl;
                       imgElement.alt = imageName;
                       
                       dropdownItem.appendChild(imgElement);
                       dropdownItem.appendChild(document.createTextNode(imageName));
                       
                       dropdownItem.addEventListener('click', function() {
                           showImageInfo(imageName);
                           dropdown.style.display = 'none';
                       });
                       dropdown.appendChild(dropdownItem);
                   }
               });

               dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
           } else {
               dropdown.style.display = 'none';
           }
       });

       document.addEventListener('click', function(event) {
           if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
               dropdown.style.display = 'none';
           }
       });

       function showImageInfo(imageName) {
           const imageInfo = imageList[imageName];
           let imagesHtml = `

                   <img src="${imageInfo.imageUrl}" alt="${imageName}">

           `;

           imageInfo.variations.forEach((variation, index) => {
               imagesHtml += `

                       <img src="${variation.additionalImages[0]}" alt="Variation Image" class="variation-image" data-variation-index="${index}">

                           Nome do Addon: ${variation.description} 
                           Como Obter: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>

               `;
           });
imagesHtml += '

'; 

           imageContainer.innerHTML = imagesHtml;
           imageContainer.classList.remove('hidden');

           // Alternar imagens ao clicar no botão de troca
           const swapButtons = document.querySelectorAll('.swap-button');

           swapButtons.forEach(button => {
               const index = button.getAttribute('data-variation-index');
               const variation = imageInfo.variations[index];
               let currentImageIndex = 0;

               button.addEventListener('click', () => {
                   currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
                   const variationImage = button.previousElementSibling;
                   variationImage.src = variation.additionalImages[currentImageIndex];
               });
           });
       }
   </script>

</body> </html>

Disponível em “https://wiki.pokexgames.com/index.php?title=Widget:Test&oldid=87075”