Rollover Demonstration

<--Image 1

<--Image 2

Rollover is the term used to describe content that changes when the cursor is placed over it. For example a button that changes color when hovering the cursor. 

Rollovers are often used within navigation on websites to create a more interactive feel to the site by changing or revealing content as the user interacts on screen and to improve the overall appearance of a site. 

Rollovers can be frustrating as there is no way to prevent the action form occurring with accidental movements over elements and so layouts may become confusing if too many rollovers are used. It may be more appropriate to require the user to click on an element to reveal more options opposed to having this trigger with a simple mouse over command. 

Java script for the rollover example below:

<script language="javascript">

        function MouseRollover(MyImage) {

        MyImage.src = " button2.png";

    }

        function MouseOut(MyImage) {

        MyImage.src = " button1.png";

    }

</script>

<br />

<div align="center">

<!--The rollover image displays here.-->

<img border="0" onmouseout="MouseOut(this)" onmouseover="MouseRollover(this)" src=" button1.png" />

</div>

Final Rollover button below: