SQL PHP HTML JavaScript articles and free code
 
 

Mouse Cursor image change by using style sheet

We can change the appearance of mouse cursor depending on our requirement by using style sheet. We will try to declare locally the style of the cursor and based on that the cursor shape will change. This is required to give a better picture to our visitors. For example mouse over on a help link should change the cursor to help picture. If we are displaying a map for our visitors and wants our visitor to click any portion of the map to enlarge ( zoom ) it then it is better to use cross hair cursor. Here are some examples of different types of cursor and there style code to display them. Move your mouse over the right side cell ( link ) to see the change in cursor shape.



<a href=# style=cursor:crosshair;>Crosshair</a>  Crosshair
<a href=# style=cursor:text;>text</a>  Text
<a href=# style=cursor:wait;>wait</a>  Wait
<a href=# style=cursor:move;>move</a>  Move
<a href=# style=cursor:help;>help</a>  Help
<a href=# style=cursor:default;>default</a>  Dafault
<a href=# style=cursor:hand;>hand</a>  hand


Discuss this tutorial at forum

List of HTML Tutorials

CSS: Cascading Style Sheets
Advantage of using CSS
Cascading Style Sheets
Types of Cascading Style Sheets and their priority distribution
Removing Underline from links by CSS
Fonts style control using Cascading Style Sheets
Body tag style properties in external style sheet
Header tag style properties in external style sheet
Mouse over effects of links using CSS
Links using CSS
Mouse Cursor shape or style control by Cascading Style Sheets

 

Subscribe
Submit your email address and receive article and product notifications. Your email is safe with us.

Scripts
PHP
JavaScript
List of HTML Tutorial
HTML Tags
Color Chart
HTML Calendar
Tags on web page
Web Design
Subscribe
Submit your email address and receive article and product notifications. Your email is safe with us.