You already did this when you changed the in-line style of an element because that is an attribute with the styles as values. You can also change any other attribute.
To try this you will need two images:
- create a page and save it as picswap.html
- add an img element with empty onmouseup, id, src and alt attributes
- set the onmouseup to picswap(), the id to picture, the src to ./media/whatsinside.png and the alt to left facing
- test that the image appears correctly
- create the picswap() function inside the script element
- add an alert in the function and test that the alert shows when you click on the image (then comment out this alert which was just for testing)
- under the alert line paste this: document.getElementById('picture').src='./media/whatsinside2.png';
- test the page and the image should change
You have just changed the value of the src attribute and therefore the image changes. You can change the value of any attribute in this same way. Having changed the image you should now change the alt to describe the new image and not the old one. Do that. To test it remove the second image file or deliberately miss-spell the file name in the JavaScript and the alt will be displayed instead of the missing image. Fix the missing image once you know the alt is working.