Thomas Varberg Thomas Varberg - 3 months ago 12
HTML Question

Click an image to change a text and another image on the site

enter image description hereIm new to JS so I need a little help here.

I'm building a website in html where I have 3 pictures working as buttons.


  • When I click picture 1 I want text1 plus image1 to show up.

  • When I click picture 2 I want text2 plus image2 to show up.

  • When I click picture 3 I want text3 plus image3 to show up.



The text is working for me right now so:
When I click picture 1 text1 is showing up on the site.

So I need help to add the pictures.

Here is my codes:



function changeText(value) {
var div = document.getElementById("div");
var text = "";
var image = "";

if (value == 1) text += "this is picture one";
if (value == 2) text += "this is picture two";
if (value == 3) text += "this is picture tree";

div.innerHTML = text;

<a href="javascript: changeText(1);">
<img id="searchconsumers" src="images/search.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(2);">
<img id="exploreconsumers" src="images/explore.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(3);">
<img id="funconsumers" src="images/fun.png" width="40px" height="40px" alt="abc" />
</a>
<div id="div"></div>




Answer

Do you want something like this ?

function changeText(value) {
  var div = document.getElementById("div");
  var text = "";
  var image = "";

  if (value == 1) text += "this is picture one <br> <img class='custom_h_w' src='http://www.xerys.com/images/xerys/1.png'/>";
  if (value == 2) text += "this is picture two <br> <img class='custom_h_w' src='http://www.xerys.com/images/xerys/2.png'/>";
  if (value == 3) text += "this is picture tree <br> <img class='custom_h_w' src='http://www.xerys.com/images/xerys/3.png'/>";

  div.innerHTML = text;
}
.custom_h_w{
  top: 120px;
  right: 200px;
  position: absolute;
}
<a href="javascript: changeText(1);">
   <img id="searchconsumers" src="images/search.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(2);">
   <img id="exploreconsumers" src="images/explore.png" width="40px" height="40px" alt="abc" />
</a>
<a href="javascript: changeText(3);">
   <img id="funconsumers" src="images/fun.png" width="40px" height="40px" alt="abc" />
</a>
<div id="div"></div>