[b]Description:[/b] This script adds a custom cursor to your webpage using an interchangeable image. The result is a custom mouse cursor that can be modified in anyway your graphic skills take you. Elegant and non intrusive effect! Script tested in IE6+, Firefox 1.x+, and Opera 8+. [url=http://profiles.friendster.com/85975975][b][color=green]PREVIEW[/color][/b][/url] [b]Step 1:[/b] Download one of the below images to be used as your custom cursor image ([i]or create your own![/i]): [img]http://i43.tinypic.com/e5lk3p.jpg[/img][img]http://i42.tinypic.com/2ymwz2g.gif[/img] [b]js code:[/b] [quote][spoiler]var skinableCursor = { skinPath : '[b]IMAGE OF CURSOR[/b]', IE : ( document.all && document.getElementById && !window.opera ), FF : (!document.all && document.getElementById && !window.opera), OP : (document.all && document.getElementById && window.opera), 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 } }, 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; } }, 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); } } }, 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); }, 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); }, getMousePosition : function (e) { e = e ? e : window.event; var position = { 'x' : e.clientX, 'y' : e.clientY } return 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; }, 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();[/spoiler][/quote] [b]Credits:[/b] Webtoolkit.info

Last edited by aidenlive (2009-01-03 21:05:43)