plugin jScratchCard, les images en dessous de la zone à gratter s'affichent !

**ingeniomatique** · 20/02/2011, 23h51

Bonjour à tous,

Dans le cadre d'un jeu, j'ai plusieurs images à gratter comportant différents gains.

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
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/jquery.jScratchcard.js" ></script>
<script type="text/javascript">
	$(window).load(function() {
		$("#image1").jScratchcard({
			opacity: 0.9,
			color: '#D4A017',
			stepx: 24,
			stepy: 25,
			mousedown: false
		});
		$("#image2").jScratchcard({
			opacity: 0.9,
			color: '#D4A017',
			stepx: 24,
			stepy: 25,
			mousedown: false
		});
		$("#image3").jScratchcard({
			opacity: 0.9,
			color: '#D4A017',
			stepx: 24,
			stepy: 25,
			mousedown: false
		});
	});
</script>

Le souci est que les images EN DESSOUS de la zone à gratter s'affichent une seconde avant que la zone à gratter n'apparaissent.
Il n'y a donc plus aucun suspense ni intérêt à gratter.
=> Comment résoudre ce souci ?

Par ailleurs je souhaiterais afficher une alerte dès lors qu'environ 80 % de la zone à gratter a été grattée.
=> Savez vous comment faire ?

Merci beaucoup par avance,
Antoine

**Gaetan_** · 21/02/2011, 09h20

Je crois que tu as eu ta réponse sur un autre forum où tu as posé exactement la même question

**ingeniomatique** · 21/02/2011, 11h33

Bonjour Gaetan,
Pas exactement non

J'ai finalement utilisé la fonction de changement de SRC au bout d'une seconde pour afficher l'image plus tard.

Par contre je ne parviens pas à afficher une ALERT TEXTE pour l'utilisateur dès lors qu'il a gratté une grande partie de l'image... Pouvez vous m'y aider ?

Antoine

**danielhagnoul** · 22/02/2011, 23h30

Bonsoir

Il faut mettre une image blanche par défaut puis la changer dynamiquement après le chargement du plugin.

Le plugin joue sur l'opacité de la zone à gratter, il faut donc déclencher une alerte lorsque la valeur d'opacity est <= 0.2 * sa valeur d'origine.

**ingeniomatique** · 23/02/2011, 10h40

Merci pour cette réponse efficace.

Comment, concrètement, faire en sorte de déclencher l'alerte quand l'opacité est inférieure à telle ou telle valeur ?
Cela sous entend de vérifier à chaque mouvement de l'utilisateur où en est l'opacité...
Merci par avance de votre aide

**danielhagnoul** · 24/02/2011, 00h05

Bonsoir

Exemple :

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
<!doctype html>
<html lang="fr">
<head>
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/humanity/jquery-ui.css">	
	<style>
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
        #conteneur {
            background-color:red;
            opacity: 0.9;
        }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<div id="conteneur">
       <button id="dvjhBtnID">Éclaircir</button>
	</div>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
	<script>
		$(function(){
            var obj = $("#conteneur"),
                limite = obj.css("opacity") * 0.2;
 
            $("#dvjhBtnID").click(function(){
                var n = obj.css("opacity");
 
                if (n > limite){
                    obj.css("opacity", n - 0.15);
                } else {
                    alert ("L'opacité a atteint sa valeur limite !");
                }
            });
		});
	</script>
</body>  
</html>

**ingeniomatique** · 24/02/2011, 14h33

Merci. Je ne parviens cependant pas à bidouiller ce script comme j'aimerais.

Voici ce que j'ai chez moi :

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
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/jquery.jScratchcard.js" ></script>
<script type="text/javascript">
	$(window).load(function() {
		$("#image1").jScratchcard({
			opacity: 0.9,
			color: '#D4A017',
			stepx: 24,
			stepy: 25,
			mousedown: false
		});
		$("#image2").jScratchcard({
			opacity: 0.9,
			color: '#D4A017',
			stepx: 24,
			stepy: 25,
			mousedown: false
		});
		$("#image3").jScratchcard({
			opacity: 0.9,
			color: '#D4A017',
			stepx: 24,
			stepy: 25,
			mousedown: false
		});
		setTimeout("Picture2()",400);
	});
</script>

=> Le script contenant mes 3 images complètement cachées, que l'utilisateur gratte pour les faire apparaître.

Code :

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

1
2
3
<td width="106"><img src="Images/Jeux/black.png" width="97" height="203" id="image1"></td>
            <td width="105"><img src="Images/Jeux/black.png" width="97" height="203" id="image2"></td>
            <td><img src="Images/Jeux/black.png" width="97" height="203" id="image3"></td>

=> L'affichage de ces 3 images entre <body> et </body>

En fait, l'objectif serait que lorsque 80 % du total des 3 images (donc en moyenne) est gratté (donc révélé), l'alerte apparaisse.

Merci beaucoup par avance de votre aide.

Antoine

**ingeniomatique** · 27/02/2011, 12h13

3 jours plus tard je me permets une relance.
Bon week end à tous et merci par avance.

plugin jScratchCard, les images en dessous de la zone à gratter s'affichent !

jQuery

Discussions similaires

Partager

Partager