Page 1 of 1

How to use YOUR OWN custom cursor images

PostPosted: Wed Apr 23, 2014 12:59 am
by 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.

    Image 1.png
    On Load Page action for object that should show custom image
    Image 1.png (17.75 KiB) Viewed 952 times

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

    Image 2.png
    Add image to export
    Image 2.png (84.07 KiB) Viewed 952 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:

Image 3.png
Adding browser selection of multiple cursor images
Image 3.png (41.37 KiB) Viewed 952 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.

Re: How to use YOUR OWN custom cursor images

PostPosted: Tue Jun 09, 2015 8:28 am
by 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.

Re: How to use YOUR OWN custom cursor images

PostPosted: Tue Jun 09, 2015 9:32 am
by 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.

Re: How to use YOUR OWN custom cursor images

PostPosted: Wed Jun 10, 2015 6:55 am
by John Robin Dove
Thanks Clifton. So as I thought no real equivalent to sysCursor or useWaitCursor.