0
0
This article will discuss the CSS cursor property, The article will cover the different types of cursor by pointing on any html element (Text, Images).
In this section I will show how to change the mouse cursor icon for a few different HTML elements. Below is a list of the most commonly used cursors.
There are various categories of customized cursor, few of them are default cursor, Basic cursor, Text cursor, Resize cursor and Table cursor .
There are various ways to customize cursor, The syntax for a customized cursor is this:
Selector {cursor:value}
Following script will clear the concept of customizing the cursor on page.
Listing 1: Script to customize the cursor
<html>
<head>
<title>Mrbool.com Tutorials - Cursor</title>
<style type="text/css">
.blink {cursor:crosshair}
.clink{cursor:help}
.dlink{ cursor: pointer;}
.elink{ cursor: text; }
.flink{ cursor: move; }
.glink{ cursor: wait; }
.hlink{ cursor: help; }
.ilink{ cursor: progress; }
.jlink{ cursor: not-allowed; }
.klink{ cursor: no-drop; }
.llink{ cursor: no-vertical-text; }
.mlink{ cursor: all-scroll; }
.nlink{ cursor: col-resize; }
.olink{ cursor: row-resize; }
.plink{ cursor: e-resize; }
.qlink{ cursor: ne-resize; }
.rlink{ cursor: n-resize; }
.slink{ cursor: nw-resize; }
.tlink{ cursor: w-resize; }
.ulink{ cursor: sw-resize; }
.vlink{ cursor: s-resize; }
.wlink{ cursor: se-resize; }
</style>
</head>
<body>
<strong>
<a href="page.html" class="blink">crosshair Link point to see the action</a>
<br>
<a href="page.html" class="clink">help Link point to see the action</a>
<br>
<a href="page.html" class="dlink">pointer Link point to see the action</a>
<br>
<a href="page.html" class="elink">text Link point to see the action</a>
<br>
<a href="page.html" class="flink">move Link point to see the action</a>
<br>
<a href="page.html" class="glink">wait Link point to see the action</a>
<br>
<a href="page.html" class="hlink">help Link point to see the action</a>
<br>
<a href="page.html" class="ilink">progress Link point to see the action</a>
<br>
<a href="page.html" class="jlink">not allowed Link point to see the action</a>
<br>
<a href="page.html" class="klink"> no drop text Link point to see the action</a>
<br>
<a href="page.html" class="llink">no verticle Link point to see the action</a>
<br>
<a href="page.html" class="mlink">all scroll Link point to see the action</a>
<br>
<a href="page.html" class="nlink">coll resize Link point to see the action</a>
<br>
<a href="page.html" class="olink">row resize Link point to see the action</a>
<br>
<a href="page.html" class="plink">e resize Link point to see the action</a>
<br>
<a href="page.html" class="qlink">ne resize Link point to see the action</a>
<br>
<a href="page.html" class="rlink">n resize Link point to see the action</a>
<br>
<a href="page.html" class="slink">nw resize Link point to see the action</a>
<br>
<a href="page.html" class="tlink">w resize Link point to see the action</a>
<br>
<a href="page.html" class="ulink">sw resize Link point to see the action</a>
<br>
<a href="page.html" class="vlink">s resize Link point to see the action</a>
<br>
<a href="page.html" class="wlink">se resize Link point to see the action</a>
</strong>
</body>
</html>
Figure 1: above figure is output of script which explained the various customized cursor on page.
You can also have one appearance of the cursor in one area of the page and another appearance of the cursor in another area, there is method of doing called context dependant selectors. Here you can create different styles for links that are dependent on the context. If the related context is set with a false of dummy tag, like <span> you don’t need to mention the style each and every time there is a link in this section. Following example will clear the concept of area covering with particular cursor.
Listing 2: Script to add a cursor for particular area
<html>
<head>
<title>Mrbool.com Tutorials - Cursor</title>
<style type="text/CSS">
.alink A{cursor:crosshair}
.blink A{cursor:help}
</style>
</head>
<body>
<strong>
<p>Area below this text contains only crosshair</p>
<span class="alink">
<a href="www.facebook.com">=========</a><br>
<a href="www.facebook.com">=========</a><br>
<a href="www.facebook.com">=========</a><br>
<a href="www.facebook.com">=========</a><br>
<a href="www.facebook.com">=========</a><br>
<a href="www.facebook.com">=========</a><br>
</span>
<br>
<p>Area below this text contains only help cursor</p>
<span class="blink">
<a href="www.facebook.com">||||||||||||||||||||||||||||||||||||</a><br>
<a href="www.facebook.com">||||||||||||||||||||||||||||||||||||</a><br>
<a href="www.facebook.com">||||||||||||||||||||||||||||||||||||</a><br>
<a href="www.facebook.com">||||||||||||||||||||||||||||||||||||</a><br>
<a href="www.facebook.com">||||||||||||||||||||||||||||||||||||</a><br>
<a href="www.facebook.com">||||||||||||||||||||||||||||||||||||</a><br>
</span>
</strong>
</body>
</html>
Figure 2: Above output is showing different cursor for different areas.
Using CSS You can change the by default cursor icon attached with a particular html element, even specifying your own image instead. Change the cursor icon only when it makes sense to, such as when you're doing it to a custom module.
This tutorial covered the concept of CSS cursor. Hope it given you basic understanding and implementation idea about cursors. Go through the examples and let us know If you have any question.
See the prices for this post in Mr.Bool Credits System below: