Modifier le curseur en image ou curseurs proposés en CSS/(X)html
ybouane Modifier le curseur en image ou curseurs proposés en CSS/(X)html Note : 5.8/5 (6 votes) Derniéres modifications : 16/07/2011 à 22:27:09 Mots-Clés : curseur css html cursor changer le curseur en image cursor:url(''), pointer; pointer crosshair help move text wait resize cursor normale main croix attente aide redimention Bonjour, dans ce tutoriel (X)Html, je vais vous apprendre comment modifier l'apparence du curseur(souris) sur des éléments en CSS. Pour commencer, la propriété CSS pour modifier le curseur est simplement cursor, elle peut avoir plusieurs valeurs. Grâce à la propriété CSS cursor, vous pouvez utiliser différents curseurs proposés, mais aussi une image. voici le code, essayez le, il contient les explications et les exemples: Code: (X)html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Changer le curseur(la souris) par une image ou curseurs proposés en css</title> <style type="text/css"> .curseur_normal { cursor:default; } .curseur_auto { cursor:auto; } .curseur_croix { cursor:crosshair; } .curseur_aide { cursor:help; } .curseur_move { cursor:move; } .curseur_texte { cursor:text; } .curseur_attente { cursor:wait; } .curseur_pointer { cursor:pointer; } .curseur_img { cursor:url('curseur.gif'), default; } .curseur_n { cursor:n-resize; } .curseur_s { cursor:s-resize; } .curseur_e { cursor:e-resize; } .curseur_w { cursor:w-resize; } .curseur_ne { cursor:ne-resize; } .curseur_nw { cursor:nw-resize; } .curseur_se { cursor:se-resize; } .curseur_sw { cursor:sw-resize; } </style> </head> <body> <div> <em>(survolez les lignes pour voir les effets)</em> <h1>Général</h1> <span class="curseur_normal"><strong>Curseur normal:</strong> cursor:default;</span><br /> <span class="curseur_auto"><strong>Curseur automatique:</strong> cursor:auto;</span><br /> <span class="curseur_croix"><strong>Curseur croix:</strong> cursor:crosshair;</span><br /> <span class="curseur_aide"><strong>Curseur aide:</strong> cursor:help;</span><br /> <span class="curseur_move"><strong>Curseur déplacement:</strong> cursor:move;</span><br /> <span class="curseur_pointer"><strong>Curseur main(pointeur):</strong> cursor:pointer;</span><br /> <span class="curseur_texte"><strong>Curseur texte:</strong> cursor:text;</span><br /> <span class="curseur_attente"><strong>Curseur attente(sablier):</strong> cursor:wait;</span><br /> <span class="curseur_img"><strong>Curseur image:</strong> cursor:url('adresse_de_limage'), default;</span> <h1>Redimention</h1> <span class="curseur_n"><strong>Curseur redimetion nord(haut):</strong> cursor:n-resize;</span><br /> <span class="curseur_s"><strong>Curseur redimetion sud(bas):</strong> cursor:s-resize;</span><br /> <span class="curseur_e"><strong>Curseur redimetion est(droite):</strong> cursor:e-resize;</span><br /> <span class="curseur_w"><strong>Curseur redimetion ouest(gauche):</strong> cursor:w-resize;</span><br /> <span class="curseur_ne"><strong>Curseur redimetion nord est(haut droite):</strong> cursor:ne-resize;</span><br /> <span class="curseur_nw"><strong>Curseur redimetion nord ouest(haut gauche):</strong> cursor:nw-resize;</span><br /> <span class="curseur_se"><strong>Curseur redimetion sud est(bas droite):</strong> cursor:se-resize;</span><br /> <span class="curseur_sw"><strong>Curseur redimetion sud ouest(bas gauche):</strong> cursor:sw-resize;</span><br /> <br /> <strong><em>Remarques:</em></strong><br /> <ol> <li>Les curseurs images ne fonctionnes pas sous Netscape 6.x et IE 5.x</li> <li>n-resize = s-resize</li> <li>e-resize = w-resize</li> <li>ne-resize = se-resize</li> <li>nw-resize = sw-resize</li> </ol> </div> </body> </html> Essayer On ne peut malheureusement pas mettre d'image à la place du curseur sous Internet Explorer. Pour toutes questions veuillez poser votre problème dans le forum. Merci, j'espère que vous avez aimé ce tutoriel et qu'il vous sera utile. Scripts et tutoriaux similaires à celui ci: [GD]Captcha protection anti-spam en php - captcha php gd sessions spam image Faire un input file stylé en Css (X)html et Javascript Image qui suit la souris en Javascript Parser du BBcode en (X)Html - convertir du bbcode en html/convertir du html en bbcode en utilisant les expressions réguliaires(regex) Changer l'opacité d'un div(alpha) compatibles avec tous les navigateurs Thumbnail, Miniaturiser une image en php(thumbnail) Faire un calendrier en javascript avec un effet de transparence [Tutoriel]Faire clignoter un texte en (X)html / CSS Commentaires Ajouter un commentaire Pseudo: Message: Code anti-bot: (recharger) Vous n'êtes actuellement pas connecté, certaines de vos informations(tel que votre Adresse IP) seront enregistrées pour éviter du spam. Votre message ne doit pas contenir certains mots ou une adresse internet, sinon, il ne sera pas envoyé. Les commentaires Envoyé par Jean le 10/09/2010 à 13:49:17 BOnjour, j'ai testé votre code et mrci pour ce tuto. Tout marche bien sauf l'appel de l'image. J'ai bien vérifié l'url avec Dreamweaver. Sauriez-vous pour quelle raison? J'ai essaé de remplacer: cursor:url('../deco/elephants.ani'), default; par: cursor:url('../deco/elephants.ani'), hand; Mais aucun effet. Envoyé par ybouane le 13/09/2010 à 04:09:00 Bonjour, c'est normal, les curseurs .ani ne fonctionnent pas, il faut utiliser des images .png, .gif, .jpg... Cordialement :) Envoyé par mat6901 le 26/09/2010 à 14:23:36 Bonjour peut on utiliser eds curseurs .gif ? Envoyé par ybouane le 23/10/2010 à 16:49:12 Bonjour, Oui, c'est possible. Cordialement :) Envoyé par ~Minata~ le 19/11/2010 à 19:34:25 Bonsoir, tout d'abord, j'aime beaucoup votre site ---------------- merciiii beaucoup pour tous les tutaux et tout. Mais j'ai un petit probleme avec ce code. je voudrais pas le mettre sur un site mais sur un blog(eklablog). Est-ce possible? Si oui, j'ai essayé de le faire, mais j'ai pas vraiment compris. je voulais mettre une image qui suit le curseur. L'image je l'ai chosit à partir du net, est-ce que ça marche? Merci de me répondre :) Envoyé par ~Minata~ le 20/11/2010 à 13:55:20 C'est bon, le problème vient d'être regler ^^ Envoyé par Girl5766 le 23/11/2010 à 18:34:21 Bonjour, Quand je veux mettre le curseur d'une image voici le code : <span class="curseur_img"><strong>Curseur image:</strong>cursor:url('adresse-de-l'image'), default;</span> Le l'ai mis sur le bloc notes, et voici ce que la page me donne : Curseur image:cursor:url('adresse-de-l'image'), default; Je ne comprend pas. Quelqu'un pourrait-il m'aider ? PS : j'ai enlevé le lien de l'adresse qui terminait par .gif Merci d'avance ???Girl5766??? Envoyé par eliastik59 le 20/12/2010 à 15:17:50 C'est normal, il faut mettre dans ta feuille de style css, ce code : .curseur_img { cursor:url('curseur.gif'), default; } A la place de cusrseur.gif, met l'adresse de l'image du cusreur. Envoyé par lolitaflow le 10/09/2011 à 18:47:49 Bonjour, je ne suis pas du tot douée en informatique alors je dois avouer que j'ais beaucoup de mal avec les codes; je ne sais pas comment les insérer .. En gros, je copie à partir d'ou en fait?? Envoyé par nttwlekf le 24/01/2012 à 12:30:07 20

