Controlling Captivate – Change Cursor

Welcome to another installment of Controlling Captivate! In this post, we will 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 pertain 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 straightforward naming conventions for the slide elements or calling a JavaScript function, you can change any element's 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 by clicking the sign-up link shown here. Already a member? Then you can just sign in to access and download the add-in!

Installation

1. The first step is to download the ChangeCursor.zip file.
2. 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. With the animation on the stage, in the Properties panel, deselect the border and scrolling options.
4. 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 is 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!