Warning: include(/home/.lurky/jenni/star-girl.org/skins/cookiecheck.php) [function.include]: failed to open stream: No such file or directory in /home/jenni/star-girl.org/pages/tutorials/csscgi/cursors.php on line 1

Warning: include() [function.include]: Failed opening '/home/.lurky/jenni/star-girl.org/skins/cookiecheck.php' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/csscgi/cursors.php on line 1

Warning: include() [function.include]: Filename cannot be empty in /home/jenni/star-girl.org/pages/tutorials/csscgi/cursors.php on line 2

Warning: include() [function.include]: Failed opening '' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/csscgi/cursors.php on line 2
Cursor Effects

These only work in Internet Explorer (I think), and they also vary depending on what version of Windows you have, but it's always nice to customise as much as you can of your site to make it look more original :)

1. To make only one specific link have a cursor effect, use this code:

<a href="HTTP://YOUR-LINK.COM" style="cursor:CURSOR-NAME">Link</a>

2. If you want all the links on your page to include the cursor, use this:

<!-- A:link{COLOR: 000000; TEXT-DECORATION: none; font-weight: normal;} A:visited{COLOR: 000000; TEXT-DECORATION: none; font-weight: normal;} A:active{COLOR: 000000; TEXT-DECORATION: none; font-weight: normal;} A:hover{COLOR: 000000; TEXT-DECORATION: none; cursor:CURSORNAME;} --><STYLE type="text/css"> <!-- A:link{COLOR: 000000; -text-decoration: none;} A:visited{COLOR: 000000; text-decoration: none;} A:active{COLOR: 000000; text-decoration: none;} A:hover{COLOR: 000000; text-decoration: none; cursor:CURSOR-NAME;} --> </STYLE>

3. Or, if you want the cursor to show up all the time, not just when you hover over a link use this:

<!-- A:link{COLOR: 000000; TEXT-DECORATION: none; font-weight: normal;} A:visited{COLOR: 000000; TEXT-DECORATION: none; font-weight: normal;} A:active{COLOR: 000000; TEXT-DECORATION: none; font-weight: normal;} A:hover{COLOR: 000000; TEXT-DECORATION: none; cursor:CURSORNAME;} --><STYLE type="text/css"> <!-- A:link{COLOR: 000000; -text-decoration: none; cursor:CURSOR-NAME;} A:visited{COLOR: 000000; text-decoration: none; cursor:CURSOR-NAME;} A:active{COLOR: 000000; text-decoration: none; cursor:CURSOR-NAME;} A:hover{COLOR: 000000; text-decoration: none; cursor:CURSOR-NAME;} --> </STYLE>

3. You need to change CURSOR-NAME to one of the following words. You can hover over the links to see the different cursors; if they don't work for you then you won't see them in your browser:

crosshair
default
hand
help
move
s-resize
e-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
text
wait

Note: You only need to put the beginning and end parts of your CSS code once on a page. So if you use more than one bit of code on your page it will look like this: <style type="text/css"> Code Code Code </style>
Warning: include() [function.include]: Filename cannot be empty in /home/jenni/star-girl.org/pages/tutorials/csscgi/cursors.php on line 66

Warning: include() [function.include]: Failed opening '' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/csscgi/cursors.php on line 66