Enabling custom cursors in a web page can result in an aesthetically pleasing effect that greatly enhances the user experience. With some strategically placed style commands embedded into the HTML (HyperText Markup Language) of the page, the cursor can become a stylish compliment to the overall design.
Things You'll Need
- A web browser (such as Internet Explorer or Mozilla Firefox)
- A text editor (such as Notepad)
Decide which cursor to use on the web page and where it will activate. The web developer may want a new cursor active throughout the entire page to match a style or theme. On the other hand, web designers often activate new cursors only when a user moves the pointer over a particular place in the page (such as a specific link or picture) to emphasize information.
Open the HTML file in the text editor. When or where the cursor activates will dictate where to navigate in the code. To make the cursor the default for the entire web page, navigate to the "body" section of the file. (The body section is enclosed within the <body></body> HTML tags.) To activate the cursor over a specific element, navigate to that element in the document. For example, if the desired cursor should activate over a paragraph of text, then insert the code in the paragraph element (<p></p>) containing the text. For instance, this code contains both the body and paragraph tags:
<body><p>This is a crosshair page</p></body>
If using a cursor for the entire page, insert the code to change the cursor in the "body" element. For example, if the cursor will change to the crosshair over the entire page, then the "body" element will look similar to this:
<body style="cursor: crosshair"><p>This is a crosshair page</p></body>
When interpreted by a web browser, this code within a web page will use a crosshair pointer (See Reference 1).
If changing the cursor for a particular location in the page, insert the code in the tags containing the element. For example, changing the cursor over the displayed paragraph of text in a web page rather than the entire page would look similar to this:
<body ><p style="cursor: crosshair">This is a crosshair page</p></body>
Now the cursor will only change to a crosshair when hovering over the text (See Reference 1).
Tips & Warnings
- The designer can provide images for cursors rather than using the ones provided by default (such as the crosshair cursor). Web cursors are stored with the ".cur" file extension (which are available for free download from numerous websites). To use a downloaded cursor, save the ".cur" file in the same directory as the HTML file. Then, alter the "style" code used to change the cursors to reference the file, similar to this:
- <body ><p style="cursor: url('filename.cur)">This is a custom cursor page page</p></body>
- Now, when the cursor hovers over the text "This is a custom cursor page," the mouse pointer will change into "filename.cur" image (See Reference 2).
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...
How to Change a Mouse Cursor With JQuery
If you are performing a task in jQuery that will require the user to wait for a second or more, you might...