Ajouter des liens dans une image

**denclout** · 18/11/2019, 23h14

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!

**SpaceFrog** · 19/11/2019, 09h54

dans chacun des saignements de cette roue de fortune,

segments

...

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

Invité · 19/11/2019, 10h53

Bonjour, et bienvenu sur DVP,

Peut-être en lisant la DOC ?

[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.

[/troll]

**denclout** · 19/11/2019, 12h11

Excusez-moi pour la faute...

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 :

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

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 !

**NoSmoking** · 21/11/2019, 19h10

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 :

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

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 :

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

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 :

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

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 :

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

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 :

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

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

**denclout** · 21/11/2019, 22h30

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/' },

Nom : screen.jpg
Affichages : 135
Taille : 81,3 Ko

Nom : screen.jpg
Affichages : 135
Taille : 81,3 Ko

voici mon code :

Code :

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

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 !

**NoSmoking** · 22/11/2019, 09h48

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

Code :

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

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 :

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

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,
}

Invité · 22/11/2019, 10h02

Bonjour,

Envoyé par denclout

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

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

Code :

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

1
2
				   { 'fillStyle': '#eae56f',  'text': 'test01',  'url': 'test01.html' },
...

LIS la DOC !!! *

* La doc est en anglais, mais tu es Canadien : ça ne devrait pas poser de problème, si ?

**denclout** · 24/11/2019, 01h25

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 :

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

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 !

Ajouter des liens dans une image

JavaScript

Discussions similaires

Partager

Partager