Clicar imagem aparece descrição, clica de novo oculta descrição
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;
}Discussão (4)
Carregando comentários...