How to Create Custom Animated HTML/DHTML or CSS Mouse Cursors
Creating an animated mouse cursor for your website is doable in a number of ways, the easiest of which is by using a custom image file and basic CSS and HTML code. Make sure you understand the risks beforehand: many of your visitors will not appreciate a mouse cursor that doesn't look like they expected it to look--especially if it's being animated in a way that's distracting. Additionally, some cursor techniques don't work on certain browsers. But if you're sure you want to do it, the tools are there.
Other People Are Reading
Instructions
-
-
1
Locate an animated GIF file you'd like to use for your mouse cursor, or create your own and save it to your computer.
-
2
Download and install the freeware program AniTuner (see "Resources").
-
-
3
Open the GIF file in AniTuner and convert it to a file with the ANI extension. Save it as "cursor.ani."
-
4
Upload cursor.ani to your web server.
-
5
Open your CSS style sheet to add the following line:
body { cursor:url('cursor.ani'); }
In place of "cursor.ani," use the entire URL of the file: for example, "http://yoursite.com/images/cursor.ani."
-
6
Save the file and refresh your website. Note that custom animated cursors don't work in a few browsers such as certain editions of Opera and Safari. However, you can use a number of built-in images instead of your custom image; see W3 Schools (see "Resources") for a list of other image options and browser compatibility issues.
-
1