Modifier le curseur en image ou curseurs proposés en CSS/(X)html

ybouane

Modifier le curseur en image ou curseurs proposés en CSS/(X)html
Note : 5.8/5 (6 votes)
Derniéres modifications : 16/07/2011 à 22:27:09
Mots-Clés : curseur css html cursor changer le curseur en image cursor:url(''), pointer; pointer crosshair help move text wait resize cursor normale main croix attente aide redimention

Bonjour,
dans ce tutoriel (X)Html, je vais vous apprendre comment modifier l'apparence du curseur(souris) sur des éléments en CSS.

Pour commencer, la propriété CSS pour modifier le curseur est simplement cursor, elle peut avoir plusieurs valeurs.
Grâce à la propriété CSS cursor, vous pouvez utiliser différents curseurs proposés, mais aussi une image.

voici le code, essayez le, il contient les explications et les exemples:

Code: (X)html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Changer le curseur(la souris) par une image ou curseurs proposés en css</title>

        <style type="text/css">

                .curseur_normal

                {

                        cursor:default;

                }

                .curseur_auto

                {

                        cursor:auto;

                }

                .curseur_croix

                {

                        cursor:crosshair;

                }

                .curseur_aide

                {

                        cursor:help;

                }

                .curseur_move

                {

                        cursor:move;

                }

                .curseur_texte

                {

                        cursor:text;

                }

                .curseur_attente

                {

                        cursor:wait;

                }

                .curseur_pointer

                {

                        cursor:pointer;

                }

                .curseur_img

                {

                        cursor:url('curseur.gif'), default;

                }

                .curseur_n

                {

                        cursor:n-resize;

                }

                .curseur_s

                {

                        cursor:s-resize;

                }

                .curseur_e

                {

                        cursor:e-resize;

                }

                .curseur_w

                {

                        cursor:w-resize;

                }

                .curseur_ne

                {

                        cursor:ne-resize;

                }

                .curseur_nw

                {

                        cursor:nw-resize;

                }

                .curseur_se

                {

                        cursor:se-resize;

                }

                .curseur_sw

                {

                        cursor:sw-resize;

                }

                </style>

    </head>

    <body>

        <div>

            <em>(survolez les lignes pour voir les effets)</em>

            <h1>G&eacute;n&eacute;ral</h1>

            <span class="curseur_normal"><strong>Curseur normal:</strong> cursor:default;</span><br />

            <span class="curseur_auto"><strong>Curseur automatique:</strong> cursor:auto;</span><br />

            <span class="curseur_croix"><strong>Curseur croix:</strong> cursor:crosshair;</span><br />

            <span class="curseur_aide"><strong>Curseur aide:</strong> cursor:help;</span><br />

            <span class="curseur_move"><strong>Curseur d&eacute;placement:</strong> cursor:move;</span><br />

            <span class="curseur_pointer"><strong>Curseur main(pointeur):</strong> cursor:pointer;</span><br />

            <span class="curseur_texte"><strong>Curseur texte:</strong> cursor:text;</span><br />

            <span class="curseur_attente"><strong>Curseur attente(sablier):</strong> cursor:wait;</span><br />

            <span class="curseur_img"><strong>Curseur image:</strong> cursor:url('adresse_de_limage'), default;</span>

            <h1>Redimention</h1>

            <span class="curseur_n"><strong>Curseur redimetion nord(haut):</strong> cursor:n-resize;</span><br />

            <span class="curseur_s"><strong>Curseur redimetion sud(bas):</strong> cursor:s-resize;</span><br />

            <span class="curseur_e"><strong>Curseur redimetion est(droite):</strong> cursor:e-resize;</span><br />

            <span class="curseur_w"><strong>Curseur redimetion ouest(gauche):</strong> cursor:w-resize;</span><br />

            <span class="curseur_ne"><strong>Curseur redimetion nord est(haut droite):</strong> cursor:ne-resize;</span><br />

            <span class="curseur_nw"><strong>Curseur redimetion nord ouest(haut gauche):</strong> cursor:nw-resize;</span><br />

            <span class="curseur_se"><strong>Curseur redimetion sud est(bas droite):</strong> cursor:se-resize;</span><br />

            <span class="curseur_sw"><strong>Curseur redimetion sud ouest(bas gauche):</strong> cursor:sw-resize;</span><br />

            <br />

            <strong><em>Remarques:</em></strong><br />

            <ol>

                <li>Les curseurs images ne fonctionnes pas sous Netscape 6.x et IE 5.x</li>

                <li>n-resize = s-resize</li>

                <li>e-resize = w-resize</li>

                <li>ne-resize = se-resize</li>

                <li>nw-resize = sw-resize</li>

            </ol>

        </div>

    </body>

