Make images clickable to next image in javascript

Question

I have a Previous/Next link on my site that lets me go thru the images with this code: <a href="JavaScript:previousImage()">Previous</a> | <a href="JavaScript:nextImage()">Next</a> <span id='num'></span>

I have placed the images in the codes below. The Previous / Next links are working great but I would like to be able to click on the images itself to navigate to the next images: so click on 1.jpg then goes to 2.jpg so forth and once clicked on 5.jpg goes back to 1.jpg. Please advise, thanks in advance for your help. I am a beginner building my site blindly and any help is much appreciated.

<script type="text/javascript">

var image = new Array("jpegs/1.jpg",
"jpegs/2.jpg",
"jpegs/3.jpg",
"jpegs/4.jpg",
"jpegs/5.jpg"
)

var imgNumber=1

var numberOfImg = image.length

function previousImage(){
  if(imgNumber > 1){
    imgNumber--
    }

  else{
    imgNumber = numberOfImg
    }

document.slideImage.src = image[imgNumber-1]

  }
function nextImage(){
  if(imgNumber < numberOfImg){
    imgNumber++
    }

  else{
    imgNumber = 1
    }

document.slideImage.src = image[imgNumber-1]

  }

</script>

Answer 1

How about:

document.slideImage.onclick = nextImage;

I would also suggest using event registration (also for the anchors):

document.slideImage.addEventListener('click', nextImage);