How to Make Cursor Codes for Your Mouse

Change the cursor appearance on your Web page.

You don't have to settle for the default cursor set when designing your Web pages. With a few lines of CSS and HTML code, you can choose which built-in cursors show up on a visitor's screen for a particular action. You can even design and use your own cursors if you are artistic or have access to suitable images. Assigning a class to each cursor instance gives you complete control over which cursor images appear and when.

Instructions

1. Open the HTML source code in a text editor.

2. Define the CSS style type in the "head" section of the code with the tag:

   <style type="text/css">

3. Define a class and assign a cursor to it with the statement:

   .crosshair{ cursor: crosshair }

4. Close the "style" section with the closing tag:

   </style>

5. Assign the class to the desired tag inside. Inside the "body" section of the code with the class statement:

   <p class="crosshair">Place your cursor over this paragraph for the crosshair effect</p>

6. Save the file and close your text editor.

Tips & Warnings

• When using a custom cursor, specify the url location inside the class definition following the example:

• .custom{ cursor: url(http://www.mysite.com/cursors/custom.gif), auto}

References

• Quackit: HTML Cursor Code