Here you will find "HOW TOs" that cover a wide field : from how to clean your hard drive to how to make macaroni salad. Life for the normal guy would be easier if he has some book or website of HOW TOs. Every day we come face to face with simple obstacles that could frustrate us if we do not know how to jump over them. This Blog is intended to assist and at the same time entertain people who, like me, has the need to know how to tweak everyday snags so that they become advantages.

Home » Post Item » How To Change Your Cursor Using HTML Code

How To Change Your Cursor Using HTML Code

March 27, 2008

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.  Following are the steps involved in changing your website cursor.

  1. 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 cursor 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 cursor will not require much additional loading time and will only last as long as your website is open.

  1. 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 cursor 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.
  2. Decide what you want from your cursor.  Most of the time, the webmaster that is implementing a new cursor is not aiming for functionality.  Cursors 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 cursor will change to an hourglass (or clock, etc.) while the website is searching, and then back to a normal cursor 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 cursors 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.

  3. 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 webpage 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 a cursor, and then provide you with a section of code which you can paste on your website as they instruct you to.
  4. . . . 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 image file into a 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 cursor 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 cursor even more unique by using the appropriate software and your own images.  Have fun and be creative!

 

 


Posted by howto at 4:07 pm | permalink

Add a comment








About Me

I am just a normal dude who happens to love collecting and sharing knowledge.

WidgetBox

Subscribe

Technorati
Bloglines

AdBrite

Message Board

Latest Movies Online:

Just Droppin by :) Keep it up blogger. Just sharing my latest movies Online blog :) .

Mayweather vs Pacquiao:

Mayweather vs Pacquiao Fight, News and Updates

arnel canones:

hello good day pwede ba tayo mag exchange link ito ung link ko http://arn07.i.ph aasahan ko ung reply u sa email ko ito and email. add ko caritaya@yahoo.com thanks.

Gem:

How are you? I hope you could write “how to” make myself happy! Just kidding!

iceah:

have a great weekend c:

casandra:

wnna see more….. click now the url

Cidz:

hi Kuya Nel! Lagi naa koy entrecard kaso dili nako mabutangan og pic. , gi resize naman nako pero dili gyapon mag fit..Mao blank sya..hehe! Kay ice yata nako ni click or sa imoha..kay nakita nako sa uban naa sila ani kaya gibutangan na lang sab nako akoa..=) God bless u cuz!

berryblitz:

hi :) di ba may bayad ang i.ph???

tochi3:

nakakakilig naman ang how to initiate a first kiss!!!

renan:

hello how are you? want to earn money without blog needed try to visit my site http://theseason.i.ph and find earn3.com, foxcash,net and isabalmacro.com try to click my banner and be my referal just clicking other site you can earn as much as 1 dollar per day..

Cidz:

nice blog

crissy:

thanks for dropping by…

renan:

thanks sa pag link..link ko din lahat ng blog mo..

support:

Congratulations, you’ve just completed the installation of this shoutbox.

support:

Hi! Your shoutbox is working fine!

Leave a message ▼

SiteMeter

BlogCatalog

RevResponse

Ads Here

MyBlogLog

RevResponse

Pinoy

Ads Here

Ad Engage

RevResponse