How to use YOUR OWN custom cursor images

[Clifton]

Requires PowerPac v11.82.721+
Browsers do not handle custom cursors consistently nor do they all support the same file types for cursors.

• IE (all versions) prefer .cur or .ani images for cursors
• All other browsers can use png, gif, cur images, but will not correctly display animated (ani) cursors.
• IE requires that custom cursor images be 32px by 32px or smaller.
• All other browsers seem to support cursor images up to about 128px, but generally only if they have the same width and height.
• RECOMMENDATION: Convert your cursor images to a cur file for best browser compatibility.

How to display your custom images using pgStyleObject():

1. For the object you want a custom cursor to display, set an on load page action similar to the one shown below.
   
   

   

   On Load Page action for object that should show custom image

   Image 1.png (17.75 KiB) Viewed 864 times

   
   
2. Add the "inf-icon.cur" file to the media folder during export using the DHTML Export Tree Manager utility.
   
   

   

   Add image to export

   Image 2.png (84.07 KiB) Viewed 864 times

   
   
3. Export and test the result.

To specify multiple images and allow the browser to select the one it can display, use a tilde ( ~ ) to separate the image references in the pgStyleObject() parameter definition:

Adding browser selection of multiple cursor images

Image 3.png (41.37 KiB) Viewed 864 times

(NOTE: you do not have to add "~auto" to the end of the image list as the function will do this automatically. However, make sure all of the referenced images have been flagged for export using the DHTML Export Tree Manager.)

This method has been tested and conforms to the http://www.w3schools.com/cssref/pr_class_cursor.asp standard.

[John Robin Dove]

Hi Clifton,

Is there a way to set the current cursor for all objects? It seems to me that the current cursor is always defined by the object over which the mouse is passing. So the best I can do so far is to show a transparent field that covers everything and set its cursor. I want to display a wait cursor while the page completes a fairly long load process.

[Clifton]

If objRef points to a group, it will set the cursor for all the objects in the group. Otherwise, you could set up a little stylesheet with a class name that defines your cursor(s). Then set the class name for each object on the page that needs a special cursor by using userProperty(). Though not recommended, if every object must have a particular cursor, you could use the global selector (*) in your css file to set all objects to use the cursor. However, the only way to get things back to normal would be to unload the css when the task has completed. Not entirely bad, but this would be a very non-typical way to do this. Again, I wouldn't recommend this latter approach but it would probably work.

[John Robin Dove]

Thanks Clifton. So as I thought no real equivalent to sysCursor or useWaitCursor.