PokeXGames

Widget:Test

Revisão de 03h57min de 30 de agosto de 2024 por Renee (discussão | contribs)

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

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Filtro de Imagens</title>
   <style>
       .image-container {
           display: flex;
           flex-direction: column;
           margin-top: 20px;
       }

       .image-item {
           margin-bottom: 20px;
       }

       .image-info {
           margin-top: 10px;
       }

       .dropdown-item img {
           width: 20px;
           height: 20px;
           margin-right: 10px;
           vertical-align: middle;
       }

       .dropdown-item {
           display: flex;
           align-items: center;
           cursor: pointer;
           padding: 5px;
           border: 1px solid #ddd;
       }

       .dropdown-item:hover {
           background-color: #f0f0f0;
       }

       #infoContainer {
           margin-top: 20px;
       }
   </style>

</head> <body> 

   <form id="imageForm">
       <input type="text" id="search" placeholder="Digite o nome do item">

   </form>

   <script>
       const imageOptions = [
           {
               name: 'IMG Charmander',
               imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Charmander.gif',
               coordinates: '1234, 5678, 7',
               obtain: 'Como Obter:  <a href="https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista">Estilista</a>'
           },
           // Adicione mais itens conforme necessário
       ];

       const searchInput = document.getElementById('search');
       const dropdown = document.getElementById('dropdown');
       const infoContainer = document.getElementById('infoContainer');

       searchInput.addEventListener('input', function () {
           const query = searchInput.value.toLowerCase();
           dropdown.innerHTML = ;

           if (query) {
               const filteredOptions = imageOptions.filter(option => option.name.toLowerCase().includes(query));
               filteredOptions.forEach(option => {
                   const item = document.createElement('div');
                   item.className = 'dropdown-item';
                   item.innerHTML = `<img src="${option.imageUrl}" alt="${option.name}"> ${option.name}`;
                   item.addEventListener('click', () => showInfo(option));
                   dropdown.appendChild(item);
               });
           }
       });

       function showInfo(option) {
           infoContainer.innerHTML = `

                   <img src="${option.imageUrl}" alt="${option.name}">

                       Nome: ${option.name}

                       Descrição: ${option.coordinates}

                       ${option.obtain}

           `;
       }
   </script>

</body> </html>

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