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 Matheus Jollyl da Silva
      Estou fazendo um cadastro simples usando CRUD, comecei a programar a pouco tempo e está sendo minha primeira experiencia com CRUD.
      fiz um pequeno cadastro e estou alterando para implementar aos poucos. Com uma dessas alterações os botões que eu adicionei perderam suas funcionalidades.
       
      Segue o código: 
       
       
      <?php
      // Verificar se foi enviando dados via POST
      if ($_SERVER['REQUEST_METHOD'] == 'POST') {
          $id = (isset($_POST["id"]) && $_POST["id"] != null) ? $_POST["id"] : "";
          $nome = (isset($_POST["nome"]) && $_POST["nome"] != null) ? $_POST["nome"] : "";
          $email = (isset($_POST["email"]) && $_POST["email"] != null) ? $_POST["email"] : "";
          $celular = (isset($_POST["celular"]) && $_POST["celular"] != null) ? $_POST["celular"] : NULL;
          $cidade = (isset($_POST["cidade"]) && $_POST["cidade"] != null) ? $_POST["cidade"] : NULL;
          $estado = (isset($_POST["estado"]) && $_POST["estado"] != null) ? $_POST["estado"] : NULL;
      } else if (!isset($id)) {
          // Se não se não foi setado nenhum valor para variável $id
          $id = (isset($_GET["id"]) && $_GET["id"] != null) ? $_GET["id"] : "";
          $nome = NULL;
          $email = NULL;
          $celular = NULL;
          $cidade = NULL;
          $estado = NULL;
      }
      try {
          $conexao = new PDO("mysql:host=localhost;port=3307;dbname=crudsimples", "root", "usbw");
          $conexao->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
          $conexao->exec("set names utf8");
      } catch (PDOException $erro) {
          echo "Erro na conexão:" . $erro->getMessage();
      }
      if (isset($_REQUEST["act"]) && $_REQUEST["act"] == "save" && $nome != "") {
          try {
              $stmt = $conexao->prepare("INSERT INTO contatos (nome, email, celular, cidade, estado) VALUES (?, ?, ?, ?, ?)");
              $stmt->bindParam(1, $nome);
              $stmt->bindParam(2, $email);
              $stmt->bindParam(3, $celular);
              $stmt->bindParam(4, $cidade);
              $stmt->bindParam(5, $estado);
               
              if ($stmt->execute()) {
                  if ($stmt->rowCount() > 0) {
                      echo "Dados cadastrados com sucesso!";
                      $id = null;
                      $nome = null;
                      $email = null;
                      $celular = null;
                      $cidade = null;
                      $estado = null;
                  } else {
                      echo "Erro ao tentar efetivar cadastro";
                  }
              } else {
                     throw new PDOException("Erro: Não foi possível executar a declaração sql");
              }
          } catch (PDOException $erro) {
              echo "Erro: " . $erro->getMessage();
          }
      }
      if (isset($_REQUEST["act"]) && $_REQUEST["act"] == "upd" && $id != "") {
          try {
              $stmt = $conexao->prepare("SELECT * FROM contatos WHERE id = ?");
              $stmt->bindParam(1, $id, PDO::PARAM_INT);
              if ($stmt->execute()) {
                  $rs = $stmt->fetch(PDO::FETCH_OBJ);
                  $id = $rs->id;
                  $nome = $rs->nome;
                  $email = $rs->email;
                  $celular = $rs->celular;
                  $cidade = $rs->cidade;
                  $estado = $rs->estado;
              } else {
                  throw new PDOException("Erro: Não foi possível executar a declaração sql");
              }
          } catch (PDOException $erro) {
              echo "Erro: ".$erro->getMessage();
          }
      }
      if ($id != "") {
          $stmt = $conexao->prepare("UPDATE contatos SET nome=?, email=?, celular=? cidade=?, estado=? WHERE id = ?");
          $stmt->bindParam(5, $id);
      } else {
          $stmt = $conexao->prepare("INSERT INTO contatos (nome, email, celular, cidade, estado) VALUES (?, ?, ?, ?, ?)");
      }
      ?>
      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="UTF-8" />
              <link rel="stylesheet" type="text/css" href="cadastro.css" />
              <title>Cadastro em reforma.</title>
          </head>
          <body>
          <h1>Cadastro Simples.</h1>
                  
              <form action="?act=save" method="POST" name="form1" >
                  <hr>
                  <input type="hidden" name="id" <?php
                  // Preenche o id no campo id com um valor "value"
                  if (isset($id) && $id != null || $id != "") {
                      echo "value=\"{$id}\"";
                  }
                  ?> />
                  <table>
                      <tr>
                          Nome:
                          <input type="text" name="nome" <?php
                          // Preenche o nome no campo nome com um valor "value"
                          if (isset($nome) && $nome != null || $nome != ""){
                              echo "value=\"{$nome}\"";
                          }
                          ?> />
                      </tr>
                  </table>
                          
                  <table>
                      <tr>
                          E-mail:
                          <input type="text" name="email" <?php
                          // Preenche o email no campo email com um valor "value"
                          if (isset($email) && $email != null || $email != ""){
                              echo "value=\"{$email}\"";
                          }
                          ?> />
                      </tr>
                  </table>
                  
                  <table>
                      <tr>
                          Celular:
                          <input type="text" name="celular" <?php
                          // Preenche o celular no campo celular com um valor "value"
                          if (isset($celular) && $celular != null || $celular != ""){
                              echo "value=\"{$celular}\"";
                          } 
                          ?> />
                      <table>
                          <tr>
                              Cidade:
                              <input type="text" name="cidade" <?php
                              // Preenche a cidade no campo nome com um valor "value"
                              if (isset($cidade) && $cidade != null || $cidade != ""){
                                  echo "value=\"{$cidade}\"";
                              }
                          ?> />
                      
                          Estado:
                          <input type="text" name="estado" <?php
                          // Preenche o estado no campo nome com um valor "value"
                          if (isset($estado) && $estado != null || $estado != ""){
                              echo "value=\"{$estado}\"";
                          }
                          
                  
                  
                  if (isset($_REQUEST["act"]) && $_REQUEST["act"] == "del" && $id != "") {
          try {
              $stmt = $conexao->prepare("DELETE FROM contatos WHERE id = ?");
              $stmt->bindParam(1, $id, PDO::PARAM_INT);
              if ($stmt->execute()) {
                  echo "Registo foi excluído com êxito";
                  $id = null;
              } else {
                  throw new PDOException("Erro: Não foi possível executar a declaração sql");
              }
          } catch (PDOException $erro) {
              echo "Erro: ".$erro->getMessage();
          }
      }
                  ?> />
                <br> <input type="submit" value="Salvar" />
                 <input type="reset" value="Novo" />
                </br>
                 <hr>
              </form>
              <table border="1" width="100%">
                              <tr>
                                  <th>Nome</th>
                                  <th>E-mail</th>
                                  <th>Celular</th>
                                  <th>Cidade</th>
                                  <th>Estado</th>
                                  <th>Ações</th>
                              </tr>
                              <?php
                      try {
                   
                      $stmt = $conexao->prepare("SELECT * FROM contatos");
                   
                          if ($stmt->execute()) {
                              while ($rs = $stmt->fetch(PDO::FETCH_OBJ)) {
                                  echo "<tr>";
                                  echo "<td>".$rs->nome."</td>
                                        <td>".$rs->email."</td>
                                        <td>".$rs->celular."</td>
                                        <td>".$rs->cidade."</td>    
                                        <td>".$rs->estado."</td>
                                        <td>
                                          <center>
                                              <a href=\"?act=upd&id=" . $rs->id . "\">[Alterar]</a>"
                                              ."&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
                                              ."<a href=\"?act=del&id=" . $rs->id . "\">[Excluir]</a>
                                          </center>
                                        </td>";
                              echo "</tr>";
                              }
                          } else {
                              echo "Erro: Não foi possível recuperar os dados do banco de dados";
                          }
                  } catch (PDOException $erro) {
                      echo "Erro: ".$erro->getMessage();
                  }
                  ?>
              </table>
              
          </body>
      </html>
       
      Por algum motivo minha tabela no Phpmyadmin também mudou e não consigo mais editar. Exclui a "id" e depois adicionei novamente e começou os problemas. Agradeço a ajuda desde já.
    • By VCastilho
      Bom Dia Estou tentando aplicar um HTML com Javascript no Portifólio do Meu Wordpress Mas assim que coloco ele deforma, como as imagens no final:  Em vez de modificar apenas horizontalmente, modifica também verticalmente, iguais as imagens, conferi o código e não localizei algo que causa isso, sendo que se visualizar o código no navegador, esta normal. A parte que esta desalinhado creio que consigo arrumar depois com o CSS Segue o código completo: <!doctype> <html> <head> <meta charset="utf-8"> <style> * { font-size: 16px; box-sizing: border-box; } button { display: block; margin: auto; } article { position: relative; display: inline-block; } aside { height: 200px; max-width: 260px; font-size: 3.2rem; font-weight: bold; line-height: 200px; display: inline-block; vertical-align: bottom; } aside#left { text-align: right; padding-right: 2rem; } aside#right { text-align: left; padding-left: 2rem; } .img-comp-container { height: 200px; min-width: 820px; position: relative; text-align: center; } .img-comp-img { width: 300px; height: 200px; overflow: hidden; position: absolute; } .img-comp-img img { display: block; vertical-align: middle; } .img-comp-slider { position: absolute; z-index: 9; cursor: ew-resize; width: 24px; height: 24px; background-image: url("http://images.tcdn.com.br/678962/themes/37/img/clicker1.png?325.80026377726244"); opacity: 1; } </style> </head> <body> <button onclick="initComparisons()">Centralizar ajustes</button> <div class="img-comp-container"> <aside id="left">Antes</aside> <article> <div class="img-comp-img "> <img src="https://www.lupadigital.info/wp-content/uploads/2018/05/imagens-gratis.jpg" width="280" height="200" alt="" /> </div> <div class="img-comp-img img-comp-overlay"> <img src="http://s2.glbimg.com/7B_srQyXERP_NoJCHSzgOnuwsyc=/smart/e.glbimg.com/og/ed/f/original/2017/07/26/best-sapce-photos-2017-designboom-10.jpg" width="280" height="200" alt="" /> </div> </article> <aside id="right">Depois</aside> </div> <script> slider = document.createElement("DIV"); slider.setAttribute("class", "img-comp-slider"); console.log(getId('right')); getId('right').style.width = getId('left').offsetWidth; function initComparisons() { var x, i, c, cc; getId('left').style.color = "#808080"; getId('right').style.color = "#808080"; x = document.getElementsByClassName("img-comp-overlay"); for (i = 0; i < x.length; i++) { x[i].style.width = "300px"; compareImages(x[i]); } function compareImages(img) { var clicked = 0, w = img.offsetWidth, h = img.offsetHeight; img.style.width = (w / 2) + "px"; img.parentElement.insertBefore(slider, img); img.parentElement.style.width = w; img.parentElement.style.height = h; slider.style.top = (h / 1) - (slider.offsetHeight / 2) + "px"; slider.style.left = (w / 2) - (slider.offsetWidth / 2) + "px"; slider.addEventListener("mousedown", slideReady); window.addEventListener("mouseup", slideFinish); slider.addEventListener("touchstart", slideReady); window.addEventListener("touchstop", slideFinish); function slideReady(e) { e.preventDefault(); clicked = 1; window.addEventListener("mousemove", slideMove); window.addEventListener("touchmove", slideMove); } function slideFinish() { clicked = 0; } function slideMove(e) { var pos; if (clicked == 0) return false; pos = getCursorPos(e) if (pos < 0) pos = 0; if (pos > w) pos = w; slide(pos); } function getCursorPos(e) { var a, x = 0; e = e || window.event; a = img.getBoundingClientRect(); x = e.pageX - a.left; x = x - window.pageXOffset; return x; } function slide(x) { c = 225 * x / w; cc = 225 - c; getId('right').style.color = "rgb(" + c + ',' + c + ',' + c + ")"; getId('left').style.color = "rgb(" + cc + ',' + cc + ',' + cc + ")"; img.style.width = x + "px"; slider.style.left = img.offsetWidth - (slider.offsetWidth / 2) + "px"; } } } function getId(ref) { return document.getElementById(ref); } initComparisons(); </script> </body> </html> Sendo que estou tentando utilizar tudo no mesmo arquivo, com o e o Estou fazendo errado? Há uma forma correta?

    • By CrysMorais
      Boa tarde pessoal,
      Sou nova por aqui e também sou nova na programação, e gostaria da ajuda de alguém, se possível.
      Eu montei uma pagina que cria questionários, onde o usuário  pode criar perguntas com 4 tipos de respostas (Radio, Checkbox, Text e Number).
      Porém não sei como verificar se no questionário, foi criado pelo menos uma pergunta de cada tipo.
       
      Montei assim:
       
      <select name="tipoconsquestao" id="tipoconsquestao" style="color:#000000; font-size:9px; width:130px; ">
                   <option value="1" selected >Única escolha</option>
                   <option value="2">Múltipla escolha</option>
                   <option value="3">Texto livre</option>
                   <option value="4">Número livre</option>
      </select>
       
      Criei um bloco desses para cada tipo de pergunta:
       
      <%if (ArrayQuestions(6,i) = 1) then%>
      <td width="8%" align=center>
             <input name="<%=conta_grupo%>" data-sm-tipo="<%=ArrayQuestions(6,i)%>" data-sm-vrmaxquestao="<%=ArrayQuestions(11,i)%>" data-sm-questao-numero="<%=ArrayQuestions(2,i)%>"  data-sm- alternativa="<%=ArrayQuestions(3,i)%>" data-sm-questao="<%=conta_grupo%>" id="<%=conta_Alternativa%>" type="radio" value="<%=ArrayQuestions(3,i) %>" <%if ArrayQuestions(4,i) = 1 then response.write "checked"%>/>
      </td>
      <td width="92%" >&nbsp;&nbsp;&nbsp;<b><%=ArrayQuestions(1,i)%><b></td>
      <% end if %>
       
       
      Recebo aqui:
       
              var arrayquestoes = [];
              var arrayalternativas = [];
              var questionarioRadio = [];
              var questionarioCheck = [];
              var questionarioText = [];
              var questionarioNum = [];
       
      for (var i = 1; i <= n_grupos; i++) {
                  var countRadio = 0;
                  var countCheck = 0;
                  var countText = 0;
                  var countVrText = 0;
                  var countVariosVrText = 0;
                  var countNum = 0;
                  
                  $("[data-sm-questao='" + i + "']").each(function (index, value) {
                      var questao = $(this).attr("data-sm-questao-numero");
                      var alternativa = $(this).attr("data-sm-alternativa");
                      //alert(alternativa);
                      var vralternativa = $(this).val();
                      var tipoalternativa = $(this).attr("data-sm-tipo");
                      
                      
                      vrmaxtotalizacao = $(this).attr("data-sm-vrmaxquestao");
                      
                      
                      arrayquestoes[i - 1] = questao;
          
                      //==============================================================================================================    
                      // Verifica todos os campos tipo questão 1 (Radiobuttons) e carrega o array questionarioRadio com true ou false
                      //==============================================================================================================  
                      if (eval(tipoalternativa) == 1)
                      {
                          if (this.checked) {
                              questionarioRadio[countRadio] = true;
                              if (textoalternativas == '') {
                                  textoalternativas = questao + '|' + alternativa + '|' + 1;
                              }
                              else {
                                  textoalternativas = textoalternativas + ';'+ questao + '|' + alternativa + '|' + 1;
                              }
                          }
                          else
                          {
                              questionarioRadio[countRadio] = false;
                          }
                          countRadio = countRadio + 1;
                          //console.log(cont);
                          
                      }
       
       
          Faço a validação aqui:
       
                
       for (var k = 0; k < questionarioRadio.length; k++) {
                  if (questionarioRadio[k])
                  {
                      if (!saidafinalRadio)
                      {
                          saidafinalRadio = true;
                      }
                  }
              }
              if (questionarioRadio.length == 1)
              {
                  saidafinalRadio = true;
              }
      }
       
      if (!saidafinalRadio)
              {
                  alert('Por favor responda todas as questões de única escolha.');
                  return;
              }
       
       
      E mando para o banco de dados.
       
       
       
    • By guzulino
      Eu tenho uma dúvida meio tosca, mas as páginas que eu estou colocando no site não estão carregando, quando acesso o site aparece uma página padrão de domínio reservado para um cliente HostGator, mas quando vou no cPanel fazer upload dos arquivos, eles não são carregados no site, tentei colocar na pasta "public_html" com o nome de index, mas mesmo assim ela não é carregada na página principal do site. Gostaria de saber qual a pasta em que devo colocar os arquivo das páginas principais para serem carregados. Eu já trabalhei com hospedagem na Locaweb, mas quis testar outra hospedagem para ver como funciona, mas até agora não deu muito certo, adquiri o domínio na semana passada então ele já deveria funcionar teoricamente.
    • By Anderson Ronilson Xavier
      Olá a todos gostaria da ajuda dos colegas estou em um projeto de site landing page  usando o plugin construtor de sites chamado themify ultra e não estou conseguindo uma galeria de imagens igual ao cliente está me pedindo que responsiva e com um menu que tenha as opções por exemplo "todas maçã banana laranja " se eu clicar em maçã a galeria ocultaria as bananas e Laranja e se eu clicar em todas e voltaria a apresentar todas as frutas ... Desculpa o jeito de explicar ... Mas galeria não estou conseguindo achar nada que me ajude a opção do themify ultra foi do próprio cliente que já tinha e acabei topando por fazer usando ele mesmo mas no site do themify não achei nenhum pluguin interessante a galeria deles é a padrão do WordPress será que teria como eu usar alguma outra os colegas tem alguma sugestão? 
       Vou deixar um site que o cliente deixou de modelo de como ele gostaria de que dele ficasse
       
      www.levelmont.com.br
       
      Grato pelo ajuda dos colegas.
       
       
×

Important Information

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