Ajouter des liens dans une image

Version imprimable

18/11/2019, 23h14
denclout

Ajouter des liens dans une image

Bonjour,

Je suis débutant...

Voici le lien pour la roue de fortune : http://dougtesting.net/home

Je voudrais inscrire des liens (URL) dans chacun des saignements de cette roue de fortune,

Quand la roue s'arrête sur un lien, ce lien s’ouvre.

Voilà, c'est tout ce dont j'ai besoin.

Votre aide serait appréciée, merci!
19/11/2019, 09h54
SpaceFrog

Citation:

dans chacun des saignements de cette roue de fortune,

segments :ptdr: ...

Citation:

Quand la roue s'arrête sur un lien, ce lien s’ouvre.

Stocke les liens dans un array,
rècupère l'angle de rotation et trigger un window open conditionnel ?

Pour récupérer l'angle de rotation :
https://stackoverflow.com/questions/...canvas-context
19/11/2019, 10h53
Invité

Bonjour, et bienvenu sur DVP, 8-)

Peut-être en lisant la DOC ? :aie:

[troll]@SpaceFrog
Non, c'est son ensaignant(e) qui lui a dit que ce sont des "saignements" !
La Roue de la Fortune... c'est tous les 28 jours. :ptdr:
:dehors:[/troll]

Excusez-moi pour la faute... :mouarf:

C'est dans cette partie du code (segments).
Je veux faire des liens qui s’ouvrent dans une autre fenêtre pour chacune des lignes 300 à 800.
En JavaScript, je n’y arrive pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<script>
            // Create new wheel object specifying the parameters at creation time.
            let theWheel = new Winwheel({
                'outerRadius'     : 212,        // Set outer radius so wheel fits inside the background.
                'innerRadius'     : 75,         // Make wheel hollow so segments don't go all way to center.
                'textFontSize'    : 24,         // Set default font size for the segments.
                'textOrientation' : 'vertical', // Make text vertial so goes down from the outside of wheel.
                'textAlignment'   : 'outer',    // Align text to outside of wheel.
                'numSegments'     : 24,         // Specify number of segments.
                'segments'        :             // Define segments including colour and text.
                [                               // font size and test colour overridden on backrupt segments.
                   {'fillStyle' : '#ee1c24', 'text' : '300'},
                   {'fillStyle' : '#3cb878', 'text' : '450'},
                   {'fillStyle' : '#f6989d', 'text' : '600'},
                   {'fillStyle' : '#00aef0', 'text' : '750'},
                   {'fillStyle' : '#f26522', 'text' : '500'},
                   {'fillStyle' : '#000000', 'text' : 'BANKRUPT', 'textFontSize' : 16, 'textFillStyle' : '#ffffff'},
                   {'fillStyle' : '#e70697', 'text' : '3000'},
                   {'fillStyle' : '#fff200', 'text' : '600'},
                   {'fillStyle' : '#f6989d', 'text' : '700'},
                   {'fillStyle' : '#ee1c24', 'text' : '350'},
                   {'fillStyle' : '#3cb878', 'text' : '500'},
                   {'fillStyle' : '#f26522', 'text' : '800'},
                   {'fillStyle' : '#a186be', 'text' : '300'},
                   {'fillStyle' : '#fff200', 'text' : '400'},
                   {'fillStyle' : '#00aef0', 'text' : '650'},
                   {'fillStyle' : '#ee1c24', 'text' : '1000'},
                   {'fillStyle' : '#f6989d', 'text' : '500'},
                   {'fillStyle' : '#f26522', 'text' : '400'},
                   {'fillStyle' : '#3cb878', 'text' : '900'},
                   {'fillStyle' : '#000000', 'text' : 'BANKRUPT', 'textFontSize' : 16, 'textFillStyle' : '#ffffff'},
                   {'fillStyle' : '#a186be', 'text' : '600'},
                   {'fillStyle' : '#fff200', 'text' : '700'},
                   {'fillStyle' : '#00aef0', 'text' : '800'},
                   {'fillStyle' : '#ffffff', 'text' : 'LOOSE TURN', 'textFontSize' : 12}
                ],
                'animation' :           // Specify the animation to use.
                {
                    'type'     : 'spinToStop',
                    'duration' : 10,    // Duration in seconds.
                    'spins'    : 3,     // Default number of complete spins.
                    'callbackFinished' : alertPrize,
                    'callbackSound'    : playSound,   // Function to call when the tick sound is to be triggered.
                    'soundTrigger'     : 'pin'        // Specify pins are to trigger the sound, the other option is 'segment'.
                },
                'pins' :				// Turn pins on.
                {
                    'number'     : 24,
                    'fillStyle'  : 'silver',
                    'outerRadius': 4,
                }
            });

