Torna ícones visíveis quando clicar em uma palavra

HTML Geral HTML5 Básico Avançado Wordpress Plataformas

Tenho um html, onde são uma sequencia de ícones, mas quero deixar apenas alguns visíveis, e o restante para que apareçam após clicar em uma palavra como por exemplo "veja mais", e assim eles aparecerem. OBS: esses ícones são <img>

Foto de David L.
David perguntou há 1 ano

Sabe a resposta?

Ganhe 10 pts por resposta de qualidade
Responder dúvida
2 respostas
0
votos
Nenhum usuário votou nessa resposta como útil.
Professor Daniel P.
Identidade verificada
  • CPF verificado
  • E-mail verificado
Respondeu há 1 ano
Olá, vc pode usar css a propriedade display ='none' nas img que não quer mostrar ao carregar a página, cria um botão no HTML e no evento onclick do botão chama a função javascript a função javascrip vc altera a propriedade das img com a propriedade display='none' pra block. duvidas me chama aqui

Envie uma dúvida gratuitamente

Envie sua primeira dúvida gratuitamente aqui no Tira-dúvidas Profes. Nossos professores particulares estão aqui para te ajudar.

0
votos
Nenhum usuário votou nessa resposta como útil.
Professora Augusto C.
Respondeu há 8 meses

Claro! Para ocultar imagens em HTML e mostrar após clique em um botão, você pode usar CSS e JavaScript. 

 

Uma forma de fazer isso é deixar o display: none dos itens que serão escondidos e quando clicar no botão exibi-los. 

 

Aqui está um exemplo de como fazer isso:

 

```html

<div>

  <img src="imagem1.jpg" class="esconder">

  <img src="imagem2.jpg" class="esconder">

  <img src="imagem3.jpg" class="esconder">

  <button onclick="mostrar()">Veja mais</button>

</div>

 

<script>

function mostrar() {

  var x = document.getElementsByClassName("esconder");

  for (var i = 0; i < x.length; i++) {

    x[i].style.display = "block";

  }

}

</script>

```

 

Neste exemplo, as imagens são inicialmente ocultadas com a classe "esconder". Quando o botão "Veja mais" é clicado, a função JavaScript "mostrar()" é chamada e altera o estilo de todos os elementos com a classe "esconder" para "block", fazendo com que as imagens sejam exibidas.

 

Espero que isso ajude! Se tiver alguma duvida é só me perguntar. ????

Professores particulares de HTML

+ Ver todos
Encontre professor particular para te ajudar nos estudos
R$ 60 / h
Daniel P.
Maceió / AL
Daniel P.
4,0 (1 avaliação)
Tarefas resolvidas 1 tarefa resolvida
Identidade verificada
  • CPF verificado
  • E-mail verificado
1ª hora grátis
HTML - BackEnd HTML Avançado HTML Básico
Graduação: Sistemas para Internet (Universidade Estadual de Ciências da Saúde de Alagoas)
Professor de php, banco de dados mysql, postgree, delphi desenvolvimento web. Graduado em análise e desenvolvimento de sistemas
R$ 55 / h
Danielle R.
São Paulo / SP
Danielle R.
5,0 (2 avaliações)
Horas de aulas particulares ministradas 5 horas de aula
Identidade verificada
  • CPF verificado
  • E-mail verificado
HTML Básico HTML5 HTML Geral
Graduação: Ciências Contábeis (Uninove - Universidade Nove de Julho)
Experiências: Aulas Particulares de Informática (4 anos), Designer Gráfico e Web (+10 anos), Ajuda em Desenvolvimento Pessoal (+20 anos)