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 Air-Gear
      Olá, na parte de enviar eu conseguir, mas manter até terminar o cadastro eu não conseguir. Eu vou contar toda a história para ficar mais claro possível.
       
      Eu precisei implementar um Upload de qualquer imagem ou PDF na página de solicitar compras. O site utiliza AngularJS, a primeira versão do Angular. Eu tentei fazer sem depender de PHP, mas na internet achava só a parte de Front-End e ninguém sabia fazer no Back-End. Então eu resolvi fazer com PHP mesmo.
       
      Nó código PHP, ele aceita todos as extensões de imagens mais o PDF e é possível envia-los todos de uma vez na quantidade que quiser. Todos os arquivos serão renomeados, contendo no nome o ID do usuário logado pego pela função javascript, o dia do mês, o mês, o ano, o dia da semana, a hora, o minuto, o segundo, se é AM ou PM e uma numeração aleatório. O arquivo PDF vai continuar sendo PDF e todas as imagens serão JPG. No final, todos serão enviados para uma pasta chamada upload.
       
      Só que agora eu preciso jogar de volta para página para salvar os novos nomes dos arquivos para continuar o cadastro da solicitação de compras. Como AngularJS utiliza Javascript, eu tentei usa-lo dentro do PHP utilizando EOF, mas não tive resultado. Eu só consigo com HTML com as diretivas do AngularJS. Na parte do API, nos atributos, eu declarei "nomeArquivo: []," , para salvar os nomes dos arquivos.
       
      Seguem o código.
      <div class="row"> <div class="col-sm-12 col-md-6 "> <div class="upload_form_cont"> <form id="upload_form" enctype="multipart/form-data" method="post" action="/profile-upload"> <div> <div><label for="image_file">Selecione o arquivo de imagem</label></div> <div><input type="file" name="image_file" id="image_file" accept="image/*" onchange="fileSelected();" /></div> </div> <div> <input type="button" value="Upload" onclick="startUploading()" /> </div> <div id="fileinfo"> <div id="filename"></div> <div id="filesize"></div> <div id="filetype"></div> <div id="filedim"></div> </div> <div id="error">Você deve selecionar apenas arquivos de imagem válidos!</div> <div id="error2">Ocorreu um erro ao enviar o arquivo</div> <div id="abort">O upload foi cancelado pelo usuário ou o navegador interrompeu a conexão</div> <div id="warnsize">Seu arquivo é muito grande. Não podemos aceitar isso. Selecione arquivos pequenos</div> <div id="progress_info"> <div id="progress"></div> <div id="progress_percent">&nbsp;</div> <div class="clear_both"></div> <div> <div id="speed">&nbsp;</div> <div id="remaining">&nbsp;</div> <div id="b_transfered">&nbsp;</div> <div class="clear_both"></div> </div> <div id="upload_response"></div> </div> </form> </div> </div> </div> upload.php
      <?php function bytesToSize1024($bytes, $precision = 2) { $unit = array('B','KB','MB'); return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i]; } //Pega o id do usuário logado $id_url = $_GET['id']; // Numero de campos de upload $numeroCampos = count($_FILES['image_file']['name']); // Tamanho máximo do arquivo (em bytes) $tamanhoMaximo = 1024*1024*2; // Extensões aceitas $extensoes = array(".jpg", "jpeg", ".gif", ".png", ".pdf", ".bmp", ".pdf", ".tiff"); //Local da pasta $_UP['pasta'] = '../upload/'; $substituir = false; for ($i = 0; $i < $numeroCampos; $i++) { // Informações do arquivo enviado $sFileName = $_FILES['image_file']['name'][$i]; $sSize = $_FILES['image_file']['size'][$i]; $sFileSize = bytesToSize1024($sSize, 1); $nomeTemporario = $_FILES['image_file']['tmp_name'][$i]; // Verifica se o arquivo foi colocado no campo if (!empty($sFileName)) { $erro = false; // Verifica se o tamanho do arquivo é maior que o permitido if ($sSize > $tamanhoMaximo) { $erro = "O arquivo " . $sFileName . " não deve ultrapassar " . $tamanhoMaximo. " bytes"; } // Verifica se a extensão está entre as aceitas elseif (!in_array(strrchr($sFileName, "."), $extensoes)) { $erro = "A extensão do arquivo <b>" . $sFileName . "</b> não é válida"; } // Verifica se o arquivo existe e se é para substituir elseif (file_exists($_UP['pasta'] . $sFileName) and !$substituir) { $erro = "O arquivo <b>" . $sFileName . "</b> já existe"; } else{ //Pega a extensão do arquivo $TipoExtensao = pathinfo($sFileName, PATHINFO_EXTENSION); // O arquivo passou em todas as verificações, hora de tentar movê-lo para a pasta // Primeiro verifica se deve trocar o nome do arquivo $unixTime = time(); $timeZone = new \DateTimeZone('America/Sao_Paulo'); $time = new \DateTime(); $time->setTimestamp($unixTime)->setTimezone($timeZone); $formattedTime = $time->format('d-m-Y_l_h-i-s-a'); $aleatorio = rand(); if($TipoExtensao == 'pdf'){ $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.pdf'; }else{ $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.jpg'; } // Depois verifica se é possível mover o arquivo para a pasta escolhida if (move_uploaded_file($nomeTemporario, $_UP['pasta'] . $nome_final)) { // Upload efetuado com sucesso, exibe uma mensagem e um link para o arquivo echo "Upload do arquivo ".$sFileName." foi efetuado com sucesso!"; echo "</br>"; echo<<<EOF <p>Eu tentei implementar o retorno da página aqui!</p> <p></br></p> <p></br></p> EOF; } else { // Não foi possível fazer o upload, provavelmente a pasta está incorreta echo "Não foi possível enviar o arquivo, tente novamente"; echo "</br>"; } } } else { echo "Selecione algum arquivo de imagem ou PDF para fazero upload."; } } ?>  
    • By mateus.andriollo
      Estou preocupado com as opções dos navegadores que permitem, por exemplo, alterar para ativo um input que estava "disable" e alterar seu value de 10 para 500.
       
      Como bloquear este tipo de ação?
      Uso PHP como back-end e passo meus dados via dados via PDO.
       
      Existe uma maneira de criptografar ou mesmo criar uma regra que valide meus dados?
       
       
    • By Marceloely
      Eu gostaria de saber como fazer para preencher automaticamente(pré populado) uma página de pagamentos a partir dos dados inseridos em uma página anterior pelo plugin do contact form 7 do wordpress
       
      Os campos até são preenchidos, mas não com a informação inserido no formulário mas sim com a id mesmo que coloquei na URL
        
      <label> Seu nome
          [text nome id:nome class:nome] </label>
      <label> Seu DDD
      [tel DDD id:DDD class:DDD]</label>
      <label> Seu Celular
      [tel celular id:celular class:celular]</label>
      <label> Seu e-mail
      </label>
      <label> Assunto
          [text* your-subject] </label>
      <label> Sua mensagem (opcional)
          [textarea your-message] </label>
      [submit "Enviar"]
      <script>
       document.addEventListener('wpcf7mailsent', function (Event) {
         location = 'https://pay.hotmart.com/A48773288I?ap=5181&name=id:nome&phoneac=id:ddd&phonenumber=id:celular&email=id:email';
       }, false);
      </script>
    • By Marceloely
      Em alguns países, campanhas de publicidade com objetivo de mensagem no instagram são proibidas, tendo isso em vista gostaria de saber se é possível criar um link onde o usuário caia direto no inbox de outra pessoa no instagram? Como se fosse aqueles links do que cai na conversa do whatsapp.
×

Important Information

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