How to change image when clicking? [duplicate]

Question

How to change image when clicking? [duplicate]

Navigation

#1 by (4 votes)
#2 by (3 votes)

6

I have a course work 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 of when the user clicks on one of them it changes color symbolizing that he chose that chair.

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

I want it to be by this method but I do not know if it's possible, if not, show me the best way to do it.

My HTML file

<div>

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

</div>

My JS file

function cor(){
	 
	 
	 
	 }

As a beginner in this area you will probably have tools unknown to me so if you can explain what each one does, I'll be even more grateful.

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

javascript html

asked by anonymous 19.01.2017 / 20:02

2 answers

4

If you want to learn more about the Jquery framework. Here's the implementation running of your question in the 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");

  });
});

19.01.2017 / 20:21

Why performing offloading to the GPU is a good idea? Difference between epics and features

score 3 · Accepted Answer

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

In this example, I left it as a toggle, because the user can select and de-select 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 onclick action will go to function the scope of the element that was clicked. To leave the code cleaner, instead of leaving the images in the source (src), I left in specific classes, which I called "blue" and "red". When we click on the image, we check if the element in question ( e , passed by parameter) has the class blue ( e.className == 'azul' ) - if yes, it substitutes for class .vermelha , which contains the red image.