Rollover

The Rollover macro lets you easily add CSS rollover effects to your content. This macro requires additional CSS styling, which can be added using the  CSS Stylesheet macro, the  Confluence Stylesheet or a product such as Adaptavist ThemeBuilder.

The instructions on this page use our CSS Stylesheet macro.

Instructions

1. Navigate to the page you want to edit.
2. Click Edit.
3. Click Insert More Content > Other Macros.
4. Select the  Rollover  macro from the Macro Browser
   

5. Complete the desired fields.

   Parameter	Description	Type	Default	Required
   Target ID	This should match the ID of the element you are applying the effect to. Add a # to the start of the ID. ex. The ID parameter in a Div macro is target. Then the Target ID in the Rollover macro should be #target.	string	none
   Normal CSS Class	CSS class name for the normal (roll-out) state. Use in combination with Global Confluence CSS or a CSS Stylesheet macro that you have added to your page. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the .selector in the class name	string	none
   Roll Over CSS Class	CSS class name for the rollover state. Use in combination with Global Confluence CSS or a CSS Stylesheet macro that you have added to your page. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the .selector in the class name	string	none
   URL	The page that the rollover links to when clicked	string	none

6. Click Insert. The macro placeholder displays.

   

Examples

The following example shows how to create a basic rollover using the rollover macro and the  CSS Style Sheet macro.

1. Edit a page and insert a Rollover macro.

2. In the mandatory  Target ID  field identify the element to which rollover will be applied.

   This serves as the targeting mechanism. In this case, we have a div macro elsewhere on the page with the parameter class name value set to 'test'. The Rollover macro searches for the element and applies the rollover effect to it.

3. In the Normal CSS class field, enter the name of the class. eg. test that will be applied for the normal (roll-out) state.
4. In the Roll Over CSS class field, enter the name of the class for the rollover state. eg. rollover.
   
5. Save the macro.
6. Add a div macro, edit it, and give it the same ID as the target ID you used in the Rollover Macro eg. target.
   
7. Add the CSS Stylesheet macro and specify the classes .test and .rollover as shown below. This is just an easy example, but a lot more is possible by editing the CSS.
   
8. Save the page to see your text with a color background that changes on hover.

Published Result

Linking to pages

Set up the macros as above and specify the address as the URL parameter in the Rollover macro. Now when a user clicks the target they are redirected to the link specified.