There are plenty of reasons to add flair to your website: presentation, graphical representation of an idea, or just fun. Changing the cursor (what is traditionally displayed as a white arrow controlled by your mouse) is just one of many changes that can be made, but it is an interesting one. It offers many unique options to the webmaster. Once you understand how to change it using HTML code, you can experiment more to find the look you are trying to achieve. Following are the steps involved in changing your website mouse cursor.
Understand how changing your cursor works. Most of the time, when implementing some sort of change to a website (vanity or otherwise), it is wise to understand what the change actually does. Changing the mouse cursors on your webpage involves an alteration of the <body> tag, a fundamental HTML tag which is part of the backbone of any page and which sandwiches between itself and its ending </body> tag most of the written and coded content of your webpage. The icon itself will be an image in the .cur format which will be hosted on your webspace or on an outside source (if you use an icon hosted someplace other than your webspace, it is courteous to give credit through a small note somewhere on your website). The custom cursor will not require much additional loading time and will only last as long as your website is open.
Understand the limitations of changing your cursor. The truth about changing your website cursor is that the only browser that really supports this alteration is Internet Explorer, and for the most part, only Versions 5.5 and above. Changing the cursors in most other browsers is simply not possible. What we can assume to be part of the reason for this is that the Windows operating system allows you to change your desktop cursor very freely. Microsoft most likely recognized a demand for this customization and implemented it into their web software as well.
Decide what you want from your cursor. Most of the time, the webmaster that is implementing a new cursor is not aiming for functionality. They are often a vanity customization, though sometimes they improve the visual scheme of a website in a useful and professional way. For instance, on websites with a search function, it is common that the mouse pointer or cursor will change to an hourglass (or clock, etc.) while the website is searching, and then back to normal when the search is finished. However, the cursor is not always employed to the end of useful visual representation.
Often, the webmaster simply wishes to change his cursor to match his website more closely or to pay homage to a certain character or concept. The cursors that are then employed can sometimes be clunky, and many websurfers will find them unsightly and awkward. However, some look different than the traditional arrow without compromising usability. Crosshairs and variations on the traditional arrow can accomplish the goal of looking different and are unobtrusive.
Ostentatious cursors (such as those that are block-shaped, graphics of animals, etc.), even with a clearly defined arrow in them, may still annoy the user somewhat. However, others may find them fun or amusing. You cannot please everyone; the decision is ultimately up to you.
Find a website that provides what you want. Most of the time, it is the easiest to find a website that supplies custom cursors and the code that you must paste in the HTML of your web page in order for them to function. To use a website in implementing a new cursor, simply find one like those listed under Recommended Links, and follow their easy instructions. They will allow you to choose one, and then provide you with a section of code which you can paste on your website as they instruct you to.
. . . or do it yourself! You can create your own cursors as well. To do this, you will need two things: a program like GConvert which will allow you to create .cur files, and a place to upload your .cur file. You can create a graphic file and using GConvert (and the instructions found at GdgSoft), turn your change cursor image file into a new cursor. The software and the tutorial help you to import an image, define a "hotspot" on the image (the section of your cursor that reacts when you click something), and save the image as a .cur file. Once you have created your cursor (saved in the .cur format) and uploaded it to your webspace, you can specify the location of your file using the "style" attribute of the <body> tag in your web page as follows:
style="cursor:url(thelocationofyourfile.cur);"
So that the body tag looks like this:
<body style="cursor:url(thelocationofyourfile.cur);">
Replace "thelocationofyourfile.cur" with the location of your cursor file as a URL. Be sure that you are using a valid cursor (.cur) file.
The above is all the information you need to spice up your webpage with a new and unique cursor. You can take the convenient route by choosing one of thousands of cursors already offered (along with source code) online, or you can put in a little extra study and make your own even more unique by using the appropriate software and your own images. Have fun and be creative!
Caution:If you create your own cursors, make sure that the "hotspot" is located in a logical place.
Use frivolous cursors for fun; don't bungle up a professional page with a one.
Quick Tips:Create functional cursors that don't frustrate the user.
