Intro | Purpose | Outline | Creation | Colors | Coding | Content | Design | Publish

Coding

Mouseover aka Rollover

Here's the original image HTML for the first (static state) image

<img border="0" src="tutimages/button1.jpg" width="122" height="48">

Now apply the coding for image swapping which looks like this (white text):

<img border="0" src="tutimages/button1.jpg" srcover="tutimages/button2.jpg" srcdown="tutimages/button3.jpg" width="122" height="48" align="left"></p>
 

Notice that by applying a shadow when mouse over occurs, the rectangle appears to be lit up and becomes an interactive button. Slightly moving the original rectangle down and to the right when clicked on it makes it appear to be pressed down.

Remember what those images looked like?

original image                    shadow added                 image moved slightly down and right

Let's look at another example.