On a webpage, a "mouseover" is the state of an object when the mouse cursor is hovering over, but not clicking on, an object on the page. Often, that object will change color, position, or other characteristics to reflect that the mouse is hovering over it.

Visual Site Designer makes creating a mouseover simple by including a Mouseover button in the main toolbar at the top of the screen:

Click this button to show the Mouseover Properties dialog:

Creating a Mouseover

To create a mouseover, select an object in the workspace and click the Create Mouseover button. When you create a mouseover, you are essentially creating a second object to be displayed when the mouse hovers over the object. This second object will appear to be identical to the original.

Under Mouseover Elements, you can choose to edit either the original object or the mouseover object. The selected object will show in the workspace, where you can make changes to it. Generally, you'll only be making changes to the mouseover object.

Please note that these two objects must be exactly the same size for the mouseover to work properly.

Under Options, you can adjust the position of an object by entering a value for the number of pixels that the object will be moved down or to the right. You can also use negative values to move the object in the opposite direction. For example:

  • A value of 20 in the box next to Move Right will move the object 20 pixels to the right
  • A value of -20 in the box next to Move Right will move the object 20 pixels to the left.

Removing a Mouseover

To remove a mouseover, simply select an object with the mouseover attribute in the workspace and click the Remove Mouseover button.