Description:-
in this Example we create a Differant types of Cursor at Differant sitution.
The cursor property specifies the type of cursor to be displayed when pointing on an element.
For example:-
If we Have to Display a Webpage in Process Mode at that time you have to also change the cursor Type.
so this Example is very useful to change the cursor type at Differant Sitution as per Required.
Here is some property of the Cursor are as
Follow
·
E.g. equivalent to
Auto
: The browser determines the cursor to display based on the
current context.E.g. equivalent to
text when hovering
text.
·
Default:
Default cursor, typically an arrow.
·
None :no
cursor is rendered.
·
context-menu:
A context menu is available under the cursor.
·
Help:
Indicating help is available.
·
Pointer:
E.g. used when hovering over links, typically a hand.
·
Progress:
The program is busy in the background but the user can still interact with the
interface (unlike for wait).
·
Wait:
The program is busy (sometimes an hourglass or a watch).
·
Crosshair:
Cross cursor, often used to indicate selection in a bitmap.
·
Text:
Indicating text can be selected, typically an I-beam.
·
vertical-text:I
ndicating that vertical text can be selected, typically a sideways I-beam.Example:-
<html>
<head>
<style type="text/css">
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>
<body>
<b>
<a href="mypage.htm"
class="xlink">CROSS
LINK</a>
<br>
<a href="mypage.htm"
class="hlink">HELP
LINK</a>
<br>
<a href="mypage.htm"
style="cursor:hand">hand
LINK</a>
<br>
<a href="mypage.htm"
style="cursor:move">Move
LINK</a>
<br>
<a href="mypage.htm"
style="cursor:text">TeXT
LINK</a>
<br>
<a href="mypage.htm"
style="cursor:wait">Wait
LINK</a>
<br>
<a href="mypage.htm"
style="cursor:n-resize">Resize</a>
<br>
<a href="mypage.htm"
style="cursor:ne-resize">Resize2</a>
<br>
<a href="mypage.htm"
style="cursor:e-resize">Resize3</a>
<br>
<a href="mypage.htm"
style="cursor:se-resize">Resize4</a>
<br>
<a href="mypage.htm"
style="cursor:s-resize">Resize5</a>
<br>
<a href="mypage.htm"
style="cursor:sw-resize">Resize6</a>
<br>
<a href="mypage.htm"
style="cursor:progress">Process</a>
<br>
<a href="mypage.htm"
style="cursor:not-allowed">cursor:not-allowed</a>
<br>
<a href="mypage.htm"
style="cursor:no-drop">cursor:no-drop</a>
<br>
<a href="mypage.htm"
style="cursor:all-scroll">cursor:vertical-text</a>
<br>
</b>
</body>
</html>
0 comments:
Post a Comment