Dierk's page
 
 

Home
Anicursor
Cologne/Köln
Photos
Dierk-Cam
Particulars
Awards
Excel-Tools
Anigifs


To favorites
Guestbook

Search forms


search page
search site
search web

 
English
English
Tutorial Deutsche Version
Deutsch

How to use your own cursor on your website

Preface:
This tutorial only explains how to insert cursor code
into CSS or HTML. It cannot explain the basics of CSS
or HTML. To learn more about CSS and HTML look for
general tutorials or explications available on the web.

There's a FAQ section at the end of this webpage too

With Microsoft Internet Explorer 6 or 7 you can use your own animated or static cursor on your webpage instead of the standard system cursor. All you have to do is add a little code to your HTML-documents or the CSS-stylesheet and upload the cursor file (*.ani or *.cur) to the webserver. Every websurfer using Internet Explorer 6 then will see your own cursor in his browsers web window displaying your webpage. By the way, outside the browsers web window, for example over scrollbars or browser buttons, or on the normal windows desktop one will see the normal system cursor only.

There are several ways to include your own cursors on a webpage instead of the standard cursor. In the examples below I have named the cursor-file "cursor.ani". You have to exchange the cursor-file name on your webpage with the name of your own cursor-file only. There is no need to change other code parts as long as you store the cursor file in the same directory where you have stored the html-files.

Exchange only the cursor-file name (red marked) in code! Example:

<BODY style="CURSOR: url('cursor.ani')">

Upload HTML-page with the cursor code and your cursor-file to your webserver, same directory ...

In case the cursor file is stored on another server (HTML-pages and cursor-file on different servers) you have to include the entire webadress of the cursor-file in the cursor-code. Example with a domain named www.example.com:

<BODY style="CURSOR: url('http://www.example.com/cursor.ani')">

OK, and now here are the different ways to include the cursor code in your webpage:

 

1. Include some CSS-code in each of your webpages

The own cursor appears only on the webpages where you have included the code

a) CSS somewhere between the <HEAD>-tags:

- for the normal pointer
  (appears on normal website including images, not over links)

<HEAD>
<style type="text/css">
<!--
body {cursor: url('cursor.ani');}
-->
</style>
</HEAD>
<style type="text/css"> <!-- body {cursor: url('cursor.ani');} --> </style>
- or for the link cursor )
  (appears over links)

<HEAD>
<style type="text/css">
<!--
a {cursor: url('cursor.ani');}
-->
</style>
</HEAD>
<style type="text/css"> <!-- a {cursor: url('cursor.ani');} --> </style>
- combine both
  (you can use different cursor files too):

<HEAD>
<style type="text/css">
<!--
body {cursor: url('cursor.ani');}
a {cursor: url('cursor.ani');}
-->
</style>
</HEAD>
<style type="text/css"> <!-- body {cursor: url('cursor.ani');} a {cursor: url('cursor.ani');} --> </style>
b) Code in <BODY>-tag

Own cursor appears on the webpage including images, not over links. You only have to add the following code to the <BODY>-tag:
style="CURSOR: url('cursor.ani')"
So the entire <BODY>-tag looks like the following example:
<BODY style="CURSOR: url('cursor.ani')">
In case there are already other additional codes in the <BODY>-tag, for example for background color, it looks like the following example:
<BODY BGCOLOR="#eeefff" style="CURSOR: url('cursor.ani')">

style="CURSOR: url('cursor.ani')"
2. Insert code in your CSS stylesheet (*.css-file)

The own cursor appears on all webpages which receive their CSS definitions from this central stylesheet

Insert the cursor code

cursor: url('cursor.ani');
in the stylesheet, for example:

- for the body (including images too, not links):

body {cursor: url('cursor.ani');}
body {cursor: url('cursor.ani');}
- for links:
a {cursor: url('cursor.ani');}
a {cursor: url('cursor.ani');}
- for images:
a img {cursor: url('cursor.ani');}
a img {cursor: url('cursor.ani');}
3. Insert code in a link tag:

