Home free resume creator resume directory job search Business Card Creator Slogans Arcade Games Games For Your Site Webmaster Tools Free Fonts Archive Skins, Styles & Themes Freeware Jokes Riddles Greeting Cards Desktop Wallpaper Web Page Creator Contact Us

Your source for fun, free games-services-software

How to Use Cursors on Webpages Tutorial

freeware cursors windows xp How to Use Cursors on Webpages Tutorial for Internet Explorer use our collection of freeware cursors to jazz up your web pages using our tutorial with simple step by step instructions. Our tutorial with simple instructions to use cool cursors on webpages will make your pages more usable and have cool rollover effects without using javascript.

Free Skins | Free Fonts | Free Clipart | Free Logo Creator | Play Free Games

use cursors on webpages
The PCman's How to Use Cursors on Webpages Tutorial
Download Free Cursors | How to Install Windows Cursors

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 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 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 | 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:

Test it!

Here is the code for it:
<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 whatever 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 isn't compatible with Mozilla and Firefox and pointer is, they are the same looking cursor. See our example:

Original Cursor:

Modified Cursor:

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 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('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. 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.

So to get this image cursor thing done...
  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! :)

New features are always added so check back often.

ssl seal the pcman website
Testimonials About Privacy Terms Search Site Map Link To Us
F-r-e-e Business Cards Clipart Archive Win our Award Add A Link Classified Ads Guestbook Free Stuff
Game Sites Online Magazines Advertising Computer Repair Blog The PCman's Store
Stay on top with The PCman's free career services.
Get the latest news and downloads.