How do you rotate images in HTML?

The concept of a rollover image is you display an image on your webpage and when a viewer puts his or her mouse over the image, the image interacts, usually by inverting colors etc.. The advantage to using this technique is that it makes your site more interactive, and more fun to browse.

The first step is to create two images. One as the default image that is displayed, and one that will replace it when the user's mouse moves over it. See related link for an example.

Once you create your images it is time for the code:

Open up your web page in the desired text editor (e.i. notepad). Insert the code below into the location you want your rollover image to appear in.

Note: all the bolded italicized text below is meant to define what data should go in that location and should be replaced with the actual parameters of the image in question. See related link for example of how it should be filled out.

Note: make sure you copy everything exactly as it is - syntax is very important with this code. Especially, make sure you don't leave out the apostrophes!