</html>

Essayer

On ne peut malheureusement pas mettre d'image à la place du curseur sous Internet Explorer.

Pour toutes questions veuillez poser votre problème dans le forum.

Merci, j'espère que vous avez aimé ce tutoriel et qu'il vous sera utile.

Scripts et tutoriaux similaires à celui ci:

Commentaires

Ajouter un commentaire

Les commentaires

Envoyé par Jean le 10/09/2010 à 13:49:17

BOnjour,

j'ai testé votre code et mrci pour ce tuto.
Tout marche bien sauf l'appel de l'image.
J'ai bien vérifié l'url avec Dreamweaver.
Sauriez-vous pour quelle raison?
J'ai essaé de remplacer:
cursor:url('../deco/elephants.ani'), default;
par:
cursor:url('../deco/elephants.ani'), hand;

Mais aucun effet.

Envoyé par ybouane le 13/09/2010 à 04:09:00

Bonjour,
c'est normal, les curseurs .ani ne fonctionnent pas, il faut utiliser des images .png, .gif, .jpg...

Cordialement :)

Envoyé par mat6901 le 26/09/2010 à 14:23:36

Bonjour peut on utiliser eds curseurs .gif ?

Envoyé par ybouane le 23/10/2010 à 16:49:12

Bonjour,
Oui, c'est possible.

