Jump to content
alecram28

Clicar imagem aparece descrição, clica de novo oculta descrição

Recommended Posts

Preciso criar um album de fotos que ao clicar na imagem apareça uma descrição, e ao clicar novamente na imagem a descrição desapareça. 

Consigo fazer aparecer o texto mas não consigo oculta-lo depois de clicar novamente.

Outra duvida, coloquei a div texto mas a formatação css que coloco nao aparece.

 

HTML:

 
<body>
<h1>ÁLBUM DE FOTOS</h1>
 
<div class="album">
<img src="foto1.jpg" onclick="mostrarTexto('Descriçao1!')" max width="300" max height="300"> </div>
<div class="album">
<img src="foto2.jpg" onclick="mostrarTexto('terbrbrb!')" max width="300" max height="300"> </div>
<div class="album">
<img src="foto3.jpg" onclick="mostrarTexto('aaaaaaa!')" max width="300" max height="300"> </div>
<div class="album">
<img src="foto4.jpg"onclick="mostrarTexto('bbbbbbbb')" max width="300" max height="300"> </div>
<div class="album">
<img src="foto5.jpg" onclick="mostrarTexto('cccccccc')" max width="300" max height="300"> </div>
 
<div class="album">
<img src="foto6.jpg" onclick="mostrarTexto('dddddddd')" max width="300" max height="300"> </div>
<div id= "texto"></div>
<div class="album">
<img src="foto7.jpg" onclick="mostrarTexto('eeeeeee')" max width="300" max height="300"> </div>
<div class="album">
<img src="foto8.jpg" onclick="mostrarTexto('fffffff')" max width="300" max height="300"> </div>
<div class="album">
<img src="foto9.jpg" onclick="mostrarTexto('ggggggg')" max width="300" max height="300"> </div>
 
 
</body>

 

CSS:

html {
font-family: Arial, Helvetica, sans-serif
 
}
 
h1{
font-family: Arial, Helvetica, sans-serif;
color: rgb(117, 170, 231);
font-size:2rem;
text-align: left;
}
 
.album{
float: left;
width: 500px;
}
 
.texto{
font-family: Arial, Helvetica, sans-serif;
font-size:2rem;
color: rgb(92, 192, 92);
 
}

 

JS:

function mostrarTexto(msg) {
texto.innerHTML= msg;
 
}

Share this post


Link to post
Share on other sites

@alecram28

Não é possível estilizar innerHTML com regras de estilos incorporadas.
Use estilos inline inseridos com JavaScript como mostrado no código a seguir.

function mostrarTexto(msg) {
  var text = document.getElementById('texto');
  var estilos = window.getComputedStyle ? getComputedStyle(text, null) : text.currentStyle;
  var visibilidade = estilos.display;
    if( visibilidade == 'none' ) { 
      text.style.display = 'block';
      text.innerHTML = "<span style='font-family: Arial, Helvetica, sans-serif;  font-size:2rem; color: rgb(92, 192, 92);'>" + msg + "<span>";
    } else { 
      text.style.display = 'none';
      text.innerHTML = " ";
    }
}

Retire a regra CSS para .texto.

Acrescente a seguinte regra CSS:

#texto { display: none;}

 

 

  • Gostei 1

Share this post


Link to post
Share on other sites
14 horas atrás, Maujor disse:

@alecram28

Não é possível estilizar innerHTML com regras de estilos incorporadas.
Use estilos inline inseridos com JavaScript como mostrado no código a seguir.


function mostrarTexto(msg) {
  var text = document.getElementById('texto');
  var estilos = window.getComputedStyle ? getComputedStyle(text, null) : text.currentStyle;
  var visibilidade = estilos.display;
    if( visibilidade == 'none' ) { 
      text.style.display = 'block';
      text.innerHTML = "<span style='font-family: Arial, Helvetica, sans-serif;  font-size:2rem; color: rgb(92, 192, 92);'>" + msg + "<span>";
    } else { 
      text.style.display = 'none';
      text.innerHTML = " ";
    }
}

Retire a regra CSS para .texto.

Acrescente a seguinte regra CSS:


#texto { display: none;}

 

 

Muito obrigado! Você poderia por favor comentar as linhas dessa função, o que cada uma faz? Alguns termos que você utilizou eu não estudei ainda, agradeço.

Share this post


Link to post
Share on other sites
Em 23/05/2018 at 15:25, Maujor disse:

São funcionalidades básicas da JavaScript.
Estude a linguagem, que com um mínimo de conhecimento você vai entender.

A ta. Eu só não entendi muito bem essa linha:

var estilos = window.getComputedStyle ? getComputedStyle(text, null) : text.currentStyle;

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) { $vativochk = "checked"; } else { $vativochk = ""; } echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo '</tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
       
      function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

    • By Pitag346
      Olá pessoal, tudo bem? 
      Estou com uma dúvida bem bobinha... mas gostaria que me ajudassem a solucionar.
       
      Alguns sites utilizam uma forma de carregar as imagens deixando elas embaçadas/desfocadas. Até que são carregadas e elas aparecerem normalmente...
       
      Exemplo básico seria esse site: https://www.redbull.com/br-pt/athletes
       
      Sabem me explicar como isso é feito, e pra que ? Meu site usa bastante imagens, gostaria de saber se tem algum benefício ou se seria somente estética ... Obrigado! 
       
      (Não sei se isso é feito em JavaScript, acredito que sim... perdão se publiquei na área errada).
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.