Alter img (image) tag – on click

With javascript you can do allot of fun things that a static page, in this example I am going to use the getDocumentID to obtain a image (img) HTML tag, and whilst I have this as a javascript object I can then alter the src image details.

I have created a “a” href HTML tag that will not go anywhere, but I am using the onclick javascript method to call the javascript function which references the id name within the img HTML tag.

  Alter Image
  

and within the alterImg javascript function, getting the image (img HTML tag) via the ID

  function alterImg()
  {
    // get the element img into the imgobject variable
    var imgobject = document.getElementById('imagesrc');
    // change the src of the image to the other image to display.
    imgobject.src = pictureImage;
    // change the image to the other image.
    if (pictureImage == "pic2.jpg") 
      pictureImage = "pic1.jpg";
    else
      pictureImage = "pic2.jpg";
  }

Here is the full code and if you save the below as changeimage.html

  Alter Image
  

The output would be this.. click on “Alter Image”.

Alter Image

You can save the images by selecting the image and right clicking save as..