DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Cursor Object For Easily Changing Cursor Based On An Event.

04.01.2008
| 9505 views |
  • submit to reddit
        Uses the prototype.js library version 1.6.  Prior to this version to access the "event" you must use Event.element(event).  

Cursor Object with event driven functions to quickly change the cursor based on an event.

<html>
<head>
    <script type="text/javascript" src="/path/to/prototype.js"></script>
    <script type="text/javascript">

        var Cursor = {
            pointer:function(event){
                //Event.element(event)  *** Prior to prototype 1.6 ***
                event.element().setStyle({cursor:"pointer"});
            },
        
            normal:function(event){
                event.element().setStyle({cursor:"crosshair"});
            },
        
            auto:function(event){
                event.element().setStyle({cursor:"auto"});
            },
        
            crosshair:function(event){
                event.element().setStyle({cursor:"crosshair"});
            },
        
            move:function(event){
                event.element().setStyle({cursor:"move"});
            },
        
            e_resize:function(event){
                event.element().setStyle({cursor:"e-resize"});
            },
        
            ne_resize:function(event){
                event.element().setStyle({cursor:"ne-resize"});
            },
        
            n_resize:function(event){
                event.element().setStyle({cursor:"n-resize"});
            },
        
            se_resize:function(event){
                event.element().setStyle({cursor:"se-resize"});
            },
        
            sw_resize:function(event){
                event.element().setStyle({cursor:"sw-resize"});
            },
        
            s_resize:function(event){
                event.element().setStyle({cursor:"s-resize"});
            },
        
            w_resize:function(event){
                event.element().setStyle({cursor:"w-resize"});
            },
        
            text:function(event){
                event.element().setStyle({cursor:"text"});
            },
        
            wait:function(event){
                event.element().setStyle({cursor:"wait"});
            },
        
            help:function(event){
                event.element().setStyle({cursor:"help"});
            },
        
            progress:function(event){
                event.element().setStyle({cursor:"progress"});
            }
        }

        Event.observe(window, "load", function(){
            $("example").observe("mouseover", Cursor.pointer.bindAsEventListener(Cursor));

            //Could also be:
            $("example").observe("mouseover", function(event){
                Cursor.pointer(event);
            });
        });
    </script>
<body>
    <div id="example">Cursor should switch from arrow to "Pointer" on mouseover</div>
</body>
</html>