Your source for fun, free games-services-software

How to Use Cursors on Web pages Tutorial

Our tutorial will show you how to use cursors on your web pages with our simple step-by-step instructions. We have modified the cursors for this page by using a static cursor for the body of the page and an animated cursor for the links. This first part shows how to use cursors that are already built-into windows. The second part shows you how to use cursors that you upload onto your web server. Read both parts as we do most of the explaining in the first part.

Using custom cursors can be a nice addition to your web pages. To make it nicer you can specify one cursor to be present on the page and have it change to a different one when you mouse over a link or form element. If you don't specify a cursor for the links and form elements the browser will default to the hand with one finger pointing up for links and the arrow pointer for form buttons. For Windows users you can change certain cursors without uploading new cursors to your server such as these listed here. For other people not using Windows to view your pages their browser will ignore your code and default to their appropriate cursor. Mouse over each to see what they look like.

To use cursors in this fashion simply add this little snippet of code to the element you wish to modify. Such as this example:

<a href="cursors_on_webpages.shtml" style="cursor:help">Test it!</a>

As you can see we used the help cursor in this example. It can be helpful to use this with a link to a FAQs, support or help page. You would use the style attribute part of the code and enter in whatever cursor you want to use in place of the help cursor we used. Use one of the choices from the above list. Add this part in your code:

style="cursor:YOURCURSOR"

You can change the arrow pointer used with form buttons to the hand pointer used with links as we ourselves prefer because it confirms the element can be clicked. If you wish to do this use the pointer cursor instead of hand because hand isn't compatible with Mozilla and Firefox, and pointer is, both cursors look the same. See our example:

Adding Cursors to your Website

This part explains step-by-step how to add cursors to your web pages that are not included in windows. Here you will upload cursors to be used on your web pages. Make note of the web addresses of where you uploaded the cursor(s) you want to use. It is wise to point out that Internet Explorer is currently the only browser that supports using cursor images, all browsers support using the built-in Windows cursors. If a browser doesn't support a specified cursor it will ignore it and use its default cursor for that particular event.

To change the cursor for a single element use this method which is similar to that described above except use this code with a URL included:

style="cursor: url('https://www.yourdomain.com/cursor.cur');"

To set cursors for the whole page use this code, put it into the head tag of the page changing the URL to point to the cursors on your server:

<style><!--
a:hover { cursor: url('https://www.yoursite.com/cursor.ani'); }
body { cursor:url('https://www.yoursite.com/test.cur'); }
--></style>

You don't have to use the a:hover portion but it can provide a cool rollover effect depending upon what cursors you choose. Mouse over this link to see our cursors. See how it blinks? One tip to point out is when using image cursors don't forget that it adds to page loading time and server bandwidth usage so keep the file sizes small. If you use a cursor as a rollover image you don't want there to be a long delay between a normal page cursor and a hovering over a link cursor. This delay is something to keep in mind when authoring your website.

1. Upload your desired cursors somewhere on your server. You can download some from our free cursors section.
2. Choose whether you want to modify the cursors for the whole page or individual elements.
3. Copy the code into your page as necessary.
4. Load the page in your browser to test it.
5. If it doesn't work you spelled something wrong, put in the wrong URL, didn't upload the cursors yet, or some browsers may not use all these code options.
6. It's very simple to do and it adds a nice effect, good luck! :)