Version complète: jsB@nk » CSS » Custom CSS Curseurs
URL: https://www.javascriptbank.com/custom-css-cursors-index.html
L'utilisation de CSS, vous pouvez changer le curseur de l'icône par défaut associée à un élément particulier, en spécifiant votre propre curseur de l'image (dans IE6 +) la place. Toutefois, avec le pouvoir vient la responsabilité. Modifier le curseur que lorsque cela a du sens, comme par exemple lorsque vous posez votre candidature à une interface personnalisée. Comme les fenêtres popup de Javascript, de changer les curseurs peuvent rapidement devenir contre-productif et irritant pour l'utilisateur.
Version complète: jsB@nk » CSS » Custom CSS Curseurs
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-->