Personnalisation d'un script

Version imprimable

Bonsoir

J' ai intégré cette bibliothèque en vue de personnaliser mon curseur

http:////magicmousejs.web.app/

Par défaut le curseur est blanc donc sur une page en fond blanc il est invisible.J ai beau consulter le site je trouve pas la facon de changer la couleur
du curseur par defaut.
ci dessous le script:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script type="text/javascript"> options = { "cursorOuter": "circle-basic", "hoverEffect": "pointer-blur", "hoverItemMove": false, "defaultCursor": false, "outerWidth": 41, "outerHeight": 41, }; magicMouse(options); </script>
Pourrais-je avoir des idées en vue de changer la couleur par défaut ?

Merci.

01/03/2023, 13h55
NoSmoking
Bonjour,

Citation:

Par défaut le curseur est blanc donc sur une page en fond blanc il est invisible.J ai beau consulter le site je trouve pas la facon de changer la couleur
du curseur par defaut.

il le dit lui même sur son dépôt GitHub :

Citation:

Envoyé par What's next?

You should have the nice effect for your mouse now, of course you can override the CSS code to make it more elegant and suitable with your website (change color, size,..). I'll add more effects to this libs when I have time, sure you can contribute to this repository and I'm very appreciate that ! :)

Il te faut donc surcharger le CSS en utilisant les sélecteurs body #magicPointer et body #magicMouseCursor, par exemple :
Code:

1 2 3 4 5 6 7 body #magicPointer { background: #00F; /* mainteant c'est bleu */ } body #magicMouseCursor { border: 1px solid #F00; /* maintenant c'est rouge */ }
01/03/2023, 15h34
labarre2002

BOnjour

NoSmoking

merci pour ta réponse.
01/03/2023, 18h39
labarre2002

Bonsoir

NoSmoking

en modifiant mon code comme suit

Code:

<body id="magicCursorPointer" id="magicCursorPointer">

le changement s'opère mais si j 'actualise la page mon curseur redevient blanc. :calim2:
02/03/2023, 08h51
Beginner.

Salut,

Tu as mis deux id identiques sur le body ???

Les id doivent être uniques...

Tu voulais peut-être utiliser les deux id mentionnés par NoSmoking ? :

Citation:

Envoyé par NoSmoking

Il te faut donc surcharger le CSS en utilisant les sélecteurs body #magicPointer et body #magicMouseCursor, par exemple :
02/03/2023, 10h40
CosmoKnacki

Citation:

Envoyé par Beginner.

Tu as mis deux id identiques sur le body ???

Les id doivent être uniques...

Bah là l'id est unique ... sauf que c'est précisé 2 fois!
02/03/2023, 12h48
ProgElecT

Salut

Citation:

Envoyé par CosmoKnacki

Bah là l'id est unique ... sauf que c'est précisé 2 fois!

:nono:

Citation:

Envoyé par NoSmoking

body #magicPointer et
body #magicMouseCursor

renvoie à 2 ids différents
02/03/2023, 15h27
labarre2002

Merci c est une erreur faite en rédigeant ce post

sur ma page c'est bien :

Code:

<body id="magicMouseCursor" id="magicMousePointer">
02/03/2023, 16h01
NoSmoking
Citation:

sur ma page c 'est bien :
...

Certes mais cela sert à rien, il ne faut pas attribuer une ID à ton <body> mais créer des règles CSS pour la prise en compte des couleurs.

Ceci étant et comme le CSS du curseur est injecté en fin de <head> il te faut ajouter un !important pour que les déclarations ne soient pas écrasées, entre nous ce n'est quand même pas top !.

En résumé, dans ta page tu devrais avoir dans la <head> entre balises <style></style> ou dans une feuille de style externe les règles suivantes :
Code:

1 2 3 4 5 6 7 /* tout en noir */ body #magicPointer { background: #000 !important; } body #magicMouseCursor { border: 1px solid #000 !important; }
02/03/2023, 17h49
labarre2002

Merci pour ta reponse.
02/03/2023, 19h46
CosmoKnacki

Citation:

Envoyé par ProgElecT

Salut

:nono:
renvoie à 2 ids différents

Oui, mais je parlais de ce code là:

Code:

<body id="magicCursorPointer" id="magicCursorPointer">