« »

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.

Étiquette: Custom CSS Curseurs

Rapport de nous cette erreur JavaScript

Demo
Agrandir
Recharger
New window

Gratuit iPage hébergement Web pour la première année MOMENT

Si vous êtes toujours à la recherche d'un fournisseur d'hébergement Web fiable avec des tarifs abordables, pourquoi vous ne prenez pas un peu de temps pour essayer iPage, seulement avec $1.89/month, inclus $500+ Crédits supplémentaires gratuites pour le paiement de 24 mois ($45)?

Plus de 1.000.000 de clients + existisng peuvent pas avoir tort, vraiment vous n'êtes pas aussi! Plus important encore, lorsque vous enregistrez l'hébergement web à iPage grâce à notre lien, nous allons être heureux de renvoyer un plein remboursement. C'est génial! Vous devriez essayer iPage hébergement web GRATUITEMENT maintenant! Et contactez-nous pour tout ce que vous devez savoir sur iPage. Essayez iPage GRATUIT première année MOMENT

Code
CSS
HTML
Imprimer

Copy All x2

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

Copy All x2

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

Commentaire (0)
Écrire

par Avant-première

Annuler réponse

Écrivez votre commentaire

Commentaires du client sera publié avant previwed
Donnez votre email réel pour obtenir des réponses notification ou commentaire sera supprimé

Votre nom *
Votre e-mail^g *
~~Votre site~~

Comment's Titre

J'assure à 100% je suis humain réel
Je le répète, je ne suis pas bot

Sent (0)
Nouveau

BBCode
HTML
URL
JID

iPhoneKer.com
Save up to 630$ when buy new iPhone 15

GateIO.gomymobi.com
Free Airdrops to Claim, Share Up to $150,000 per Project

https://tooly.win
Open tool hub for free to use by any one for every one with hundreds of tools

chatGPTaz.com, chatGPT4.win, chatGPT2.fun, re-chatGPT.com
Talk to ChatGPT by your mother language

Dall-E-OpenAI.com
Generate creative images automatically with AI

AIVideo-App.com
Render creative video automatically with AI

Cool Domains for Sale!

javascriptbank.com javascripton.com gomy.mobi gomymobi.com this.bid ChainTutor.com ChatTotal.com CryptoKD.com CreditCard.rip choose.works YeuNu.com ABP3.com choose.exchange system.money Card.rip eChainBank.com ApexBTC.com CoinHolo.com XMQV.com pornID.net index.services war.money CTRCoin.com ZWVQ.com

Déposer jours:
Auteur:
Previews:
Commentaire:
Votes:
Sent:
Taille:
Rang:

30/01/2007
JavaScript Kit [more]
6,934
0
9
0
15.58 KBytes

JavaScript Custom CSS Curseurs - JID: 1287 - Langue: Française

2.2/5 9 votes / 6,934 previews / 0 commentaire 30/01/2007 L'utilisation de CSS, vous pouvez changer le curseur de l'icÃ´ne par dÃ©faut associÃ©e Ã un Ã©lÃ©ment particulier, en s...JavaScript Custom CSS Curseurs - JID: 1287 - Custom CSS Curseurs - Langue: Française

canhzz123 hoangha2010[2] anhtuan_tt08 dinhtuvu harryhana quanstar I Love Java black08 tdtrinh dnahera