• Curseur

    Je reviens sur un sujet déjà abordé: le changement de curseur.

    On peut changer le curseur de façon régulière afin que sa forme apparaisse sur toutes vos pages; je n'y suis pas partisan car, selon le forme de ce curseur, il est parfois difficile de cliquer sur des liens étroits.

    On peut changer le curseur au survol d'un ou de plusieurs éléments particuliers, dans un article.

    Dans les deux cas, il faut indiquer, dans le CSS, soit du blog, soit de l'article, le code avec l'adresse de l'image curseur: attention au format car certains navigateurs n'en acceptent pas certains (ani pour FF).

    Format ; cur, jpg et gif acceptés et hébergés sans souci.

    Premier exemple d'élément qui, au survol, fait changer l'aspect du curseur.
    <p id="pg1">Premier exemple d'élément qui, au survol, fait changer l'aspect du curseur.</p>

    <style><!--
    #pg1{float:left; width:35vw; height;40vh; margin:0 1vw 0 0; border:0.2vh solid black; text-align:center;}
    #pg1:hover{cursor:url(http://ekladata.com/Dbn4TzTHtOZ-4eIZdPHCO3FZupQ@32x32.gif), auto;}
    --></style>

    Second exemple d'élément sur le positionnement du curseur du curseur.

    <p id="pg2">Second exemple d'élément sur le positionnement du curseur du curseur.</p>
    <style><!--

    #pg2{float:left; width:35vw; height;40vh; border:0.2vh solid black; text-align:center;}

    #pg2:hover{cursor:url(http://ekladata.com/xGDwRONxwFPe-VmO_rWmhlfhRDA@32x32.gif) 0 0, auto;}
    --></style>

    Un petit mot ?


    Changement de l'image curseur au survol de chaque paragraphe; le positionnement du curseur est possible mais plus délicat au clic
    En clin d'œil au petit randonneur, j'ai ajouté un élément indépendant, caché sous le premier élément et qui se déplace pour devenir apparent, sur le second paragraphe.

    Son positionnement est défini de même que sa vitesse d'animation, en ajoutant un retard de 0.5s après le survol du curseur.

    Ce qui donne au total, un code du genre, pour le principe car il faut adapter à chaque article:

     <div style="height: 30vh;">
    <p id="pg1">Premier exemple </p>
    <p id="pg2">Second exemple </p>
    <p id="pg3">Un petit mot ?</p>
    </div>

    <style><!--
    #pg1{position:absolute; z-index:5;margin:0 0 0 0; width:35vw; height;40vh; margin:0 1vw 0 0; border:0.2vh solid black; text-align:center; background:lightblue;}
    #pg2{position:absolute; z-index:1; margin:0 0 0 40vw; width:35vw; border:0.2vh solid black; text-align:center;background:lightgreen;}
    #pg3{position:absolute; z-index:3;transform:translate(20vw,5vh); width:10vw; height:5vh; font-size:2vh; text-align:center; border:0.1vw solid black; background:pink; border-radius:30%; line-height:5vh; box-shadow:inset 0vw 0vh 1vw black; transition:all 0.5s linear 0.5s;}
    #pg1:hover{cursor:url(http://ekladata.com/Dbn4TzTHtOZ-4eIZdPHCO3FZupQ@32x32.gif), auto;}
    #pg2:hover{cursor:url(http://ekladata.com/xGDwRONxwFPe-VmO_rWmhlfhRDA@32x32.gif) 0 0, auto;}
    #pg2:hover ~ #pg3{transform:translate(40vw,7vh);}
    --></style>