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.

With some knowledge of CSS you can create some interesting effects with the Rollover 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.

    ParameterDescriptionTypeDefaultRequired

    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

    (tick)

    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

    (error)

    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

    (error)

    URL

    The page that the rollover links to when clicked

    string

    none

    (error)

  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

Example Div macro targeted with a rollover. Colors change when the mouse rolls over the area.

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.

The link should be a fully qualified web address for external pages, for example,  https://www.kolekti.com.


If you are still stuck please contact our support team who can offer you more assistance. 
You can try our full range of content formatting macros for free by visiting the Marketplace.
On this page