• Curseur personnalisé

    qu'est-ce que c'est ?

    Voici différents styles de curseurs par défaut que vous pourrez choisir lors du tutoriel.
    Passez votre curseur sur les textes pour voir les différentes formes de curseurs.

    Main (pointer)
    Texte (text)
    Viseur (crosshair)
    Attente (wait)
    Objet déplaçable (move)
    Curseur par défaut (default) 
    Point d'interrogation  (help)

    Changer la taille vers le haut (n-resize)
    Changer la taille vers le bas (s-resize)
    Changer la taille vers la droite (e-resize)
    Changer la taille vers la gauche (w-resize)
    Changer la taille haut+droite (ne-resize)
    Changer la taille haut+gauche (nw-resize)
    Changer la taille bas+droite (se-resize)
    Changer la taille bas+gauche (sw-resize)
     

    comment faire ?

    Comme d'habitude, commencez pas ouvrir la feuille CSS de votre blog
    Apparence > Modifier le thème > Ajouter du CSS

    Copiez/collez le code qui suit

    body { cursor: wait; }

    body représente le corps de la page, il encadre tout votre blog donc les modifications que l'on pourra écrire entre crochets à sa suite se feront sur tout votre blog. cursor c'est votre curseur, dans l'exemple il est suivit de wait qui représente le curseur d'Attente, pour avoir un autre curseur que celui-ci, il vous suffit de remplacer wait par le nom du curseur de votre choix qui se trouve entre parenthèses plus haut.

    Si vous souhaitez mettre une image (GIF, PNG, JPG, etc.)  pour avoir un curseur
    entièrement personnalisé, c'est ce code là qu'il vous faut insérer

    body {
        cursor: url("urldevotreimage.gif"), auto;
    }

    Tags Tags : , , , ,
  • Commentaires

    33
    Mercredi 30 Octobre 2013 à 13:40

    Coucou, je voulais mettre un curseur mais il est gris et mon fond est gris donc on ne le voit quasiment peu, comment faire pour le mettre en noir???

    32
    Lundi 27 Mai 2013 à 18:23

    je viens de résoudre le problème dsl du dérengement. ^^'

    31
    Lundi 27 Mai 2013 à 18:22

    la : fantast-word.eklablog.com/curseur-c21997349

    30
    Lundi 27 Mai 2013 à 17:50

    Puis-je avoir ton code ?

    29
    Lundi 27 Mai 2013 à 08:59

    je rentre toutes les info, avec lurl de l'image et sa bloque ...

    28
    Dimanche 26 Mai 2013 à 20:32

    Tu comprends bien que je ne peux pas t'aider avec si peu d'informations ! Quel est le problème ?

    27
    Dimanche 26 Mai 2013 à 18:56

    sa bloque --

    26
    Dimanche 26 Mai 2013 à 18:35
    25
    Dimanche 26 Mai 2013 à 14:55

    Du texte ? Ce n'est pas possible, un curseur doit être une image. Si tu veux un texte, il te suffit de créer une image sur laquelle tu inscris ton texte, tu l'utilises ensuite en tant que curseur. :)

    24
    Dimanche 26 Mai 2013 à 13:56

    si on veut écire du texte on fait quoi ?

    23
    Trendy Profil de Trendy
    Vendredi 27 Juillet 2012 à 12:23

    Merci encore ton tuto m'a beaucoup aidé!!

    22
    Samedi 14 Juillet 2012 à 19:53

    Oh merci ~ You are the best!

    21
    Vendredi 13 Juillet 2012 à 15:02

    Merci encore ><

    20
    Dimanche 25 Mars 2012 à 11:54

    Comment ont fait pour qu'il y'a quelque chose qui suit le curseur quand tu le bouge comme chez aimielisa par exemple?

    19
    Vendredi 23 Décembre 2011 à 17:46

    Pour changer le curseur des liens survolés, il me semble que c'est ceci :

    a:hover {
        cursor: url("urldevotreimage.gif"), url("urldevotreimage.gif"), auto;
    }

    18
    Mardi 20 Décembre 2011 à 20:01

    J'ai réussi à tout faire, mais quesqu'on fait si on veut mettre un certain curseur pour suvolé les liens? :O

    17
    Lundi 14 Novembre 2011 à 18:13

    merci

    16
    Lundi 14 Novembre 2011 à 18:07

    Pour pouvoir faire cet effet il faut que le Javascript soit activé sur ton compte.
    Tu peux demander l'activation sur le doc. d'Eklablog. Quand c'est fait tu peux lire ce qui suit.

    Merci au blog lemuseedelasorciere
    Il faut créer un module simple et y ajouter ce code là :

    <script type="text/javascript">
    // <![CDATA[
    var colour="#ffffff";
    var sparkles=70;
    /****************************
    * Tinkerbell Magic Sparkle *
    * (c) 2005 mf2fm web-design *
    * http://www.mf2fm.co.uk/rv *
    * DON'T EDIT BELOW THIS BOX *
    * topcode adapté *
    ****************************/
    var x=ox=400;
    var y=oy=300;
    var swide=800;
    var shigh=600;
    var sleft=sdown=0;
    var tiny=new Array();
    var star=new Array();
    var starv=new Array();
    var starx=new Array();
    var stary=new Array();
    var tinyx=new Array();
    var tinyy=new Array();
    var tinyv=new Array();
    window.onload=function() { if (document.getElementById) {
    var i, rats, rlef, rdow;
    for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
    }
    set_width();
    sparkle();
    }}
    function sparkle() {
    var c;
    if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
    star[c].style.left=(starx[c]=x)+"px";
    star[c].style.top=(stary[c]=y)+"px";
    star[c].style.clip="rect(0px, 5px, 5px, 0px)";
    star[c].style.visibility="visible";
    starv[c]=50;
    break;
    }
    }
    for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
    }
    setTimeout("sparkle()", 40);
    }
    function update_star(i) {
    if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
    if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
    star[i].style.top=stary[i]+"px";
    starx[i]+=(i%5-2)/5;
    star[i].style.left=starx[i]+"px";
    }
    else {
    star[i].style.visibility="hidden";
    starv[i]=0;
    return;
    }
    }
    else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
    }
    }
    function update_tiny(i) {
    if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
    }
    if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
    tiny[i].style.top=tinyy[i]+"px";
    tinyx[i]+=(i%5-2)/5;
    tiny[i].style.left=tinyx[i]+"px";
    }
    else {
    tiny[i].style.visibility="hidden";
    tinyv[i]=0;
    return;
    }
    }
    else tiny[i].style.visibility="hidden";
    }
    document.onmousemove=mouse;
    function mouse(e) {
    set_scroll();
    y=(e)?e.pageY:event.y+sdown;
    x=(e)?e.pageX:event.x+sleft;
    }
    function set_scroll() {
    if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
    }
    else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
    }
    else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
    }
    else {
    sdown=0;
    sleft=0;
    }
    }
    window.onresize=set_width;
    function set_width() {
    if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
    }
    else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
    }
    else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
    }
    }
    function createDiv(height, width) {
    var div=document.createElement("div");
    div.style.position="absolute";
    div.style.height=height+"px";
    div.style.width=width+"px";
    div.style.overflow="hidden";
    div.style.backgroundColor=colour;
    return (div);
    }
    // ]]>
    </script>

    15
    Dimanche 13 Novembre 2011 à 11:09

    Est que tu sais le code CSS pour les petites pailletes aparaisent quans tu fait bougé la souris ?

    Je sais, j' explique mal ... --"

    14
    Lundi 24 Octobre 2011 à 15:44

    Ne t'inquiète pas,je ne vais pas te copier,mon curseur est en forme de smiley=)

    Merci du code!

    13
    Lundi 24 Octobre 2011 à 15:33

    J'espère que ce n'est pas dans l'intention de copier. ^^"
    Le code est celui-ci :

    a:hover {
        cursor: wait ;
    }

    img:hover {
        cursor: wait ;
    }

    12
    Lundi 24 Octobre 2011 à 15:30

    Une image ou un lien:)

    11
    Lundi 24 Octobre 2011 à 15:02

    Tu veux le faire apparaitre lorsqu'il survole quoi précisemment ?

    10
    Lundi 24 Octobre 2011 à 14:57

    Je voudrais faire apparaître mon curseur uniquement quand je survole quelquechose,mais je n'y arrive pas...

    9
    B3lle pas c.
    Mardi 4 Octobre 2011 à 16:16

    okiiii merci ♥

    8
    Lundi 3 Octobre 2011 à 20:22

    Tu fais clique droit sur ton gif et Copier l'URL de l'image ou Copier l'adresse de l'image, c'est la même chose. Ensuite tu colle en faisant Ctrl+V à l'emplacement prévu pour l'url de l'image. :)

    7
    B3lle pas c.
    Lundi 3 Octobre 2011 à 17:21

    comment on touve le url des gif ?

    6
    Mardi 13 Septembre 2011 à 21:02

    oki , merci beaucoup ^^ !

    5
    Mardi 13 Septembre 2011 à 19:43

    @ Misu Sato : Je crois que tu enlève surement les parenthèses ou les guillemets lorsque tu écrit un code, il ne faut ABSOLUMENT rien enlever, la seule chose, je dis bien la SEULE à remplacer c'est UNIQUEMENT urldevotreimage.gif SANS toucher aux guillemets et parenthèses autour.

    4
    Dimanche 11 Septembre 2011 à 10:55

    Merci ! ^w^

    3
    Dimanche 28 Août 2011 à 21:22

    En faite les codes css sont mauvais !

    2
    Dimanche 28 Août 2011 à 17:49
    Tu as trouvé un site par contre tu trouve pas "quoi" ? ._.
    1
    Samedi 27 Août 2011 à 20:49

    j'ai trouver un site de curseur :

    http://www.cursors-4u.com/2009/04/18/windows-7-cursors.html

    par contre je trouve pas



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :