Onclick event in a list show an image

Asked

Viewed 324 times

1

I need help with an event onclick:

When clicking on a text within a list <ul><li>. I’d like you to show an image in a div next door.

How do I do that?

html5

  • lets the div with the css attribute display: none and when you click on the element changes to display: block for example

  • Ricardo... would have some example to indicate?

2 answers

2


By clicking on an element in the list the image will appear in the div and the text will change, and when you click back again as it was. Explanation of the code commented on script with //comentário aqui

function imagem(){
 var img = document.getElementById("img")
 var imagem = document.getElementById("imagem")
 if(img.style.display == "none") { //verifica se a imagem está sendo exibida, se não estiver vai executar os comandos abaixo e se tiver vai executar o else
   img.style.display="block" //exibe a imagem
   imagem.innerHTML = "CLIQUE DE NOVO" //altera o texto
 }
 else { //se a imagem estiver sendo exibida vai executar os comandos abaixo
   img.style.display="none"; //oculta a imagem
   imagem.innerHTML = "CLIQUE AQUI" //altera o texto
 }
}
.div1 {
width:50%;
float:left;
}
.div2 {
float:left;
width:50%;
}
<div class="div1">
<ul>
  <li id="imagem" onclick="imagem()" style="cursor:pointer">CLIQUE AQUI</li>
</ul>
</div>
<div class="div2">
<img src="https://lh3.googleusercontent.com/l6JAkhvfxbP61_FWN92j4ulDMXJNH3HT1DR6xrE7MtwW-2AxpZl_WLnBzTpWhCuYkbHihgBQ=w640-h400-e365" style="display:none;" id="img" height="35%" width="35%"/>
</div>

  • Perfect... Thank you very much!!!!

0

By clicking on the text of <li> it performs the function, which will change the display of the image so that it can appear:

function aparecer(){
   imagem = document.getElementById("imagem");
   imagem.style.display = "block";
}
.principal{
   display: flex;
   justify-content: center;
   align-items: center;
}
.principal ul{
  list-style-type: none;
}
#imagem{
   display: none;
   width: 200px;
   height: 60px;
}
#texto{
  cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
  <title>teste</title>
</head>
<body>
  <div class="principal">
    <ul>
       <li><a onclick="aparecer()" id="texto">Clique Aqui</a></li>
    </ul>
    <div>
       <img src="https://i.imgur.com/KraVclx.gif" id="imagem" />
    </div>
  </div>
</body>
</html>

  • Perfect... Thank you very much!!!!

Browser other questions tagged html5

You are not signed in. Login or sign up in order to post.