Personnalisation d'un script

**labarre2002** · 28/02/2023, 20h31

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**NoSmoking** · 01/03/2023, 13h55

Bonjour,

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 :

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 */
}

**labarre2002** · 01/03/2023, 15h34

BOnjour

NoSmoking

merci pour ta réponse.

**labarre2002** · 01/03/2023, 18h39

Bonsoir

NoSmoking

en modifiant mon code comme suit

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

le changement s'opère mais si j 'actualise la page mon curseur redevient blanc.

**Beginner.** · 02/03/2023, 08h51

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 ? :

Envoyé par NoSmoking

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

**CosmoKnacki** · 02/03/2023, 10h40

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!

**ProgElecT** · 02/03/2023, 12h48

Salut

Envoyé par CosmoKnacki

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

Envoyé par NoSmoking

body #magicPointer et
body #magicMouseCursor

renvoie à 2 ids différents

**labarre2002** · 02/03/2023, 15h27

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

sur ma page c'est bien :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<body id="magicMouseCursor"  id="magicMousePointer">

**NoSmoking** · 02/03/2023, 16h01

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
/* tout en noir */
body #magicPointer {
  background: #000 !important;
}
body #magicMouseCursor {
  border: 1px solid #000 !important;
}

**labarre2002** · 02/03/2023, 17h49

Merci pour ta reponse.

**CosmoKnacki** · 02/03/2023, 19h46

Envoyé par ProgElecT

Salut

renvoie à 2 ids différents

Oui, mais je parlais de ce code là:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Personnalisation d'un script

JavaScript

Discussions similaires

Partager

Partager