Voici le lien pour la roue de fortune : http://dougtesting.net/home

Merci pour l'aide !

Bonjour,
il suffit de lire attentivement la documentation et de jeter un coup d'oeil aux exemple ;)

Prenons simplement le premier : Winwheel.js example: Basic code-drawn wheel.

Dans cet exemple l'alerte affiche une valeur issue de la configuration
Code:

1 2 3 4 5 // Definition of all the segments. 'segments': [ { 'fillStyle': '#eae56f', 'text': 'Prize 1' }, { 'fillStyle': '#89f26e', 'text': 'Prize 2'}, //etc ...
Cette affichage est déclenché en fin d'animation et c'est la fonction callback déclarée dans l'animation qui en est responsable
Code:

1 2 3 4 5 6 7 8 // Definition of the animation 'animation': { 'type': 'spinToStop', 'duration': 5, 'spins': 8, 'callbackFinished': alertPrize }
en substance dans l'exemple c'est
Code:

1 2 3 4 5 // Called when the animation has finished. function alertPrize(indicatedSegment) { // Do basic alert of the segment text. alert("You have won " + indicatedSegment.text); }
En conclusion il te suffit de paramétrer comme il te convient, par exemple
Code:

1 2 3 'segments': [ { 'fillStyle': '#eae56f', 'url': 'https://www.developpez.net/forums/' }, // etc ...
et dans ta fonction déclarée sur le callbackFinished tu fais ce que tu veux avec l'objet passé en paramètre
Code:

1 2 3 function alertPrize(indicatedSegment) { alert("Vous allez être redirigé vers " + indicatedSegment.url); }

1 pièce(s) jointe(s)

Ne fonctionne pas

Bonjour, un gros merci de l'aide.

Les liens ne s'affichent pas dans la roue et la fenêtre de prix s'affiche sans lien cliquable.

j'ai essayé avec votre code ici, même chose...

{ 'fillStyle': '#eae56f', 'url': 'https://www.developpez.net/forums/' },

Pièce jointe 518974

voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
 
<script>
            // Créez un nouvel objet roue spécifiant les paramètres au moment de la création.
            let theWheel = new Winwheel({
                'outerRadius'     : 212,        // Définissez le rayon extérieur de sorte que la roue s'adapte à l'arrière-plan.
                'innerRadius'     : 75,         // Faire la roue creuse pour que les segments ne vont pas tout au centre.
                'textFontSize'    : 14,         // Définissez la taille de police par défaut pour les segments.
                'textOrientation' : 'vertical', // Faites en sorte que le texte descende de l’extérieur de la roue.
                'textAlignment'   : 'outer',    // Alignez le texte avec l'extérieur de la roue.
                'numSegments'     : 24,         // Spécifiez le nombre de segments.
                'segments'        :              // Définissez les segments, y compris la couleur et le texte.
                [                               // La taille de la police et la couleur de test ont été remplacées par les segments backrupt.
				   { 'fillStyle': '#eae56f',  'url': 'test01.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test02.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test03.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test04.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test05.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test06.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test07.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test08.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test09.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test10.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test11.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test12.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test13.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test14.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test15.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test16.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test17.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test18.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test19.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test20.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test21.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test22.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test23.html' },
				   { 'fillStyle': '#eae56f',  'url': 'test24.html' }
                ],
                'animation' :           // Spécifiez l'animation à utiliser.
                {
                    'type'     : 'spinToStop',
                    'duration' : 10,    // Durée en secondes.
                    'spins'    : 3,     // Nombre par défaut de tours complets.
                    'callbackFinished' : alertPrize, 
                    'callbackSound'    : playSound,   // Fonction à appeler lorsque le son de tick doit être déclenché.
                    'soundTrigger'     : 'pin'        // Spécifiez que les pins doivent déclencher le son, l’autre option est "segment".
                },
                'pins' :				// Activer les épingles.
                {
                    'number'     : 24,
                    'fillStyle'  : 'silver',
                    'outerRadius': 4,
                }
            });
 
            // Charge le son audio de tick dans un objet audio.
            let audio = new Audio('tick.mp3');
 
            // Cette fonction est appelée lorsque le son doit être joué.
            function playSound()
            {
                // Arrêtez et rembobinez le son s'il joue déjà.
                audio.pause();
                audio.currentTime = 0;
 
                // Jouez le son.
                audio.play();
            }
 
            // Vars utilisé par le code dans cette page pour faire des contrôles de puissance.
            let wheelPower    = 0;
            let wheelSpinning = false;
 
            // -------------------------------------------------------
            // Fonction pour gérer le onClick sur les boutons d'alimentation.
            // -------------------------------------------------------
            function powerSelected(powerLevel)
            {
                // Assurez-vous que la puissance ne peut pas être changée pendant que la roue tourne.
                if (wheelSpinning == false) {
                    // Réinitialisez tout en gris si ce n'est pas la première fois que l'utilisateur sélectionne l'alimentation.
                    document.getElementById('pw1').className = "";
                    document.getElementById('pw2').className = "";
                    document.getElementById('pw3').className = "";
 
                    // Allumez maintenant toutes les cellules ci-dessous, y compris celle sélectionnée en changeant de classe.
                    if (powerLevel >= 1) {
                        document.getElementById('pw1').className = "pw1";
                    }
 
                    if (powerLevel >= 2) {
                        document.getElementById('pw2').className = "pw2";
                    }
 
                    if (powerLevel >= 3) {
                        document.getElementById('pw3').className = "pw3";
                    }
 
                    // Définissez la variable wheelPower utilisée lorsque vous cliquez sur le bouton Tourner.
                    wheelPower = powerLevel;
 
                    // Allumez le bouton de rotation en modifiant son image source et en y ajoutant une classe cliquable.
                    document.getElementById('spin_button').src = "spin_on.png";
                    document.getElementById('spin_button').className = "clickable";
                }
            }
 
            // -------------------------------------------------------
            // Cliquez sur le gestionnaire pour le bouton de rotation.
            // -------------------------------------------------------
            function startSpin()
            {
                // Assurez-vous que vous ne pouvez pas cliquer à nouveau sur la rotation lorsque vous êtes déjà en cours d'exécution.
                if (wheelSpinning == false) {
                    // En fonction du niveau de puissance sélectionné, ajustez le nombre de tours de la roue, plus le nombre de tours est élevé.
                    // pour tourner avec la durée de l’animation, plus la roue tourne vite.
                    if (wheelPower == 1) {
                        theWheel.animation.spins = 3;
                    } else if (wheelPower == 2) {
                        theWheel.animation.spins = 6;
                    } else if (wheelPower == 3) {
                        theWheel.animation.spins = 10;
                    }
 
                    // Désactivez le bouton de rotation pour éviter de cliquer à nouveau lorsque la roue tourne.
                    document.getElementById('spin_button').src       = "spin_off.png";
                    document.getElementById('spin_button').className = "";
 
                    // Commencez l'animation en appelant startAnimation sur l'objet wheel.
                    theWheel.startAnimation();
 
                    // Définissez sur true pour que l’alimentation ne puisse pas être modifiée et que le bouton de rotation ne soit réactivé pendant la lecture.
                    // l'animation en cours. L'utilisateur devra réinitialiser avant de tourner à nouveau.
                    wheelSpinning = true;
                }
            }
 
            // -------------------------------------------------------
            // Fonction pour le bouton de réinitialisation.
            // -------------------------------------------------------
            function resetWheel()
            {
                theWheel.stopAnimation(false);  // Arrêtez l'animation, false car param n'appelle pas la fonction de rappel.
                theWheel.rotationAngle = 0;     // Réinitialisez l'angle de la roue à 0 degré.
                theWheel.draw();                // Appelez draw pour rendre les modifications à la roue.
 
                document.getElementById('pw1').className = "";  // Supprimez toutes les couleurs des indicateurs de niveau de puissance.
                document.getElementById('pw2').className = "";
                document.getElementById('pw3').className = "";
 
                wheelSpinning = false;          // Réinitialiser à faux pour allumer les boutons et tourner peut être cliqué à nouveau.
            }
 
            // -------------------------------------------------------
            // Appelé lorsque l'animation de rotation est terminée par la fonction de rappel de la roue car j'ai spécifié le rappel dans les paramètres.
            // -------------------------------------------------------
            function alertPrize(indicatedSegment)
            { 
			    { alert("Vous allez être redirigé vers " + indicatedSegment.url);			
			}
                // Alertez simplement l'utilisateur de ce qui s'est passé
                // Dans un projet réel, vous voulez probablement faire quelque chose de plus intéressant que cela avec le résultat.
           }
        </script>

Merci !

Il te faut personnaliser la fonction qui est exécutée en fin de rotation.

Code:

1
2
3
4
5
6
7
8
9
function ouvrePage(indicatedSegment) {
  // ouvre le lien sur la page en cours
  window.location = indicatedSegment.url;
  /*======*/
  /*  OU  */
  /*======*/
  // ouvre le lien dans un nouvel onglet
  window.open(indicatedSegment.url, "_blank")
}

... et mettre dans la configuration

Code:

1
2
3
4
5
6
7
"animation": {
  "type"     : "spinToStop",
  "duration" : 10,    // Durée en secondes.
  "spins"    : 3,     // Nombre par défaut de tours complets.
//  "callbackFinished" : alertPrize,
  "callbackFinished": ouvrePage,
}

22/11/2019, 10h02
Invité
Bonjour,

Citation:

Envoyé par denclout

...Les liens ne s'affichent pas dans la roue...

Pour afficher des textes dans la roue, il faut utiliser 'text' :
Code:

1 2 { 'fillStyle': '#eae56f', 'text': 'test01', 'url': 'test01.html' }, ...
LIS la DOC !!! *
- Segment
- #3 Segment Colour and Text
* La doc est en anglais, mais tu es Canadien : ça ne devrait pas poser de problème, si ?

Un GROS MERCI pour votre aide !

Bonjour à tous,

Un GROS MERCI pour votre aide !

Ça fonctionne bien sur une clé USB avec Laragon.

J'aurais d'autres idées à vous soumettre prochainement.

Voici le code test :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<script>
            // Créez un nouvel objet roue spécifiant les paramètres au moment de la création.
            let theWheel = new Winwheel({
                'outerRadius'     : 212,        // Définissez le rayon extérieur de sorte que la roue s'adapte à l'arrière-plan.
                'innerRadius'     : 1,         // Faire la roue creuse pour que les segments ne vont pas tout au centre.
                'textFontSize'    : 10,         // Définissez la taille de police par défaut pour les segments.
                'textOrientation' : 'vertical', // Faites en sorte que le texte descende de l’extérieur de la roue.
                'textAlignment'   : 'outer',    // Alignez le texte avec l'extérieur de la roue.
                'numSegments'     : 24,         // Spécifiez le nombre de segments.
                'segments'        :              // Définissez les segments, y compris la couleur et le texte.
                [                              
				   { 'fillStyle': '#ee1c24', 'text': 'goodbye to romance',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#3cb878', 'text': 'gold on the ceiling',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#f6989d', 'text': 'santa monica',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#00aef0', 'text': 'half the man',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#f26522', 'text': 'big me',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#000000', 'text': 'say it aint so',  'url': 'http://localhost:8080/test.pdf','textFontSize' : 10, 'textFillStyle' : '#ffffff' },
				   { 'fillStyle': '#e70697', 'text': 'youre the one',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#fff200', 'text': '18 years',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#f6989d', 'text': 'kriptonite',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#ee1c24', 'text': 'simple man',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#3cb878', 'text': 'cumbersome',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#f26522', 'text': 'kek tattoo',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#a186be', 'text': 'barre ca la',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#fff200', 'text': 'jte gate',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#00aef0', 'text': 'la rue principale',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#ee1c24', 'text': 'father on the go',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#f6989d', 'text': 'time',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#f26522', 'text': 'on the turning away',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#3cb878', 'text': 'the wall',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#000000', 'text': 'confortably numb',  'url': 'http://localhost:8080/test.pdf','textFontSize' : 10, 'textFillStyle' : '#ffffff' },
				   { 'fillStyle': '#a186be', 'text': 'young lust',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#fff200', 'text': 'coming back to life',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#00aef0', 'text': 'are you gon ebe',  'url': 'http://localhost:8080/test.pdf' },
				   { 'fillStyle': '#ffffff', 'text': 'prendre un verre',  'url': 'http://localhost:8080/test.pdf' }
                ],
                'animation' :           // Spécifiez l'animation à utiliser. 
                {
                    'type'     : 'spinToStop',
                    'duration' : 10,    // Durée en secondes.
                    'spins'    : 3,     // Nombre par défaut de tours complets.
                    'callbackFinished' : ouvrePage,					
                    'callbackSound'    : playSound,   // Fonction à appeler lorsque le son de tick doit être déclenché.
                    'soundTrigger'     : 'pin'        // Spécifiez que les pins doivent déclencher le son, l’autre option est "segment".
                },
                'pins' :				// Activer les épingles.
                {
                    'number'     : 24,
                    'fillStyle'  : 'silver',
                    'outerRadius': 4,
                }
            });
 
            // Charge le son audio de tick dans un objet audio.
            let audio = new Audio('tick.mp3');
 
            // Cette fonction est appelée lorsque le son doit être joué.
            function playSound()
            {
                // Arrêtez et rembobinez le son s'il joue déjà.
                audio.pause();
                audio.currentTime = 0;
 
                // Jouez le son.
                audio.play();
            }
 
            // Vars utilisé par le code dans cette page pour faire des contrôles de puissance.
            let wheelPower    = 0;
            let wheelSpinning = false;
 
            // -------------------------------------------------------
            // Fonction pour gérer le onClick sur les boutons d'alimentation.
            // -------------------------------------------------------
            function powerSelected(powerLevel)
            {
                // Assurez-vous que la puissance ne peut pas être changée pendant que la roue tourne.
                if (wheelSpinning == false) {
                    // Réinitialisez tout en gris si ce n'est pas la première fois que l'utilisateur sélectionne l'alimentation.
                    document.getElementById('pw1').className = "";
                    document.getElementById('pw2').className = "";
                    document.getElementById('pw3').className = "";
 
                    // Allumez maintenant toutes les cellules ci-dessous, y compris celle sélectionnée en changeant de classe.
                    if (powerLevel >= 1) {
                        document.getElementById('pw1').className = "pw1";
                    }
 
                    if (powerLevel >= 2) {
                        document.getElementById('pw2').className = "pw2";
                    }
 
                    if (powerLevel >= 3) {
                        document.getElementById('pw3').className = "pw3";
                    }
 
                    // Définissez la variable wheelPower utilisée lorsque vous cliquez sur le bouton Tourner.
                    wheelPower = powerLevel;
 
                    // Allumez le bouton de rotation en modifiant son image source et en y ajoutant une classe cliquable.
                    document.getElementById('spin_button').src = "spin_on.png";
                    document.getElementById('spin_button').className = "clickable";
                }
            }
 
            // -------------------------------------------------------
            // Cliquez sur le gestionnaire pour le bouton de rotation.
            // -------------------------------------------------------
            function startSpin()
            {
                // Assurez-vous que vous ne pouvez pas cliquer à nouveau sur la rotation lorsque vous êtes déjà en cours d'exécution.
                if (wheelSpinning == false) {
                    // En fonction du niveau de puissance sélectionné, ajustez le nombre de tours de la roue, plus le nombre de tours est élevé.
                    // pour tourner avec la durée de l’animation, plus la roue tourne vite.
                    if (wheelPower == 1) {
                        theWheel.animation.spins = 3;
                    } else if (wheelPower == 2) {
                        theWheel.animation.spins = 6;
                    } else if (wheelPower == 3) {
                        theWheel.animation.spins = 10;
                    }
 
                    // Désactivez le bouton de rotation pour éviter de cliquer à nouveau lorsque la roue tourne.
                    document.getElementById('spin_button').src       = "spin_off.png";
                    document.getElementById('spin_button').className = "";
 
                    // Commencez l'animation en appelant startAnimation sur l'objet wheel.
                    theWheel.startAnimation();
 
                    // Définissez sur true pour que l’alimentation ne puisse pas être modifiée et que le bouton de rotation ne soit réactivé pendant la lecture.
                    // l'animation en cours. L'utilisateur devra réinitialiser avant de tourner à nouveau.
                    wheelSpinning = true;
                }
            }
 
            // -------------------------------------------------------
            // Fonction pour le bouton de réinitialisation.
            // -------------------------------------------------------
            function resetWheel()
            {
                theWheel.stopAnimation(false);  // Arrêtez l'animation, false car param n'appelle pas la fonction de rappel.
                theWheel.rotationAngle = 0;     // Réinitialisez l'angle de la roue à 0 degré.
                theWheel.draw();                // Appelez draw pour rendre les modifications à la roue.
 
                document.getElementById('pw1').className = "";  // Supprimez toutes les couleurs des indicateurs de niveau de puissance.
                document.getElementById('pw2').className = "";
                document.getElementById('pw3').className = "";
 
                wheelSpinning = false;          // Réinitialiser à faux pour allumer les boutons et tourner peut être cliqué à nouveau.
            }
 
            // -------------------------------------------------------
            // Appelé lorsque l'animation de rotation est terminée par la fonction de rappel de la roue car j'ai spécifié le rappel dans les paramètres.
            // -------------------------------------------------------
            function ouvrePage(indicatedSegment)
            { 
			    { alert(indicatedSegment.url);
                { window.open(indicatedSegment.url, "_blank");
            }				
			}
                // Alertez simplement l'utilisateur de ce qui s'est passé
           }
        </script>

Encore merci ! ;)