Controlling Captivate – Change Cursor

Welcome to another installment of Controlling Captivate! In this post we are going to show you, with the help of a FREE TLC add-in, how to change the cursor style of elements without using any advanced actions or any actions at all! This blog and add-in pertains only to CP8, CP9, and HTML5 output only.

In a recent question asked on the Adobe Captivate forum, the poster asked if was possible to change the cursor when hovering over a specific element.

Following some very straight-forward naming conventions for the slide elements, or by calling a JavaScript function, you can change the cursor style of any element(s) on a slide.

In today’s blog post, we’re just going to explain the naming conventions, the function, and the simple implementation of the ChangeCursor add-in. Did we mention you can get the add-in for FREE when you sign-up? You can download the add-in and follow along now by clicking the sign-up link shown here. Already a member? Then you can just sign in to access and download the add-in!

Click here to launch the demo of the ChangeCursor add-in and we’ll walk through the steps.

Installation

1_sm

The first step is to download the ChangeCursor.zip file.

2_sm

Next you’ll need to install the add-in. On the first slide of your project, choose Media/HTML5 animation and point to your ChangeCursor.zip file.

3_sm

With the animation on the stage, in the Properties panel, deselect the border and scrolling options.

4_sm

Set the animation to display for the rest of project on the Timing Tab.

That’s it!

Naming Conventions

The key to using this add-in are the naming conventions you’ll need to follow for each of the elements.
As shown in the demo, to set the cursor style, simply name the element(s) “cursor_pointer”. The naming convention is defined below:

“cursor” defines the element(s) for which you want the cursor to change
“pointer” defines the cursor style to show the “hand” cursor

If you have multiple elements that use the same cursor, append “_1” to the element name. For example, if you have three objects for which you want to apply the “cell” cursor in a spreadsheet demo, name the objects:

cursor_cell_1
cursor_cell_2
cursor_cell_3

To see a list of all possible cursor styles and a demo of each, visit the following web page:
http://www.w3schools.com/cssref/pr_class_cursor.asp

JavaScript Function

You can also apply a cursor style to an element by executing JavaScript.

Use the slide On Enter action and choose the action “Execute JavaScript”. Enter the following function in the JavaScript window:

changeCursor(“element name”, “cursor style”);

Enter your element name in quotes, followed by a comma and the applicable cursor style in quotes. Make sure you do not insert any spaces in the JavaScript.

Note: Ensure you choose “Current” as your window selection. “Continue playing the project” is optional depending on your project.

That’s all there is to it! Thanks for reading and we hope you find the ChangeCursor add-in a valuable tool that enhances your project. Please share this blog post with others who might find it beneficial using the social media icons below!