Subscribe to our RSS

Create Custom Cursors without .cur File

Tags: , ,

Create Custom Cursors without .cur File

Sometimes you may want to replace your cursor with a custom image or use a custom image to move with your cursor. This quick JavaScript tutorial will show you how to implement it.
The task is pretty simple. At first we should hide the default cursor for the section where we will display our custom one. Our custom cursor will actually be a DIV with an image on the background. We will use JavaScript to change the position of this DIV when the user moves the mouse over the section.

The markup

<div id="test-area">
     Move mouse over this area.
</div>
<div id="mycursor"></div>

The #test-area will be the section with our custom cursor to appear and the #mycursor will be the actual DIV with the custom cursor image. Here are a few lines of CSS code to stylize the markup:

#test-area {
     height: 200px;
     border: 3px dashed #CCCCCC;
     background: #FFFFFF;
     padding: 20px;
     cursor: url(./blank.cur), none;
}
#mycursor {
     cursor: none;
     width: 97px;
     height: 137px;
     background: url("/article-sources/images/pointer-cursor.gif") no-repeat left top;
     position: absolute;
     display: none;
     top: 0;
     left: 0;
     z-index: 10000;
}

The code (we hope) is crystal clear but let’s stop to review one aspect. In the #test-area you see the ‘cursor: …’ declaration. We will use this to hide the default browser cursor. The easiest way to do so is to load a blank cursor (you may download it here), but this unfortunately will not work in Chrome & Opera. It will display a black rectangle in Chrome and a default pointer cursor in Opera. But since this tutorial covers other important aspects related to cursor behavior (such as how to handle mouse movement, etc.), it is still a useful topic to cover for those just starting to learn JavaScript programming. So, let’s continue ;).

The finishing part is to add a few lines of JavaScript code for jQuery to make our arrow follow the cursor.

<script type="text/javascript">
     $(document).ready(function(){
          $('#test-area').mouseout(function(){
               $('#mycursor').hide();
               return >false;
          });
          $('#test-area').mouseenter(function(){
               $('#mycursor').show();
               return >false;
          });
          $('#test-area').mousemove(function(e){
               $('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
          });
});
</script>

That’s it ;) Click the Demo button to view it in action.

John

April 16, 2012

For Macs, you need mouseleave instead of mouseout, since it fires the mouseout when the mouse becomes idle.

YES

March 27, 2012

perfect.

shawn, you’re absolutely right – but for those of us who need cursors larger than 128×128px, this is the way.

thanks!

Shawn

September 26, 2011

Curious to know why you wouldn’t just make (blank.cur) the actual cursor image (pointer-cursor.cur) ? Javascript wouldn’t even be required.

Erick Jones

July 29, 2011

Hello, great article, but I shall tell you that there is a mistake in this javaScript you provided. There is a “return > false” and the right sintaxe should be just “return false” as the demo page source. Thank you!

raphael

July 27, 2011

Apparently there is another problem …
In FF 5.0.1 on OS X the custom cursor results in a hidden system cursor after leaving the custom cursor trigger-area. Maybe it would help to include a default cursor rule inside the body element. Haven’t tried it yet but it should do the trick.

oyoboy

March 7, 2011

sir can you make a cutomize “vegetable” text following the cursor and it’s rotating please!
i need it on my html project !

kbflymry

February 16, 2011

I can see this in the browser but it won’t work when i download the source. Does the cursor image have to be the same size as the one you are referencing? It’s a relative link.

ajaxBlender.com

December 22, 2010

Hello Djakjdkadsj!
Please clarify what browser you use?

djakjdkadsj

December 20, 2010

my computer didn’t react differently it just showed my css code instead of having a picture follow my mouse

tylik

August 24, 2010

Thanks Probably the problem is that you didn’t use the right software to create custom .cur image

Leave a comment

Your name

July 24, 2014

Spam protection. Enter result of expression you see in the box below.

4 + 5 =