How to Make a Picture Follow the Cursor in CSS

Save

The cursor that appears when you move your mouse on your website displays a default image, such as a hand or arrow, but you can change it to the picture of your choice. Using Cascading Style Sheets (CSS), you assign a graphic to your cursor so that it follows the movement of your mouse and replaces the default image. Use your computer's text editor program to apply the CSS that modifies your cursor.

  • Log in to the Web host account that manages your website files. Upload the picture you want to use for your cursor in the same folder that contains your website's main index file.

  • Launch your text editor program and type this CSS code before the ending </head> tag:

    <style type="text/css">
    body { }
    </style>

    The body rule enables you to apply a picture to the cursor that appears on your Web page.

  • Type "cursor: url( )" inside the body rule's curly brackets. Type the cursor image file name between the parenthesis like the following example:

    body { cursor: url(cursorpic.gif) }

  • Save your file. Your complete CSS looks now looks like this:

    <style type="text/css">
    body { cursor: url(cursorpic.gif) }
    </style>

  • Upload your file to your Web host. Your website cursor now displays the picture.

Tips & Warnings

  • Cursor images are typically 16 or 32 pixels wide by 16 or 32 pixels high. Use your computer's MS Paint program to resize your picture when you need to.

References

  • Photo Credit Comstock/Comstock/Getty Images
Promoted By Zergnet

Comments

Resources

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!