worry solve adsen

Saturday, 15 November 2014

CSS Cursors


Microsoft Internet Explorer 4+ and Netscape 6+ supports customized cursors defined with CSS.

Although the cursors will not have the customized look in other browsers it usually doesn't ruin anything. These browsers will simply show the normal arrow-cursor which would be same case as if you refrained from customizing cursors at all.

So unless the page really doesn't work without the customized cursor there shouldn't be technical reasons for choosing not to.

However there might be other reasons for thinking twice before adding custom cursor to your pages. Many users are easily confused or irritated when a site breaks the standard user interface.



CURSOR PROPERTIES

LookValuesLookNSIEExample
cursor-sampledefaultTEST6+4+cursor:default
cursor-samplecrosshairTEST6+4+cursor:crosshair
cursor-samplehandTEST4+cursor:hand
cursor-samplepointerTEST6+cursor:pointer
cursor-sampleCross browserTEST4+cursor:pointer;cursor:hand
cursor-samplemoveTEST6+4+cursor:move
cursor-sampletextTEST6+4+cursor:text
cursor-samplewaitTEST6+4+cursor:wait
cursor-samplehelpTEST6+4+cursor:help
cursor-samplen-resizeTEST6+4+cursor:n-resize
cursor-samplene-resizeTEST6+4+cursor:ne-resize
cursor-samplee-resizeTEST6+4+cursor:e-resize
cursor-samplese-resizeTEST6+4+cursor:se-resize
cursor-samples-resizeTEST6+4+cursor:s-resize
cursor-samplesw-resizeTEST6+4+cursor:sw-resize
cursor-samplew-resizeTEST6+4+cursor:w-resize
cursor-samplenw-resizeTEST4+4+cursor:nw-resize

cursor-sample		progressTEST6+cursor:progress

cursor-sample		not-allowedTEST6+cursor:not-allowed

cursor-sample		no-dropTEST6+cursor:no-drop

cursor-sample		vertical-textTEST6+cursor:vertical-text

cursor-sample		all-scrollTEST6+cursor:all-scroll

cursor-sample		col-resizeTEST6+cursor:col-resize

cursor-sample		row-resizeTEST6+cursor:row-resize

cursor-sample		cursor:url(uri)TEST 6+cursor:url(uri)

4P:problems, 4M:Mac only, 4W:Windows only



ADDING A CUSTOMIZED CURSOR

The syntax for a customized cursor is this:
(Position the mouse over each link to see the effect)

Selector {cursor:value}

For 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>
</b>
</body>
</html>



The links from the above example would look like this:

CROSS LINK

HELP LINK




REDEFINING THE CURSOR FOR ENTIRE PAGES

If you want to redefine the cursor so that it's not only showing up when moved over a link, you simply specify the desired cursor using the body-selector.

For example:

<html>
<head>
<style type="text/css">
body {cursor:crosshair}
</style>
</head>

<body>
<b>
SOME TEXT
<br>
<a href="mypage.htm">ONE LINK</a>
<br>
<a href="mypage.htm">ANOTHER LINK</a>
</b>
</body>
</html>


Click here to open a window that shows the result of the above example.



REDEFINING THE CURSOR FOR AREAS ON A PAGE

If you want one look of the cursor in one area of the page and another look of the cursor in another area you can do it with context dependant selectors.

This way, you create different styles for links, that are dependant on the context. Now if the context is set with a dummy tag, such as <span> you don't have to specify the desired style each and every time there is a link in the section.

For example:

<html>
<head>
<style type="text/css">
.xlink A{cursor:crosshair}
.hlink A{cursor:help}
</style>
</head>

<body>
<b>
<span class="xlink">
<a href="mypage.htm">CROSS LINK 1</a><br>
<a href="mypage.htm">CROSS LINK 2</a><br>
<a href="mypage.htm">CROSS LINK 3</a><br>
</span>
<br>
<span class="hlink">
<a href="mypage.htm">HELP LINK 1</a><br>
<a href="mypage.htm">HELP LINK 2</a><br>
<a href="mypage.htm">HELP LINK 3</a><br>
</span>
</b>
</body>
</html>



The links from the above example would look like this:

CROSS LINK 1
CROSS LINK 2
CROSS LINK 3
HELP LINK 1
HELP LINK 2
HELP LINK 3
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)