Your source for fun, free games-web tools-freeware

How to Use Cursors on Webpages Tutorial:

Our tutorial will show you how to use cursors on your webpages 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 webserver. 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 just 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 just default to their appropriate cursor. Mouse over each to see what they look like.

crosshair | hand | help | move | e-resize | ne-resize | nw-resize | n-resize | pointer | se-resize | sw-resize | s-resize | w-resize | text | wait

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 nice to use this with a link to a faq, support or help page. You would use the style attribute part of the code and enter in what ever cursor you want to use in place of the help cursor we used. Use one of the choices from the list above. 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 it is a clickable item. If you wish to do this use the pointer cursor instead of hand because hand doesn't work with Mozilla and Firefox and pointer does they are the same looking cursor. See our example:

Adding Cursors to your Website

This part explains step by step how to add cursors to your webpages 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 just ignore it and use it's 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('http://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('http://www.yoursite.com/cursor.ani'); }
body { cursor:url('http://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. Disregard the colored background of the link. 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. Just something to keep in mind.

1. Upload your desired cursors somewhere on your server. You can download some from our free cursors section.
2. Choose whether you want whole page of single element cursors
3. Copy the code into your page as necessary.
4. Load the page in your internet Explorer 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, are not using IE browser.
6. It's pretty simple to do, good luck!!! :)