Changes between Initial Version and Version 1 of CodeSamples/JavaScript/CustomCursors

Timestamp:

03/18/08 08:52:05 (17 years ago)

Author:

ksgeograf

Comment:

--

CodeSamples/JavaScript/CustomCursors

@@ +1 @@
+{{{
+
+[[PageOutline]]
+
+This page is one of the !MapGuide Community CodeSamples.  Visit the CodeSamples page to view more!
+
+}}}
+
+== Displaying custom cursors in the AJAX viewer ==
+
+This page describes how to modify the AJAX viewer for WebLayouts to display a custom cursor when the user has selected one of the zoom tools.
+The code and files here have been posted to the !MapGuide mailing list, but frequent requests indicate that a more formal description will be appreciated.
+
+== Modifying the AJAX viewer ==
+The javascript/html for the AJAX viewer can be found in the WebExtensions installation directory, which is usually at:
+C:\Program Files\MapGuideOpenSource\WebServerExtensions\www\viewerfiles
+
+The first file to modify is the "toolbar.templ", which has code for handling button clicks on the toolbar.
+Simply add the folowing code inside the body tag:
+
+{{{
+#!text/html
+<script type="text/javascript">
+/* Custom icon handler */
+function changeIcon(action){
+        var cururl = "http://localhost/mapguide/stdicons/";
+        var map = parent.mapFrame.document.getElementById("map");
+        switch(action)
+        {
+                case 1:
+                        map.style.cursor = cururl + "icon_pan.cur"
+                        break;
+                case 7:
+                        map.style.cursor = cururl + "icon_zoomin.cur"
+                        break;
+                case 8:
+                        map.style.cursor = cururl + "icon_zoomout.cur"
+                        break;
+                case 9:
+                        map.style.cursor = cururl + "icon_zoomrect.cur"
+                        break;
+                default:
+                        map.style.cursor = 'default';
+                        break;
+        } 
+        
+}
+</script>
+}}}
+
+Inside the same file is the actual handler for button clicks, called !OnCommandExecuted.
+Modify !OnCommandExecuted to also change the cursor:
+{{{
+#!text/html
+function OnCommandExecuted(action)
+{
+        changeIcon(action)
+        .....
+        .....
+        .....
+}
+}}}
+
+Finally, place the .cur files in the folder where the viewer files reside, or change the path int the !changeIcon method above.
+The cursor files are attached to this post.
+
+Original code by Jackie Ng.