5 667
edições
Widget:Test: mudanças entre as edições
Ir para navegação
Ir para pesquisar
sem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 1: | Linha 1: | ||
<!DOCTYPE html> | 2<!DOCTYPE html> | ||
<html lang="pt-BR"> | <html lang="pt-BR"> | ||
<head> | <head> | ||
<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>Busca de Imagens por Nome</title> | ||
<style> | <style> | ||
. | .input-group { margin-bottom: 1em; } | ||
.hidden { display: none; } | |||
.image-item { margin-bottom: 1em; } | |||
.image-info { margin-top: 0.5em; } | |||
.hidden { | |||
} | |||
.image-info { | |||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
<form id=" | <form id="imageForm"> | ||
<div | <div class="input-group"> | ||
< | <input type="text" id="imageSearch" placeholder="Digite o nome da imagem"> | ||
<button type="button" id="searchImageButton">Buscar Imagem</button> | |||
< | |||
</div> | </div> | ||
<div id="imageContainer" class="image-container hidden"> | <div id="imageContainer" class="image-container hidden"> | ||
<!-- As imagens e suas informações serão exibidas aqui --> | <!-- As imagens e suas informações serão exibidas aqui --> | ||
| Linha 224: | Linha 25: | ||
<script> | <script> | ||
const | // Lista de imagens e suas informações adicionadas manualmente | ||
const imageList = { | |||
'Charmander': { | |||
imageUrl: 'https://example.com/charmander.png', | |||
description: 'Charmander, o Pokémon de fogo inicial.' | |||
}, | }, | ||
'Bulbasaur': { | |||
imageUrl: 'https://example.com/bulbasaur.png', | |||
description: 'Bulbasaur, o Pokémon de grama inicial.' | |||
}, | }, | ||
'Squirtle': { | |||
imageUrl: 'https://example.com/squirtle.png', | |||
description: 'Squirtle, o Pokémon de água inicial.' | |||
} | } | ||
// Adicione mais imagens conforme necessário | |||
}; | }; | ||
document.getElementById(' | document.getElementById('searchImageButton').addEventListener('click', function() { | ||
const imageName = document.getElementById('imageSearch').value.trim(); | |||
const | |||
const imageContainer = document.getElementById('imageContainer'); | const imageContainer = document.getElementById('imageContainer'); | ||
if ( | if (imageName && imageList[imageName]) { | ||
const | const imageInfo = imageList[imageName]; | ||
imageContainer.innerHTML = ` | |||
<div class="image-item"> | |||
<img src="${imageInfo.imageUrl}" alt="${imageName}"> | |||
<div class="image-info"> | |||
<b>Nome da Imagem</b>: ${imageName} <br> | |||
<b>Descrição</b>: ${imageInfo.description} <br> | |||
<b>URL</b>: ${imageInfo.imageUrl} | |||
</div> | </div> | ||
</div> | |||
`; | |||
imageContainer.classList.remove('hidden'); | imageContainer.classList.remove('hidden'); | ||
} else { | } else { | ||
imageContainer. | imageContainer.innerHTML = 'Imagem não encontrada.'; | ||
imageContainer.classList.remove('hidden'); | imageContainer.classList.remove('hidden'); | ||
} | } | ||
}); | }); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> | ||