Custom Cursor Script
Description:Using CSS, you can specify your own image for the browser to use as the cursor! The image will replace the default "arrow" one. Properly done, a custom cursor can bring furthered consistency to your site's design.
Note that the image must be of the type .ico for maximum browser compatibility. In FF and Chrome, you can utilize a .png file, though the format unfortunately isn't supported in IE as of IE11.
Demo: You should see a custom cursor in place of the default arrow one for the BODY of the element.
Directions: Simply add the below style sheet to the HEAD section of your page to change the default BODY cursor with a custom one instead. Change BODY to antoher element if you wish the custom cursor to target a more specific set of elements, such as links only (A):
where "mousecursor.ico" is the name of your cursor file and in the same directory as where the page resides. You can change the keyword "BODY" to localize the cursor to a subelement within the page, such as "P". Here is the ico used in the demo in PNG format:
Creating the custom cursor
Ok, so you're probably sweating it right now on how to create the actual cursor file. You can search sites like IconFinder to locate a suitable .ico image, or what I prefer to do is first create an icon in .png format, then convert it to .ico using an online converter such as this one.