Image Roll-Over

For roll-overs, everything keys off the “name=” attribute on the <img...> tag. Good Habit: name your button image files with a 0 or 1 suffix. “0” usually means the off/false/inactive state; “1” usually means the on/true/active state. Usually, a page will start out with the default “0” state button, change to the active “1” state on a mouseover, then back to “0” state on a mouseout.

Return to Home Page

Source Code


<a href='index.html'
onmouseover="document.mybtn.src='images/btn_home1.gif'"
onmouseout="document.mybtn.src='images/btn_home0.gif'">

<img src='images/btn_home0.gif' name='mybtn' alt='Return to Home Page'>
</a>