Widget:Test: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição Etiqueta: Revertido |
Sem resumo de edição Etiqueta: Revertido |
||
| Linha 46: | Linha 46: | ||
<body> | <body> | ||
<form id="imageForm"> | <form id="imageForm"> | ||
<input type="text" id="search" placeholder="Digite o nome do item"> | <input type="text" id="search" placeholder="Digite o nome do item"> | ||
<div id="dropdown" class="dropdown"></div> | <div id="dropdown" class="dropdown"></div> | ||
| Linha 89: | Linha 88: | ||
<div class="image-info"> | <div class="image-info"> | ||
<b>Nome:</b> ${option.name}<br> | <b>Nome:</b> ${option.name}<br> | ||
<b> | <b>Descrição:</b> ${option.coordinates}<br> | ||
${option.obtain} | ${option.obtain} | ||
</div> | </div> | ||
Edição das 03h57min 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">
<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>