2011
03.31

Ever wanted to create Custom Cursor for different elements on your page?

It is a little known fact that although possible through CSS, custom cursors don’t work
in most browsers! what a shame.

I made this small plugin to simply enable people create custom cursors with any
image format they wish (unlike the CSS solution that makes you use .cur files, ha?!)

Example Page

all you need to do is write a small JS code:

$(document).ready(function() {
customcursor($('#smileDiv'),'smile.gif');
});

of course you can insert the line inside an already existing document.ready function

Requirements:

Download Custom Cursor Plugin

jQuery plugin Page

8 comments so far

Add Your Comment
  1. Hey! Why do you call a regular function a jQuery plugin? To be a jQuery plugin it must support the following syntax:
    $(‘#smileDiv’).customCursor(‘smile.gif’)

    There are not so many changes to do:
    jQuery.fn.customCursor = function () {
    return this.each(function () {
    /* Here you plugin code goes */
    })
    }

    Good luck!

  2. thank you

  3. Just a note: This works better if you add PPK’s function for detecting mouse position inside the mousemove event function:

    http://www.quirksmode.org/js/events_properties.html

    Seems to fix an issue where Custom Cursor doesn’t detect the correct mouse position on page scroll.

    Thanks for the script!

  4. […] I found out a way to use custom cursors using a jQuery plugin and an animated gif: http://jquery.kidsil.net/custom-cursor/. I tested it and it works well in Firefox, Chrome, and Safari but it flickers for some reason when […]

  5. Thank you very much!

  6. how can define this id to body tag and no only in divs ? thanks
    awesome plugin

  7. –>it flickers for some reason when you move the mouse in a downwards direction

    It happens because the cursor go over the animated gif (over the #mycursor image, look the code) and exit the element on which you call the function.

  8. thank you it helped me a lot