Cordialement :)

Envoyé par ~Minata~ le 19/11/2010 à 19:34:25

Bonsoir,
tout d'abord, j'aime beaucoup votre site *----------------* merciiii beaucoup pour tous les tutaux et tout.
Mais j'ai un petit probleme avec ce code. je voudrais pas le mettre sur un site mais sur un blog(eklablog). Est-ce possible? Si oui, j'ai essayé de le faire, mais j'ai pas vraiment compris. je voulais mettre une image qui suit le curseur. L'image je l'ai chosit à partir du net, est-ce que ça marche?
Merci de me répondre :)

Envoyé par ~Minata~ le 20/11/2010 à 13:55:20

C'est bon, le problème vient d'être regler ^^

Envoyé par Girl5766 le 23/11/2010 à 18:34:21

Bonjour,

Quand je veux mettre le curseur d'une image voici le code :
<span class="curseur_img"><strong>Curseur image:</strong>cursor:url('adresse-de-l'image'), default;</span>

Le l'ai mis sur le bloc notes, et voici ce que la page me donne :
Curseur image:cursor:url('adresse-de-l'image'), default;

Je ne comprend pas. Quelqu'un pourrait-il m'aider ?
PS : j'ai enlevé le lien de l'adresse qui terminait par .gif
Merci d'avance

???Girl5766???

Envoyé par eliastik59 le 20/12/2010 à 15:17:50

C'est normal, il faut mettre dans ta feuille de style css, ce code :

.curseur_img
{
cursor:url('curseur.gif'), default;
}

A la place de cusrseur.gif, met l'adresse de l'image du cusreur.

Envoyé par lolitaflow le 10/09/2011 à 18:47:49

Bonjour,

je ne suis pas du tot douée en informatique alors je dois avouer que j'ais beaucoup de mal avec les codes; je ne sais pas comment les insérer .. En gros, je copie à partir d'ou en fait??

Envoyé par nttwlekf le 24/01/2012 à 12:30:07