JavaScript help

chocolate boy123

Hi very very new to JavaScript can ye help me do the following. I have one big image and 8 smaller ones upon moving cursor over the small image it should appear as the big image I will post code below, thank you.

chocolate boy123

<script>
function swapOrg(imgNo) {
if (imgNo == 1)
document.getElementById("mainImage").src = "FB images/IMG1.jpg";
else if (imgNo == 2)
document.getElementById("IMG2").src = "FB images/IMG2.jpg";
else if (imgNo == 3)
document.getElementById("mainImage").src = "FB images/IMG3.jpg";
else if (imgNo == 4)
document.getElementById("mainImage").src = "FB images/IMG4.jpg";
else if (imgNo == 5)
document.getElementById("mainImage").src = "FB images/IMG5.jpg";
else if (imgNo == 6)
document.getElementById("mainImage").src = "FB images/IMG6.jpg";
else if (imgNo == 7)
document.getElementById("mainImage").src = "FB images/IMG7.jpg";
else if (imgNo == 8)
document.getElementById("mainImage").src = "FB images/IMG8.jpg";
}
function swap(imgNo){
document.getElementById("mainImage").src= "FB images\\pic" + picNum + ".jpg";
imgNum = picNum;
}
</script>
<div align="center">
<p><img src="FB images/IMG1.jpg" width="220" height="113" alt="" onMouseOver="Swap(1);"/>
<img src="FB images/IMG2.jpg" width="220" height="113" alt="" id="img2" onMouseOver="Swap(2);"/>
<img src="FB images/IMG3.jpg" width="220" height="113" alt="" onMouseOver="Swap(3);"/>
<img src="FB images/IMG4.jpg" width="220" height="113" alt="" onMouseOver="Swap(4);"/></p>
<p>Move your cursor over the images to view the gallery</p>
<p><img src="FB images/IMG5.jpg" width="220" height="113" alt="" onMouseOver="Swap(5);"/>
<img src="FB images/IMG6.jpg" width="220" height="113" alt="" onMouseOver="Swap(6);"/>
<img src="FB images/IMG7.jpg" width="220" height="113" alt="" onMouseOver="Swap(7);"/>
<img src="FB images/IMG8.jpg" width="220" height="113" alt="" onMouseOver="Swap(8);"/></p>


</div>

counterpointaud

You only have an id on one of your images, also you are using different case for id (img1 and IMG1) and functions (save and Save).

Also, there is no element with id 'mainImage' in the markup.

There are other issues too, but start there.

Edit: Both functions seem to be trying to do the same thing in different ways, if I understand, you should be able to do what you want with something like this (note not using ids, but passing reference to the img to the function instead):

<script>
  function swap(img){
  document.getElementById("mainImage").src = img.src;
  }
</script>
<div align="center">
  <p>
    <img id="mainImage" src="http://placehold.it/220x113?text=image1" width="220" height="113" />
  </p>
  <p> Main Image </p>
  <p>
    <img src="http://placehold.it/220x113?text=image1" width="220" height="113" alt="" onMouseOver="swap(this);" />
    <img src="http://placehold.it/220x113?text=image2" width="220" height="113" alt="" onMouseOver="swap(this);" />
    <img src="http://placehold.it/220x113?text=image3" width="220" height="113" alt="" onMouseOver="swap(this);" />
    <img src="http://placehold.it/220x113?text=image4" width="220" height="113" alt="" onMouseOver="swap(this);" />
  </p>
  <p>Move your cursor over the images to view the gallery</p>
  <p>
    <img src="http://placehold.it/220x113?text=image5" width="220" height="113" alt="" onMouseOver="swap(this)" />
    <img src="http://placehold.it/220x113?text=image6" width="220" height="113" alt="" onMouseOver="swap(this);" />
    <img src="http://placehold.it/220x113?text=image7" width="220" height="113" alt="" onMouseOver="swap(this);" />
    <img src="http://placehold.it/220x113?text=image8" width="220" height="113" alt="" onMouseOver="swap(this);" />
  </p>
</div>