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, Mar 23 '13 at 01:52

score 5 · Accepted Answer · answered Mar 23 '13 at 01:51

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");'/>

score 2 · Answer 2 · answered Mar 23 '13 at 01:52

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 '13 at 01:52

ryan

6,541
5
43
68

changing image source with javascript

2 Answers2