changing image source with javascript

Question

So im new with javascript and found this one to solve my problem:

But the example does not work for me.

<script type="text/javascript">
  function changeImage(a) {
    document.getElementById("img1").src=a;
  }
</script>

And

<table align=left width="896px" class="tableCategories">
  <tr class="trCategories">
    <td class="tdCategories">
      <img id="img1" src="./icon/menu/Essen3.png" onclick='changeImage(Shopping3.png);'/>
    </td>
  </tr>
</table>

So if i click on the image it does not change itself. The path to the images are correct. What am i doing wrong?

Put quotes around the file name when you call your function... — abellina
– abellina, Commented Mar 23, 2013 at 1:52

Chris White · Accepted Answer · 2013-03-23 01:51:56Z

5

Change

<img id="img1" src="./icon/menu/Essen3.png" onclick='changeImage(Shopping3.png);'/>

To

<img id="img1" src="./icon/menu/Essen3.png" onclick='changeImage("./icon/menu/Shopping3.png");'/>

A better javascript function would be re-usable. Try this:

function changeImage(obj,img) {
  obj.src = img;
}

and the following HTML code:

<img id="img1" src="./icon/menu/Essen3.png" onclick='changeImage(this,"./icon/menu/Shopping3.png");'/>

answered Mar 23, 2013 at 1:51

Chris White

7491 gold badge5 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ryan · Accepted Answer · 2013-03-23 01:52:42Z

2

You need to pass Shopping3.png as a string.

<img id="img1" src="./icon/menu/Essen3.png" onclick="changeImage('Shopping3.png');"/>

answered Mar 23, 2013 at 1:52

ryan

6,6856 gold badges45 silver badges70 bronze badges

Collectives™ on Stack Overflow

changing image source with javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related