On mouse over and on mouse out

Question

how do i write a function that uses getElementById to change the picture in that image to something new (picture2.jpg). then second function that changes the picture in that image back to the first picture (picture1.jpg).How do i then modify the image on the page so that when you run your mouse over it?

Am i at least headed in the right direction?

function getpic var pic = ("picture2.jpg) { if onmouseover(picture2.jpg)

else if onmouseout (picture1.jpg) }

Answer 1

Here's an example of how this could be done:

var link = document.getElementById('img');

function chngImg(){
  link.src = "http://placekitten.com.s3.amazonaws.com/homepage-samples/200/287.jpg";
  }

function chngImg2(){
  link.src = "http://placekitten.com/g/200/300"
  }

<img id="img" onmouseover="chngImg()" onmouseout="chngImg2()" src="http://placekitten.com/g/200/300"/>

If you need explanation, let me know. I hope this helps!