Courtesy of
The Official Smiley Dictionary

Subtle animations can be fun and useful. For example, when you move your mouse over the link above, notice how the smiley-face changes. This is a relatively simple trick. Make sure you have two images (preferably the same size) that you can exchange with each other, then use the following code in the body of your HTML document:

<img name="smile" src="shocked.gif" src="51" src="51" /> <br />Courtesy of <br /><a href="http://www.smileydictionary.com/" onmouseover="document.smile.src='hysterical.gif';" onmouseout="document.smile.src='shocked.gif';">The Official Smiley Dictionary</a>

Here is a basic breakdown of what each part means:

• name="smile"—you need to name the image so that you can refer to it later with the JavaScript function in the mouseover and mouseout attributes of the link
• mouseover—when the mouse is over this link, run the JavaScript function in quotes
• mouseout—when the mouse moves back out of this link, run the JavaScript function in quotes
• document.smile.src—this means you are looking in the HTML document you created for the element that you named smile, and you want to change the src of that image to the image name you place inside the single quotes (e.g. 'hysterical.gif')