Widget:Test: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição Etiquetas: Reversão manual Revertido |
Sem resumo de edição Etiqueta: Revertido |
||
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> | <title>Filtro de Imagens</title> | ||
<style> | <style> | ||
. | .image-container { | ||
display: flex; | |||
flex-direction: column; | |||
display: | 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 { | .dropdown-item { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
cursor: pointer; | |||
padding: 5px; | |||
border: 1px solid #ddd; | |||
} | } | ||
.dropdown-item:hover { | .dropdown-item:hover { | ||
background-color: #f0f0f0; | background-color: #f0f0f0; | ||
} | } | ||
#infoContainer { | |||
margin-top: 20px; | |||
} | |||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
<form id="imageForm"> | <form id="imageForm"> | ||
< | <label for="search">Buscar Imagem:</label> | ||
<input type="text" id="search" placeholder="Digite o nome do item"> | |||
<div id="dropdown" class="dropdown"></div> | |||
<div id="infoContainer" class="image-container"></div> | |||
<div id=" | |||
</form> | </form> | ||
<script> | <script> | ||
const | const imageOptions = [ | ||
{ | |||
imageUrl: 'https://wiki.pokexgames.com/images/ | name: 'IMG Charmander', | ||
imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Charmander.gif', | |||
coordinates: '1234, 5678, 7', | |||
obtain: '<b>Como Obter: </b> <a href="https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista">Estilista</a>' | |||
}, | }, | ||
// Adicione mais itens conforme necessário | |||
]; | |||
// Adicione mais | |||
const | const searchInput = document.getElementById('search'); | ||
const dropdown = document.getElementById('dropdown'); | const dropdown = document.getElementById('dropdown'); | ||
const | const infoContainer = document.getElementById('infoContainer'); | ||
searchInput.addEventListener('input', function () { | |||
const | const query = searchInput.value.toLowerCase(); | ||
dropdown.innerHTML = ''; | dropdown.innerHTML = ''; | ||
if ( | 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 | function showInfo(option) { | ||
infoContainer.innerHTML = ` | |||
<div class="image-item"> | <div class="image-item"> | ||
<img src="${ | <img src="${option.imageUrl}" alt="${option.name}"> | ||
<div class="image-info"> | <div class="image-info"> | ||
<b>Nome | <b>Nome:</b> ${option.name}<br> | ||
<b> | <b>Coordenada:</b> ${option.coordinates}<br> | ||
${option.obtain} | |||
</div> | </div> | ||
</div> | </div> | ||
`; | `; | ||
} | } | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |
Edição das 03h54min de 30 de agosto 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>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"> <label for="search">Buscar Imagem:</label> <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}
Coordenada: ${option.coordinates}
${option.obtain}
`; } </script>
</body> </html>