Tag: alter image tag

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.

  <a onclick="javascript:alterImg()">Alter Image</a>
  <img src="pic1.jpg" width="250" height="350" id="imagesrc"/>

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<script language="javascript">
  var pictureImage = "pic2.jpg";
  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";
  }
</script>
<body onload="alterImagenow()">
  <a onclick="javascript:alterImg()">Alter Image</a>
  <img src="pic1.jpg" width="250" height="350" id="imagesrc"/>
</body>
</html>

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..