»
AnglaisFranaisVietnamien

Imprimer - Custom CSS Curseurs - JavaScriptBank.com

Version complte: jsB@nk » CSS » Custom CSS Curseurs
URL: http://www.javascriptbank.com/custom-css-cursors-index.html

Custom CSS Curseurs © JavaScriptBank.comL'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 complte: jsB@nk » CSS » Custom CSS Curseurs
URL: http://www.javascriptbank.com/custom-css-cursors-index.html



CSS
<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-->


HTML
<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 &quot;cursor&quot; (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>&nbsp;</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=&quot;cursor: default;&quot;</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=&quot;cursor: hand;&quot;</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=&quot;cursor: pointer;&quot;</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 &amp; pointer</TD>          <TD vAlign=top>            <DIV class=samplediv style="CURSOR: hand">style=&quot;cursor: pointer; cursor: hand;&quot;</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=&quot;cursor: crosshair;&quot;</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=&quot;cursor: text;&quot;</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=&quot;cursor: wait;&quot;</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=&quot;cursor: help;&quot;</DIV></TD>          <TD vAlign=top width=80>All</TD></TR>        <TR>          <TD vAlign=top>&nbsp;</TD>          <TD vAlign=top width=100><SPAN             class=value-inst-inherit>inherit</SPAN></TD>          <TD vAlign=top><I>Takes on its parent element&#39;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=&quot;cursor: move;&quot;</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=&quot;cursor: e-resize;&quot;</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=&quot;cursor: ne-resize;&quot;</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=&quot;cursor: nw-resize;&quot;</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=&quot;cursor: n-resize;&quot;</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=&quot;cursor: se-resize;&quot;</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=&quot;cursor: sw-resize;&quot;</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=&quot;cursor: s-resize;&quot;</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=&quot;cursor: w-resize;&quot;</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=&quot;cursor: progress;&quot;</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=&quot;cursor: <SPAN             class=clsLiteral>all-scroll</SPAN>;&quot;</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=&quot;cursor: <SPAN             class=clsLiteral>col-resize</SPAN>;&quot;</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=&quot;cursor: <SPAN             class=clsLiteral>no-drop</SPAN>;&quot;</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=&quot;cursor:             <SPAN class=clsLiteral>not-allowed</SPAN>;&quot;</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=&quot;cursor: <SPAN             class=clsLiteral>row-resize</SPAN>;&quot;</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=&quot;cursor: <SPAN             class=clsLiteral>url(mycursor.cur)</SPAN>;&quot;            <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=&quot;cursor:             <SPAN class=clsLiteral>vertical-text</SPAN>;&quot;</DIV></TD>          <TD vAlign=top width=80>IE6</TD></TR></TBODY></TABLE></DIV>      <P>Using the &quot;cursor&quot; 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">&lt;style type=&quot;text/css&quot;&gt;body{cursor: url(mycursor.cur)}&lt;/style&gt;</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">&lt;div style=&quot;cursor: move; width: 200px; height: 200px&quot;&gt;&lt;/div&gt;&lt;a href=&quot;help.htm&quot; style=&quot;cursor: help;&quot;&gt;Help&lt;/a&gt;</PRE>In this second example, the entire DIV has a cursor of &quot;move&quot;, and the link that follows, a &quot;help&quot; 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&#39;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=&quot;new_cursor_value&quot;</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 &quot;not allowed&quot; while the user is dragging the mouse to try and select text:</P><PRE style="background-color: #efefef">&lt;body onSelectStart=&quot;this.style.cursor=&#39;not-allowed&#39;; return false;&quot;onMouseup=&quot;this.style.cursor=&#39;default&#39;&quot;&gt;</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>&nbsp;</P></TD></TR></TABLE><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->