Fancy Graphic CrossHair Cursor

[Total: 0    Average: 0/5]

This script will add a fancy custom crosshair mouse cursor to your website.

Head Code:

<script>
/**
*
*  skinable crossbrowser cursor
*  http://www.webtoolkit.info/
*  http://www.webtoolkit.info/javascript-crosshair-mouse-cursor.html
*
**/

var skinableCursor = {


    // public property. Skin path. You can change this one.
    skinPath : 'http://www.js-examples.com/data/ex_1114/skin.gif',


    // private properties. Browser detect. Do not touch! 🙂
    IE : ( document.all && document.getElementById && !window.opera ),
    FF : (!document.all && document.getElementById && !window.opera),
    OP : (document.all && document.getElementById && window.opera),


    // private properties. Cursor attributes. Do not touch! 🙂
    cursor : {
        lt : { x : '0px',   y : '0px', w : '19px',  h : '26px' ,  dx : -22, dy : -22 },
        rt : { x : '19px',  y : '0px',    w : '26px', h : '19px' , dx : -3, dy : -22 },
        rb : { x : '26px',  y : '19px',   w : '19px',    h : '26px' ,    dx : 4,  dy : -3 },
        lb : { x : '0px',   y : '26px',    w : '26px', h : '19px' , dx : -22,    dy : 4 }
    },


    // private method. Initialize
    init : function () {

        skinableCursor.cursor.browserDelta = (skinableCursor.IE ? 2 : 0);

        if ( skinableCursor.FF || skinableCursor.OP ) {
            document.addEventListener("DOMContentLoaded", skinableCursor.domReady, false);
        }

        if ( skinableCursor.IE ) {

            document.write("<scr" + "ipt id=__ieinit defer=true " +
                "src=//:></script>");

            var script = document.getElementById("__ieinit");
            script.onreadystatechange = function() {
                if ( this.readyState != "complete" ) return;
                this.parentNode.removeChild( this );
                skinableCursor.domReady();
            };

            script = null;
        }
    },


    // private method.
    domReady : function () {

        skinableCursor.create();

        if ( skinableCursor.FF || skinableCursor.OP ) {
            var s = document.createElement('style');
            s.innerHTML = '* { cursor: inherit; } html { height: 100%; } body, html { cursor: crosshair; }';
            document.body.appendChild(s);
            document.addEventListener('mousemove', skinableCursor.move, false);
        }

        if ( skinableCursor.IE ) {
            var s = document.createStyleSheet()
            s.addRule("*", "cursor: inherit");
            s.addRule("body", "cursor: crosshair");
            s.addRule("html", "cursor: crosshair");
            document.attachEvent('onmousemove', skinableCursor.move);
        }

        var anchors = document.getElementsByTagName('a');
        for (x = 0; x < anchors.length; x++) {
            if ( skinableCursor.FF || skinableCursor.OP ) {
                anchors[x].addEventListener('mousemove', skinableCursor.events.anchor, false);
                anchors[x].addEventListener('mouseout', skinableCursor.events.show, false);
            }

            if ( skinableCursor.IE ) {
                anchors[x].attachEvent('onmousemove', skinableCursor.events.anchor);
                anchors[x].attachEvent('onmouseout', skinableCursor.events.show);
            }
        }

    },


    // private method. Create cursor
    create : function () {

        function create(el, d) {
            el.style.position = 'absolute';
            el.style.overflow = 'hidden';
            el.style.display = 'none';
            el.style.left = d.x;
            el.style.top = d.y;
            el.style.width = d.w;
            el.style.height = d.h;
            if ( skinableCursor.IE ) {
                el.innerHTML = '<img src="' + skinableCursor.skinPath + '" style="margin: -' + d.y + ' 0px 0px -' + d.x + '">';
            } else {
                el.style.background = 'url(' + skinableCursor.skinPath + ') -' + d.x + ' -' + d.y;
            }
            return el;
        }

        var c = skinableCursor.cursor;
        c.lt.el = create(document.createElement('div'), c.lt);
        c.rt.el = create(document.createElement('div'), c.rt);
        c.rb.el = create(document.createElement('div'), c.rb);
        c.lb.el = create(document.createElement('div'), c.lb);

        document.body.appendChild(c.lt.el);
        document.body.appendChild(c.rt.el);
        document.body.appendChild(c.rb.el);
        document.body.appendChild(c.lb.el);

    },


    // private method. Move cursor
    move : function (e) {

        function pos(el, x, y) {
            el.el.style.left = x + el.dx + 'px';
            el.el.style.top = y + el.dy + 'px';
        }

        function hide(el, x, y) {
            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;
            var deltaX = w - (x + el.dx + parseInt(el.w) - skinableCursor.cursor.browserDelta);
            var deltaY = h - (y + el.dy + parseInt(el.h) - skinableCursor.cursor.browserDelta);
            if (!skinableCursor.noSkin) {
                el.el.style.display = deltaX > 0 ? (deltaY > 0 ? 'block' : 'none') : 'none';
            }
        }

        var p = skinableCursor.getMousePosition(e);
        var s = skinableCursor.getScrollPosition();
        var c = skinableCursor.cursor;
        var x = p.x + s.x - c.browserDelta;
        var y = p.y + s.y - c.browserDelta;

        hide(c.lt, p.x, p.y);
        hide(c.rt, p.x, p.y);
        hide(c.rb, p.x, p.y);
        hide(c.lb, p.x, p.y);

        pos(c.lt, x, y);
        pos(c.rt, x, y);
        pos(c.rb, x, y);
        pos(c.lb, x, y);

    },


    // private method. Returns mouse position
    getMousePosition : function (e) {

        e = e ? e : window.event;
        var position = {
            'x' : e.clientX,
            'y' : e.clientY
        }

        return position;

    },


    // private method. Get document scroll position
    getScrollPosition : function () {

        var x = 0;
        var y = 0;

        if( typeof( window.pageYOffset ) == 'number' ) {
            x = window.pageXOffset;
            y = window.pageYOffset;
        } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
            x = document.documentElement.scrollLeft;
            y = document.documentElement.scrollTop;
        } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
            x = document.body.scrollLeft;
            y = document.body.scrollTop;
        }

        var position = {
            'x' : x,
            'y' : y
        }

        return position;

    },


    // private property / methods.
    events : {

        anchor : function (e) {
            skinableCursor.noSkin = true;
            document.body.style.cursor = 'pointer';

            var c = skinableCursor.cursor;
            c.lt.el.style.display = 'none';
            c.rt.el.style.display = 'none';
            c.rb.el.style.display = 'none';
            c.lb.el.style.display = 'none';

        },

        show : function () {
            skinableCursor.noSkin = false;
            document.body.style.cursor = 'crosshair';
        }

    }

}

skinableCursor.init();
</script>

Body Code:

This script will add a fancy custom crosshair mouse cursor to your website. You can modify this custom mouse cursor script anyway you want to add functionality and special effects.<BR>
<BR>
You can even change the shape and color of the mouse cursor by changing the image (skin) file.<BR>
Usage:<BR>
You just need to include the script at top of your code (you can find the code in the source code section of this page).

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *