{"id":713,"date":"2010-02-15T22:00:26","date_gmt":"2010-02-15T22:00:26","guid":{"rendered":"http:\/\/www.codingfriends.com\/?p=713"},"modified":"2010-02-16T10:46:21","modified_gmt":"2010-02-16T10:46:21","slug":"alter-img-image-tag-on-click","status":"publish","type":"post","link":"https:\/\/www.codingfriends.com\/index.php\/2010\/02\/15\/alter-img-image-tag-on-click\/","title":{"rendered":"Alter img (image) tag – on click"},"content":{"rendered":"

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

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.<\/p>\n

\r\n  Alter Image<\/a>\r\n  \r\n<\/pre>\n
and within the alterImg javascript function, getting the image (img HTML tag) via the ID <\/p>\n
\r\n  function alterImg()\r\n  {\r\n    \/\/ get the element img into the imgobject variable\r\n    var imgobject = document.getElementById('imagesrc');\r\n    \/\/ change the src of the image to the other image to display.\r\n    imgobject.src = pictureImage;\r\n    \/\/ change the image to the other image.\r\n    if (pictureImage == \"pic2.jpg\") \r\n      pictureImage = \"pic1.jpg\";\r\n    else\r\n      pictureImage = \"pic2.jpg\";\r\n  }\r\n<\/pre>\n
Here is the full code and if you save the below as changeimage.html<\/p>\n
\r\n\r\n\r\n