Phiên bản đầy đủ: jsB@nk » CSS » Các loại con trỏ chuột bằng CSS
URL: https://www.javascriptbank.com/custom-css-cursors-index.html
Bằng cách dùng CSS, bạn có thể tạo ra nhiều con trỏ chuột khác nhau trên trang web của mình. Đây là bộ sưu tập đầy đủ các con trỏ chuột mà IE6+ hỗ trợ cùng với phần hướng dẫn cách thay đổi các con trỏ chuột tùy vào các sự kiện.
Phiên bản đầy đủ: jsB@nk » CSS » Các loại con trỏ chuột bằng CSS
URL: https://www.javascriptbank.com/custom-css-cursors-index.html
<style><!--.samplediv {BORDER-RIGHT: gray 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: gray 1px solid; PADDING-LEFT: 5px; MARGIN-BOTTOM: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: gray 1px solid; WIDTH: 65%; PADDING-TOP: 5px; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #ffffe1}--></style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE id=table1 cellSpacing=0 cellPadding=0 width="98%" border=0> <TR> <TD vAlign=top align=left> <DIV style="FLOAT: right"> </DIV> <P></P> <P>Below lists all the available values for the CSS property "cursor" (as of CSS2.1):</P> <DIV align=left> <TABLE cellSpacing=0 cellPadding=2 width="95%" border=1 id="table2"> <TBODY> <TR> <TD vAlign=top bgColor=#73d656><B>Icon</B></TD> <TD vAlign=top width=100 bgColor=#73d656><STRONG>Value</STRONG></TD> <TD vAlign=top bgColor=#73d656><STRONG>Live example (move mouse over box)</STRONG></TD> <TD vAlign=top width=80 bgColor=#73d656><B>Browser</B></TD></TR> <TR> <TD vAlign=top> </TD> <TD vAlign=top width=100>auto</TD> <TD vAlign=top><I>The User Agent determines the cursor to display based on the current context.</I></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=29 src="cursor-default.gif" width=25 border=0></TD> <TD vAlign=top width=100><STRONG style="FONT-WEIGHT: 400">default</STRONG></TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: default">style="cursor: default;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=29 src="cursor-hand.gif" width=25 border=0></TD> <TD vAlign=top width=100>hand</TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: hand">style="cursor: hand;"</DIV></TD> <TD vAlign=top width=80>IE</TD></TR> <TR> <TD vAlign=top><IMG height=29 src="cursor-hand.gif" width=25 border=0></TD> <TD vAlign=top width=100>pointer</TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: pointer">style="cursor: pointer;"</DIV></TD> <TD vAlign=top width=80>NS6/ IE6</TD></TR> <TR> <TD vAlign=top><IMG height=29 src="cursor-hand.gif" width=25 border=0></TD> <TD vAlign=top width=100>hand & pointer</TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: hand">style="cursor: pointer; cursor: hand;"</DIV></TD> <TD vAlign=top width=80>Cross browser</TD></TR> <TR> <TD vAlign=top><IMG height=23 src="cursor-crosshair.gif" width=25 border=0></TD> <TD vAlign=top width=100>crosshair</TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: crosshair">style="cursor: crosshair;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=24 src="cursor-text.gif" width=17 border=0></TD> <TD vAlign=top width=100>text </TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: text">style="cursor: text;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=29 src="cursor-wait.gif" width=25 border=0></TD> <TD vAlign=top width=100>wait </TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: wait">style="cursor: wait;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=29 src="cursor-help.gif" width=30 border=0></TD> <TD vAlign=top width=100>help </TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: help">style="cursor: help;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top> </TD> <TD vAlign=top width=100><SPAN class=value-inst-inherit>inherit</SPAN></TD> <TD vAlign=top><I>Takes on its parent element's computed cursor value.</I></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=28 src="cursor-move.gif" width=24 border=0></TD> <TD vAlign=top width=100>move </TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: move">style="cursor: move;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=19 src="cursor-eresize.gif" width=26 border=0></TD> <TD vAlign=top width=100>e-resize</TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: e-resize">style="cursor: e-resize;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=28 src="cursor-neresize.gif" width=23 border=0></TD> <TD vAlign=top width=100>ne-resize</TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: ne-resize">style="cursor: ne-resize;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=24 src="cursor-nwresize.gif" width=26 border=0></TD> <TD vAlign=top width=100>nw-resize</TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: nw-resize">style="cursor: nw-resize;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=24 src="cursor-nresize.gif" width=17 border=0></TD> <TD vAlign=top width=100>n-resize</TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: n-resize">style="cursor: n-resize;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=24 src="cursor-seresize.gif" width=26 border=0></TD> <TD vAlign=top width=100>se-resize</TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: se-resize">style="cursor: se-resize;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=28 src="cursor-swresize.gif" width=23 border=0></TD> <TD vAlign=top width=100>sw-resize</TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: sw-resize">style="cursor: sw-resize;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=24 src="cursor-sresize.gif" width=17 border=0></TD> <TD vAlign=top width=100>s-resize</TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: s-resize">style="cursor: s-resize;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=19 src="cursor-wresize.gif" width=26 border=0></TD> <TD vAlign=top width=100>w-resize</TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: w-resize">style="cursor: w-resize;"</DIV></TD> <TD vAlign=top width=80>All</TD></TR> <TR> <TD vAlign=top><IMG height=28 src="cursor-progress.gif" width=31 border=0></TD> <TD vAlign=top width=100>progress </TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: progress">style="cursor: progress;"</DIV></TD> <TD vAlign=top width=80>IE6</TD></TR> <TR> <TD vAlign=top><IMG height=27 src="cursor-all-scroll.gif" width=34 border=0></TD> <TD vAlign=top width=100><SPAN class=clsLiteral>all-scroll</SPAN></TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: all-scroll">style="cursor: <SPAN class=clsLiteral>all-scroll</SPAN>;"</DIV></TD> <TD vAlign=top width=80>IE6</TD></TR> <TR> <TD vAlign=top><IMG height=20 src="cursor-col-resize.gif" width=22 border=0></TD> <TD vAlign=top width=100><SPAN class=clsLiteral>col-resize</SPAN></TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: col-resize">style="cursor: <SPAN class=clsLiteral>col-resize</SPAN>;"</DIV></TD> <TD vAlign=top width=80>IE6</TD></TR> <TR> <TD vAlign=top><IMG height=40 src="cursor-no-drop.gif" width=40 border=0></TD> <TD vAlign=top width=100><SPAN class=clsLiteral>no-drop</SPAN></TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: no-drop">style="cursor: <SPAN class=clsLiteral>no-drop</SPAN>;"</DIV></TD> <TD vAlign=top width=80>IE6</TD></TR> <TR> <TD vAlign=top><IMG height=24 src="cursor-not-allowed.gif" width=24 border=0></TD> <TD vAlign=top width=100><SPAN class=clsLiteral>not-allowed</SPAN></TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: not-allowed">style="cursor: <SPAN class=clsLiteral>not-allowed</SPAN>;"</DIV></TD> <TD vAlign=top width=80>IE6</TD></TR> <TR> <TD vAlign=top><IMG height=23 src="cursor-rowresize.gif" width=24 border=0></TD> <TD vAlign=top width=100><SPAN class=clsLiteral>row-resize</SPAN></TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: row-resize">style="cursor: <SPAN class=clsLiteral>row-resize</SPAN>;"</DIV></TD> <TD vAlign=top width=80>IE6</TD></TR> <TR> <TD vAlign=top><IMG height=32 src="mycursor.gif" width=32 border=0></TD> <TD vAlign=top width=100><SPAN class=clsLiteral>url(uri)</SPAN></TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: url('mycursor.cur')">style="cursor: <SPAN class=clsLiteral>url(mycursor.cur)</SPAN>;" <P><I>Note: Only <B>.cur</B> and <B>.ani</B> file types are supported as of IE6.</I></P></DIV></TD> <TD vAlign=top width=80>IE6</TD></TR> <TR> <TD vAlign=top><IMG height=25 src="cursor-vertical-text.gif" width=32 border=0></TD> <TD vAlign=top width=100><SPAN class=clsLiteral>vertical-text</SPAN></TD> <TD vAlign=top> <DIV class=samplediv style="CURSOR: vertical-text">style="cursor: <SPAN class=clsLiteral>vertical-text</SPAN>;"</DIV></TD> <TD vAlign=top width=80>IE6</TD></TR></TBODY></TABLE></DIV> <P>Using the "cursor" property is like with any CSS property- simply apply it to the desired element. Here are a few examples:</P> <P><B>Example #1:</B></P><PRE style="background-color: #efefef"><style type="text/css">body{cursor: url(mycursor.cur)}</style></PRE> <P>This changes the default arrow cursor of a webpage to a custom image instead.</P> <P><B>Example #2:</B></P><PRE style="background-color: #efefef"><div style="cursor: move; width: 200px; height: 200px"></div><a href="help.htm" style="cursor: help;">Help</a></PRE>In this second example, the entire DIV has a cursor of "move", and the link that follows, a "help" cursor. <H3><IMG height=17 src="Red_CurlyC035.gif" width=16 border=0> Changing the cursor dynamically using JavaScript</H3> <P>As if the above isn't enough, you can change the cursor on the fly using JavaScript (as with most CSS properties). Simply use the syntax:</P><PRE style="background-color: #efefef">element.style.cursor="new_cursor_value"</PRE> <P><B>Example #3 (disable text selection on the page): </B>This last example disables text selection on the page in IE5+, and to make the process more intuitive, changes the cursor to "not allowed" while the user is dragging the mouse to try and select text:</P><PRE style="background-color: #efefef"><body onSelectStart="this.style.cursor='not-allowed'; return false;"onMouseup="this.style.cursor='default'"></PRE> <P><!--webbot bot="HTMLMarkup" startspan --></P> <DIV onmouseup="this.style.cursor='default'" onselectstart="this.style.cursor='not-allowed'; return false;" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 150px; BORDER-BOTTOM: black 1px solid; HEIGHT: 150px; BACKGROUND-COLOR: lightblue">Simulated example. Try dragging inside this DIV. IE5+ required. </DIV><!--webbot bot="HTMLMarkup" endspan i-checksum="26360" --> <P></P> <P>And with that we come to an end of the tutorial.</P> <P align=right> </P></TD></TR></TABLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->