Tutorial: Getting a Crosshair Cursor
Updated:Ever wanted to know how to get a crosshair cursor on your web page-- or just a different cursor altogether? Then check out this mini-tutorial.
 |
Sometimes you may have come across a web site where you saw the arrow cursor turn into this for a cursor over any link.
How was this done? With good, ol' CSS. If you don't know CSS at all, no problem. I can show you a small snippet of code you can use that is very easy to remember and will get you this effect.
How is it done?
All you have to do is insert this bit of code [below, in dark red] inside of your <head></head> tag:<head>That's it! Now the arrow cursor will turn into a crosshair whenever someone mouses over any link on your home page.
<style>
<!--
a {cursor:crosshair;}
-->
</style>
</head>
Other options
Option one: eliminating arrow cursor entirelyThis is cool, of course. But what if you want to have the crosshair appear as the default cursor of your web site and eliminate the arrow cursor entirely? Then you would add one small additional bit to your coding ["body,"]:
<head>Option two: causing selected links to trigger crosshair
<style>
<!--
body, a {cursor:crosshair;}
-->
</style>
</head>
What if you only want the crosshair for specific links, and not for the entire page? Then only put this bit of code inside every <a href></a> tag where you want the crosshair to appear:
<a href="page.html" style="cursor: crosshair;">