|
|
|
|
 #3 astuces html
par Echo en mai 2021
|
868ème
1 305 points
|
En mai 2021
<div style="cursor: url('https://downloads.totallyfreecursors.com/thumbnail[...] pointer;">
<h2>Hello tout le monde !</h2>
Aujourd’hui on va travailler sur le code pour…. <strong>les curseurs</strong> !
Sans plus attendre voici le code  :
<h4><u>Explication du code</h4></u>
<img src="https://zupimages.net/up/21/19/13to.jpg" style="max-width:100%;" />
<strong>div</strong> signifie « division du document » cette balise permet d'organiser le contenu html sans rien représenter de particulier.
<font color="#1E9025">Style</f ont> est un attribut de div, il permet de <strong>faire des déclarations CSS</strong> afin de mettre en forme l'élément, c’est-à-dire qu’<strong>il permet de travailler sur l’esthétique</strong> – la forme et non le fond – le texte.
<font color="#ED46E5">Cursor</ font> cette propriété CSS (rappelez-vous la forme ;)) permet de spécifier la forme du curseur à utiliser sur un élément.
<font color="#ED46E5">Cursor :url (‘URL du curseur’)</font> va donc vous permettre de choisir l’apparence de votre curseur. Pour cela il vous suffit de mettre l’url du curseur souhaité.
Voici deux sites que je peux vous proposer où vous pourrez en trouver mais il en existe sûrement d’autres ! :
<a href="https://www.totallyfreecursors.com" style="">https://www.totallyfreecursors.com/</a>
Attention vous devez choisir la dernière url du code qui vous est proposé comme sur l’image ci-dessous. Si vous utilisez le code du site tel quel, son logo apparaîtra sur votre fiche.
<img src="https://zupimages.net/up/21/19/16or.jpg" style="max-width:100%;" />
<a href="https://www.cursors-4u.com/" style="">https://www.cursors-4u.com/</a>
Il vous faut choisir l’url après cursor : url de l’option 2 comme sur l’image ci-dessous.
Cependant, si vous recopiez tel quel le code de l’option n°1 cela marche également et dans ce cas vous n’avez pas besoin du code que je vous ai expliqué ^^.
<img src="https://zupimages.net/up/21/19/3iof.png" style="max-width:100%;" />
<font color="#ED46E5">Pointer< /font> : au cas où le curseur personnalisé ne fonctionne pas, vous devez obligatoirement ajouter la valeur du curseur par défaut qui devra donc s’afficher à sa place.
Ici <font color="#ED46E5">pointer< /font> affiche un curseur en forme de main avec un doigt déplié (comme lorsque vous voulez cliquer sur un lien).
Vous pouvez vous rendre sur ce site où vous trouverez une liste des valeurs possibles si vous souhaitez la modifier : <a href="https://www.zonecss.fr/proprietes-css/cursor-css.h[...] style="">https://www.zonecss.fr/proprietes-css/cursor-css.h[...]
<h4><u>Où le placer ?</h4></u>
Vous devez placer le code autour de l’endroit où vous souhaitez voir apparaître le curseur.
Je m’explique : si vous voulez qu’il s’effectue sur toute votre fiche il vous faut ouvrir le code au début de votre fiche et fermer la balise <strong>/div</strong> à la fin de votre fiche comme sur l’exemple ci-dessous :
<img src="https://zupimages.net/up/21/19/wkic.jpg" style="max-width:100%;" />
<h4><u>Attention</h4>& lt;/u>
Attention, les curseurs animés ne marchent pas avec d'autres navigateurs qu'Internet Explorer ce qui signifie que si vous en utilisez un avec un autre navigateur vous ne le verrez pas s'animer mais les joueurs utilisant un autre navigateur ne le verront pas non plus !
Nous arrivons à la fin de cet article !
<strong>Comme d’habitude</strong>, n’hésitez pas à <strong>partager vos petits tips</strong> perso, <strong>le forum est fait pour vous entraider ! ^^ </strong>
<strong>Si vous avez une remarque, une question, des choses à dire pour compléter ou une erreur à corriger ↓↓↓ </strong> :)
</div>
7
|
|
|
Aujourd'hui, à 15:26
Publicité
|
|
900
