Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
}>
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.
>
39 minutos atrás, alecram28 disse:
Alguns termos que você utilizou eu não estudei ainda, agradeço.
São funcionalidades básicas da JavaScript.
Estude a linguagem, que com um mínimo de conhecimento você vai entender.
>
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;
@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.
#texto { display: none;}