Annual Documentation Survey

Do you have 4 minutes to help us improve our documentation? Please take our annual survey!

Skip to end of metadata
Go to start of metadata

Rollover v4.4 onwards

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

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 will require additional CSS styling which can be added using the Content Formatting Style macro, the Confluence Stylesheet or a theming product such as Adaptavist ThemeBuilder.

The instructions on this page use Content Formatting Style macro.

 

Usage

Click Insert > Other Macros.

 

Select the Rollover macro from the provided list.

 

Complete the desired fields.

ParameterDescriptionType

Default

Required?
Target IDSpecify the target element to apply the rolloverstringnone(tick)
Class

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

string

none

(error)

Over
An optional class name for the roll-over state.
stringnone(error)
LinkThe page that the rollover links to when clicked. (http://www.adaptavist.com)stringnone(error)

 

The macro will then appear on the page.

 

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 to what element the 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.




  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.



  7. Add the CSS 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.

 

 

Linking to pages

Follow the example as 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 the 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 was possible to identify to what elements the Rollover should be applied just inserting them directly within the body of the Rollover macro. With the new Confluence 5.9 version and Content Formatting 4.4 is possible to achieve the same results just 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 is used the old Rollover macro 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) macro found

  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.



  4. Add the same ID to the element you want to apply the Rollover (in this example, please use the same ID for Table Cell(td) macro). 

  5. Move the element outside the old Rollover (Deprecated) macro



  6. Remove the old Rollover (Deprecated) 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 Content Formatting Style macro, the Confluence Stylesheet or a theming product such as Adaptavist ThemeBuilder.

The instructions on this page use Content Formatting Style macro.

Usage

Click Insert > Other Macros.

 

Select the Rollover macro from the provided list.

 

Complete the desired fields.

ParameterDescriptionType

Default

Required?
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).
stringclass-rollover(error)
LinkThe page that the rollover links to when clicked.stringnone(error)
TargetAn optional external target to modify.stringnone(error)
Target CSS ClassAn optional class name to use solely for the external target (defaults to class).stringnone(error)
Target Roll Over CSS ClassAn optional class name to use solely for the external target roll-over state(defaults to %targetclass%-rollover).stringnone(error)
Output TypeSpecifies that the macro will be displayed inline with the surrounding content.single selectInline(tick)

 

The macro will then appear on the page.

 

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 '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 blank if you use what is in the Normal CSS class field plus "-rollover" (the default).



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



  6. Save the page to see your 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:

 

You'll 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.

Here's the result:

 

Alternatively you can use a fully qualified URL 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.

Which results in:

See Also:

 

Top of page

  • No labels