Google Maps API Tutorial© 2007, 2008, 2009 Mike Williams |
| Translate this page: |
Custom CursorsIt is possible to use your own custom cursors for the map and for GDraggableObjects.Here's a simple example The cursor is implemented as part of the operating system code, not in the browser itself, and the implementation varies considerably depending on the operating system and the browser. MSIEMSIE allows you to specify a list of CUR and ANI files and standard cursor keywords.E.g. 'url(mycursor.ani), url(mycursor.cur), pointer' The "hot spot" must be specified in the CUR or ANI file itself, you can't specify it in the cursor list. If, for any reason, one cursor in the list cannot be used in the current environment, then the next one in the list will be used. However, if you attempt to use standard CSS3 syntax to specify the "hot spot" of any of the cursors, the whole list is ignored. Gecko based browsersRecent versions of Gecko-based browsers (Firefox, Mozilla, Netscape, Flick, etc.) allow you to specify a list of CUR, PNG, GIF, JPG, XBM and BMP files but require that the last element in the list be a standard cursor keyword.They also allow the "hot spot" to be specified in the cursor list using standard CSS3 syntax. E.g. 'url(mycursor.png) 16 16, pointer' If you don't specify a "hot spot" in the list, then for XBM and CUR files the "hot spot" specified in the file will be used, and for other file types the tip left pixel (0,0) will be used. Animated cursors are not currently supported in Gecko-based browsers. If you specify an animated GIF, then the first frame will be used. If, for any reason, one cursor in the list cannot be used in the current environment, then the next one in the list will be used. However, if the last entry in the list is not a standard cursor keyword, then the whole list is ignored. Webkit based browsersI can't find a list of rules for Safari or Chrome, but anything that works in Firefox seems to work.Presto based browsersI can't find a list of rules for Opera, and can't get anything to work. Any attempt at using a custom cursor list causes the whole list to be ignored. The standard cursor keywords work on their own, but not if there's a "url()" in the list.Windows versionsTranslucent cursors are not supported in Windows versions prior to XP.Cursors larger than 32*32 pixels are not supported in Windows versions prior to XP. Mac Os XCustom cursors don't currently work on Mac Os X in Gecko based browsers.Creating CUR filesNormal image processing applications won't output CUR files. You'll need a separate dedicated CUR file editor.I happened to use ArtCursors from Aha-Soft www.aha-soft.com/artcursors. It costs $39.99 and comes with a 30 day trial period. There are several similar looking shareware programs at fairly similar prices. Alternatively, you could try downloading ready-made cursors from one of the many "free cursor" sites. I recommend deactivating Javascript and other active content before you go searching for such sites. The active content on some of those sites is extremely annoying. Custom cursors outside the mapYou can use custom cursors on any HTML element by using the same type of cursor list in a CSS "cursor:" style setting.Standard cursor keywordsStandard cursors are "auto", "crosshair", "default", "help", "move", "pointer", "text", "wait", and in some environments "hand", "progress", "not-allowed", "no-drop", "vertical-text" and "all-scroll".Changing cursors dynamicallyYou can change the cursors of a GDraggableObject at any time with .setDraggableCursor() and .setDraggingCursor(). With API versions up to v2.92 you can only set the map cursors with the {draggableCursor} and {draggingCursor} options at the time that you create the map.It is possible to change the cursors of a map dynamically by using the .getDragObject() Method. map.getDragObject().setDraggableCursor("crosshair");
The map cursors are actually owned by the GDraggableObject that is used to control the dragging of the map and its contents.
|