Rollover v4.4 Onwards

The Rollover macro allows you to easily add CSS rollover effects to your content.

The Rollover macro v4.4 onwards has had a significant change in the way it is used as compared to previous versions. This was implemented to comply with changes made by Atlassian in Confluence 5.9, which caused the Rollover macro to behave unexpectedly when used inside tables. These changes and migration instructions will be listed on this page.

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.

    The Macro Browser with the Rollover macro available.
  5. Complete the desired fields.

    ParameterDescriptionTypeDefaultRequired

    Target ID

    Specify the target element to apply the rollover

    string

    none

    (tick)

    Class

    Option to apply a custom CSS class to the normal (roll-out) state. 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.

    Classes must be part of your Global Confluence CSS or defined in a CSS Stylesheet macro that you have added to your page. 

    string

    none

    (error)

    Over

    Option to apply a custom CSS class to the roll-over state. 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.

    Classes must be part of your Global Confluence CSS or defined in a CSS Stylesheet macro that you have added to your page.

    string

    none

    (error)

    Link

    The page that the rollover links to when clicked (http://www.adaptavist.com)

    string

    none

    (error)

  6. Click Insert. The macro placeholder displays.

    The placeholder for a Rollover macro.

    Notice that the new Rollover macro has no body, instead, we target where we want the rollover effect applied. See below for an example.

Examples

Basic use

The following example shows how to create a basic rollover using the rollover macro and the style 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 (in this example = 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.

    The Edit Rollover Macro screen.
  5. Save the macro.

  6. Add a div macro, edit it, and give its class parameter the same class name as is in the Rollover macro.

    The Edit Div Macro screen.
  7. Add the CSS Stylesheet macro and specify the classes .test and .test-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.

    A CSS Stylesheet placeholder macro with example styling configuration.

Linking to pages

Follow the example above and specify the address as the 'Link' parameter in the Rollover macro. Now when the target is clicked the user will be redirected to the link specified.

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

Unlike the previous version, links will now be underlined as default. If the line under the target link needs to be removed, simply edit the CSS macro to specify it. See below for an example.

Migration

Because of changes made by Atlassian in Confluence 5.9, there is no possibility to provide backward compatibility when using the Rollover macro. With the previous versions, it was possible to identify to what elements the Rollover should be applied just by inserting them directly within the body of the Rollover macro. With the new Confluence 5.9 version and Content Formatting 4.4, it is possible to achieve the same results just by following a few steps. The process involves removing the old macro and adding the new one.

Because of the way that the new macro works, the location is not important, so you could group all the new Rollover macros together at the end of the page.

  1. Get all the pages where the old Rollover macro is used by typing the string 'macroName: rollover*' in the search toolbar.

  2. Access the identified pages in edit mode and repeat the next steps for all the Rollover (Deprecated) macros found.

    The Edit Rollover Macro screen.
  3. Create a new Rollover macro with the same values for the Normal CSS class, Roll Over CSS class, and Link parameters of the old Rollover (Deprecated) macro. Insert a unique 'Target ID' that is going to identify to what element the rollover is going to be applied.

    The Edit Rollover Macro screen.
  4. Add the same ID to the element for which Rollover should be applied (in this example, please use the same ID for Table Cell(td) macro).

  5. Move the element outside the old Rollover macro.

    Placeholders for a Rollover, Table Cell, and Rollover (Deprecated) macros.
  6. Remove the old Rollover (Depreciated) macro.

Rollover v4.3 and Lower

The Rollover macro allows the quick and easy creation of CSS rollover effects.

Rollover effects are often used to create a button of some kind.

This macro will require additional CSS styling which can be added using the Stylesheet macro, the Confluence Stylesheet or a product such as Adaptavist ThemeBuilder.

The instructions on this page use Stylesheet macro.

Instructions

  1. Navigate to the page you want to edit.

  2. Click Edit.

  3. Click Insert More Content then select Other Macros.

  4. Select the Rollover macro from the Macro Browser.

    The Macro Browser with the Rollover macro available.
  5. Complete the desired fields.

    ParameterDescriptionTypeDefaultRequired

    Normal CSS Class

    Specify the class name for the normal (roll-out) state

    string

    none

    (tick)

    Roll Over CSS Class

    An optional class name for the roll-over state (defaults to the %class%-rollover)

    string

    class-rollover

    (error)

    Link

    The page that the rollover links to when clicked

    string

    none

    (error)

    Target

    An optional external target to modify.

    string

    none

    (error)

    Target CSS Class

    An optional class name to use solely for the external target (defaults to class)

    string

    none

    (error)

    Target Roll Over CSS Class

    An optional class name to use solely for the external target roll-over state (defaults to %targetclass%-rollover)

    string

    none

    (error)

    Output Type

    Specifies that the macro will be displayed inline with the surrounding content

    single select

    Inline

    (tick)

  6. Click Insert. The macro placeholder displays.

    The placeholder for a Rollover macro.

Examples

Basic Use

The following example shows you how to create a basic rollover using the rollover macro and the Stylesheet macro.

  1. Edit a page and insert a Rollover macro.

  2. In the Normal CSS class field, enter the name of the class (in this example = test)

  3. In the Roll Over CSS class field, enter the name of the class for the rollover state, or leave it blank if you use what is in the Normal CSS class field plus "-rollover" (the default).

    The Edit Rollover Macro screen.
  4. Save the macro.

  5. In the Rollover macro placeholder, add a div* macro as a container for your rollover text.

    A Rollover macro placeholder with a Div macro placeholder within.
  6. Save the page to see the text with a color background that changes on hover.

Linking to pages

The rollover macro can be used to link to a Confluence page, etc., as follows:

With Class parameter set to "test", and Link parameter set to "ADAPTAVIST:home". Contains a Div macro.

Here’s the result:

A Rollover macro placeholder with a Div macro placeholder within.

Notice that the cursor doesn’t change to a pointer - to do that we’ll need to extend our rollover style:

With Class parameter set to "test", Over parameter set to "pointy-rollover", and Link parameter set to "ADAPTAVIST:home". Contains a Div macro.

A CSS Stylesheet placeholder macro with example styling configuration.

Here’s the result:

A Rollover macro placeholder with a Div macro placeholder within.

Alternatively, a fully qualified URL may be used to link to resources outside Confluence:

With Class parameter set to "test", Over parameter set to "pointy-rollover", and Link parameter set to "http://www.google.com". Contains a Div macro.

This results in:

A Rollover macro placeholder with a Div macro placeholder within.