The own cursor appears while touching this link
<a href="test.html" style="cursor:url('cursor.ani')">Example-page</a>
This is a test link with my own cursor

style="cursor:url('cursor.ani')"

4. Insert code in an image tag:

The own cursor appears over this image

<img src="image.jpg" style="cursor:url('cursor.ani')">
Test picture:

style="cursor:url('cursor.ani')"

Ranking of CSS-definitions:
The CSS-definitions in the central CSS-stylesheet are effective for all documents.
The CSS-definitions inside the webpages <HEAD>-tags are having priority over the definitions in the CSS-stylesheet.
The CSS-definitions in an image tag or a link tag are having priority over the definitions inside the webpages <HEAD>-tags

So you can define a standard cursor for all webpages in the CSS-stylesheet and select another cursor for one of your webpages in the webpages CSS-definitions inside the <HEAD>-tags or the image tags or link tags.

 

Topics
- Exact Code 1          
- Exact Code 2
- Exact Code 3
- Code / Linux
- Cursor on Layer
- Code for busy/hourglass   
- Cursor upload            
- myspace, friendster, piczo ...
- Frameset
FAQ webcursors
Code
Q:   I'm trying to use a cursor that I made to display when you visit my website. Here is the code that I am using & it points to the correct directory on my site.
BODY{cursor: url(http://www.example.com/cursor.ani);}
a {cursor: url(http://www.example.com/cursor.ani);}
Am I doing something wrong w/ the code? Or maybe my .ani file wasn't made correctly?
A:   The code looks good so far, excepted one thing. Please don't forget to put all the links between the ' signs. Instead
BODY{cursor: url(http://www.example.com/cursor.ani);}
you have to take
BODY{cursor: url('http://www.example.com/cursor.ani');}
The code should work then ...
to top
Code / Layer
Q:   I have downloaded an animated cursor that I wish to use over Layers on my site. However, it doesn't appear over the layers I have added to the page.
A:   You can run a cursor using the body-code and this cursor should appear on all parts of the page. But since a layer you have added to the webpage is another layer than the main page itself you cannot "overwrite" or replace the main/normal layer and it's cursor. This means you cannot have another cursor than the main cursor over a layer. The cursor codes only work with the standard tags (img, a, body ...) on the main layer.
to top
Code / Linux
Q:   I have a linux server. I put a cursor I created on it and when i try to call to it with CSS
body
{cursor: url(http://www.example.com/extra/stunt.ani);}
it doesn't work it this possibly because it is a linux server?
A:   No, windows or linux, both should work. Well, you're on the right way. You have to put the following code into your CSS stylesheet file:
body
{cursor: url('http://www.example.com/extra/stunt.ani');}
In your own example there aren't the ' before http and after ani and therefore it doesn't work. You can make it more short too if the html and css files are in the same directory as the cursor file:
body
{cursor: url('stunt.ani');}
Or in case the html and css files are in the root directory and the cursor file in the directory "extra":
body
{cursor: url('extra/stunt.ani');}
This should work ...
to top
Code
Q:   Ok for the "How to use your own cursor on your website" page...i tried to use that code on my website but it wouldn't work so i was just making sure i had the code right...ok between the <HEAD> tags i put this exact code for the curser
<style type="text/css">
<!-- body {cursor:  
http://www.example.com/curser.cur('curser.cur');}
-->
</style>
but i still didn't get the cursor i wanted on my page so do u have ne idea how to fix this?
A:   You have to put the following code somewhere between the <HEAD> tags for a cursor file named "curser.cur":
<style type="text/css">
<!-- body {cursor: url('curser.cur');} -->
</style>
The "url" in the code is only a special code term where you don't have to enter the web-adress. Then just upload the curser.cur file to the same web directory where you have stored the htm file ... This should work ...
to top
Code / busy, hourglass
Q:   I run a web-site and have customized three .ani cursors for pointer, links, and wait/progress. I've found your recommendation for html for pointer and links, i.e. and that works fine, but what about the hourglass/busy/wait/progress .ani? How are these defined? I would be most grateful for your help!
A:   This will not work ... Hourglass, busy ... are system cursors for the entire windows system (desktop, programs, webbrowser) and this own cursors on webpages are cursors which appear only on webpages and because of special code in the webpage. You can assign the cursors to html-objects only (img, body, a href) and not to windows stats such as busy or waiting. There's unfortunately no code available which changes the hourglass, busy ... cursors on webpages ...
to top
Upload
Q:   I cannot upload my cursor file to my server, it says it's not allowed ...
A:   Yes, that's possible, some server providers (especially most no cost providers) don't allow some file formats such as *.ani or *.cur. There are two solutions only. You have to search another provider who allows cursor file upload or try fo find a friend who is able to save the cursor file on his server and then link to his server in the code on your webpage.
to top
Code
Q:   I've tried the cursor thing over and over. I uploaded it to several of my own websites. Well, when I try to view it to get the URL address it shows up on my puter. No URL address. This is the code used on the message board I'm on.
Body {cursor: URL('cursor.ani');}
and that's correct. Then i was told i had to upload it to my own website. None of em work. I can't come up with the url. What do i do? Just put this in? 050.cur and that's it?
A:   This "url" in the code only says that the url is following between the signs ('    ') from the actual document to the stored cursor file. In case the cursor file is in the same webdirectory on your server as the html files you only have to replace the cursor filename cursor.ani with the name of your own cursor file. Otherwise (different folders or another server) you have to include the entire address / path.
In every case the name must be included in the two ' signs, 'cursor.ani' or '050.cur' in your example.
So the code should be:
body {cursor: url('050.cur');}
in your stylesheet file (*.css) in case cursor file is in the same directory as html-file... In case it's on another server, for example www.example.com:
body {cursor: url('http://www.example.com/050.cur');}
to top
myspace, friendster, piczo, xanga
Q:   Is it possible to add my own cursor to my myspace / friendster / piczo webpage ?
A:   Yes, that's possible. Only one problem. This providers don't allow the upload of cursor files. So you need webspace where you can store your cursor and then you have to link to the cursor on this webspace in the cursor code - see FAQ above too. There are several webservices offering cursors stored on their servers for myspace, piczo and others, for example setupmyspace.com.

In the examples below a cursor file named cursor.ani is stored on a server named www.example.com as an example:

myspace
Go to your profile page
Select "Edit profile"
Go to tab "Interests & Personality"
Select "About Me"
Select "Edit"
Enter cursor code there:


<style type="text/css">
<!--body {cursor: url('http://www.example.com/cursor.ani');}-->
</style>
You can add your normal "about me" text for your page there too ...
Click "preview"
Click "submit"
Ready ...

friendster
Go to your profile page
Select "edit profile"
On page "my profile" go to tab "Customize"
In section "advanced users css" enter the cursor code:

body {cursor: url('http://www.example.com/cursor.ani');}
Save it ...

piczo
Select tab "Page editor"
On tab "Tools" select "Text" In "Add Text" box enter cursor code:


<style type="text/css">
<!--body {cursor: url('http://www.example.com/cursor.ani');}-->
</style>
You can add normal text for your page there too ...
Click OK
Ready ...

xanga
Go to your account page
Select "Look & feel"
Go to section "Website Stats"
Enter cursor code there:


<style type="text/css">
<!--body {cursor: url('http://www.example.com/cursor.ani');}-->
</style>
Click "Save Changes"
Ready ...

to top
Frameset
Q:   I have search alot to find a cursor who can handle frames. Is it possible to add a custom cursor in a frameset??
A:   Yes, you can add your own cursors to pages with frameset. But you cannot add the code to the frameset-file itself, you have to include it in the single frame-files. There you include the code as you do it with normal html files without frames ...
to top

Anicursor
Anicursor startpage
Tutorial
Create your own cursors

 
  © Dierk 1995-2017   -   optimized for MSIE and 800x600px   -   last modified: -