How to change image when clicking?

Asked

Viewed 10,617 times

6

I have a work course and I had the following idea:

There are several images that will represent the chairs of a cinema (all are the same images, the same are in my HTML file), and I want to make the effect that when the user clicks on one of them it changes color symbolizing that he chose that chair.

I want to use the "onClick" so that it calls another image when clicking on the images that are appearing to the user or it will call the same image only of different color.

I want it to be by that method but I don’t know if it’s possible, if you’re not going to show me the best possible way to do it.

My HTML file

<div>

    <img src="imagens/cadeiraAzul.png" id="cadeira1" onclick="">

</div>

My JS file

function cor(){
	 
	 
	 
	 }

Since I’m a beginner in this area you’ll probably have tools unknown to me so if you can explain what each one does I’ll be even more grateful.

I also need that if the user clicks again it change to image that was initially, for if it is chosen by mistake.

javascript html
  • 1

    In this method, just change the attribute src image. Use the method setAttribute('src', 'caminhoDaNovaImagem'). Detail, if you want "multiple chairs" in HTML, stay tuned to id of each image, because ID is unique, can not repeat.

  • In this case where I would use the "setAttribute" ?

  • In its function of onclick. See more information here W3schools.

  • In that question has several cool answers that you can use in your application.

2 answers

4

If you want to learn more about the Jquery framework. Here is the running implementation of your fiddle.

HTML:

<p>
    <img alt="" src="https://upload.wikimedia.org/wikipedia/commons/0/03/Flag_of_Italy.svg" 
            style="height: 85px; width: 198px" id="imgBandeira"  />
</p>

Javascript:

$(document).ready(function(){

  $("#imgBandeira").click(function(){
    if($(this).attr("src") == "https://upload.wikimedia.org/wikipedia/commons/0/03/Flag_of_Italy.svg") 
      $(this).attr("src","https://upload.wikimedia.org/wikipedia/commons/0/05/Flag_of_Brazil.svg");
    else
      $(this).attr("src","https://upload.wikimedia.org/wikipedia/commons/0/03/Flag_of_Italy.svg");

  });
});

3


You can leave each style in different classes, and then change the class as you click, using the property classname javascript.

In this example, I left as a "toggle", because the user can select and lower the chair:

function marcar(e) {
  // verifica se a classe azul (estilo css que conter a imagem azul) esta no elemento
  if (e.className == "azul") {
    e.className = "vermelho";
  } else {
    e.className = "azul";
  }
}
.azul::after {
  content: url("http://recursos.mytime.com.br/Imagem/Menu/247/Azul.gif");
}
.vermelho::after {
  content: url("https://www.deliciouslingerieplus.com.br/image/cache//cores/cor-vermelha-30x30.jpg");
}
<div>
  <img class="azul" id="cadeira1" onclick="marcar(this)">
  <img class="azul" id="cadeira2" onclick="marcar(this)">
  <img class="azul" id="cadeira3" onclick="marcar(this)">
</div>

The action onclick will pass to function the scope of the element that was clicked. To make the code cleaner, instead of leaving the images in the source (src), I left them in specific classes, which I called "blue" and "red". When clicked on the image, we check whether the element in question (e, passed by parameter) has the blue class (e.className == 'azul') - if yes, it substitutes for the class .vermelha, containing the red image.

  • That’s exactly the way I wanted it to be, thank you. But could you explain part by part? Because you still didn’t understand how you did it.

  • I just didn’t understand the need to put the "e" in parentheses after the function name and also why you put "this" inside the parenthesis in the image tag. Would you please explain ?

  • 1

    The this send as argument the element in question, in case the img clicked. The function needs to receive this element, so the marcar(e) - the e is the element itself, that is, the img. Try putting console.log(e) right after the keys that start the function. All attributes of the img.

Browser other questions tagged javascript html

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