How to switch or change image in blog post when clicked

Mr Durian is back! woo~
Someone wrote in a comment the other day requesting for a tutorial on How to make the revealing evolving picture in my mini point click game "The Mysterious Letter".
So here I am doing my little coding session again. ~

This should be very easy if you have some knowledge in coding. The code I use down here is straight forward and simple to understand.

But first let me show you another example of what the code does. Click on the picture below and you will see our cute Pikachu evolve. Pika!


 

Gotcha!! I bet 90% of you must be thinking Raichu haha.

Anyway this is the code that I am using.

<img alt="Text" height="240" onclick="this.src='http://ImageAfterClick.jpg'" src="http://ImageBeforeClick.jpg" width="320" />

Same as before you'll need to switch over to the HTML mode.

1. Copy the code in the blue box & paste it into your post 
2. You have to change those highlighted text:
• Text (This is the text for image alternate attribute tag. Lets say for whatever reason the picture cant be rendered this "text" will be shown. Write something that is shown in the image)
• ImageAfterClick.jpg (Url of the image that you want after clicking)
• ImageBeforeClick.jpg (Url of the image that before receiving the click)
(If you want to you can change the hight and width also)


3. And your post is now ready for publishing

Oh ya! Before i go off .. one last thing you can also use .gif files as your image. It works too! Reload the page and see the example again if you need to...