Ouverture progressive d'image

**filtep** · 04/11/2013, 21h00

Bonsoir à tous,

j'ai fait une petite fonction qui ouvre en développé progressif une image dont l'adresse est transmise sous forme de variable à la fonction depuis un click sur une vignette. Selon la vignette clickée, l'image développée sera bien entendu différente.
Mon problème vient du fait que la variable se réinitialise au cours des boucles de la fonction et du coup, l'image développée est toujours la même. La variable est pourtant bien transmise initialement car j'ai testé avec un break au premier tour et là l'image est la bonne; dès le second tour la variable semble "réinitialisée" et l'image n'est alors plus la bonne

Est-ce un problème de déclaration de variable ???

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
 
<head>
<script language="javascript">
function ouvre(nomimage)
{ temoin=1;
     if(document.getElementById){
 
        hautimage -=1.5;
        gaucheimage -=1.8;
        haut +=3;
        larg +=3.6;
        document.getElementById("bloc_pres").style.top = hautimage+"%";
        document.getElementById("bloc_pres").style.left = gaucheimage+"%";
        document.getElementById("bloc_pres").style.height = haut+"%";
        document.getElementById("bloc_pres").style.width = larg+"%";
        document.getElementById("bloc_pres").style.border = "solid 2px black";
		document.getElementById("image_bloc_pres").src = nomimage;
		 }
		if (larg < 70)
        {setTimeout('ouvre(nomimage)', 10);}
       }
	  temoin=0;
}
 
</script>
 
</head>
<body>
<SCRIPT LANGUAGE="javascript">
var hautimage =50;
var gaucheimage = 50;
var haut = 0;
var larg = 0;
var temoin=0;
var nomimage='v4.jpg'
var texte=""
 
document.write('<div id="bloc_pres"  height='+haut+'px;  width='+larg+'px ; style="position:absolute;top:'+hautimage+'%; left:'+gaucheimage+'%;"><img class="fermer_bloc_pres" src="bouton_fermer.jpg" onclick="fermer()"><img id="image_bloc_pres" src='+nomimage+'  "><div class="descriptif_bloc_pres" id="descript"></div></div>')
</SCRIPT>
<div class="mosaique">
	   <img src="v1.jpg" class="image_mosaique" onclick="ouvre('v1.jpg');">	  
	   <img src="v2.jpg" class="image_mosaique" onclick="ouvre('v2.jpg');">
	   <img src="v3.jpg" class="image_mosaique" onclick="ouvre('v3.jpg');">
	   <img src="v4.jpg" class="image_mosaique" onclick="ouvre('v4.jpg');">	 
	   <img src="v5.jpg" class="image_mosaique" onclick="ouvre('v5.jpg');">	 
	   <img src="v6.jpg" class="image_mosaique" onclick="ouvre('v6.jpg');">	
	   <img src="v7.jpg" class="image_mosaique" onclick="ouvre('v7.jpg');">	 
	   <img src="v8.jpg" class="image_mosaique" onclick="ouvre('v8.jpg');">	  
	   <img src="v9.jpg" class="image_mosaique" onclick="ouvre('v9.jpg');">	 
	   <img src="v10.jpg" class="image_mosaique" onclick="ouvre('v10.jpg');">	 
	   <img src="v11.jpg" class="image_mosaique" onclick="ouvre('v11.jpg');">	 
	   <img src="v12.jpg" class="image_mosaique" onclick="ouvre('v12.jpg');">	 
	   <img src="v13.jpg" class="image_mosaique" onclick="ouvre('v13.jpg');">	 
	   <img src="v14.jpg" class="image_mosaique" onclick="ouvre('v14.jpg');">	 
	   <img src="v15.jpg" class="image_mosaique" onclick="ouvre('v15.jpg');">
 
	</div>
</body>

Donc je galère...

Merci pour votre aide

A+
Philippe

**filtep** · 04/11/2013, 23h16

Bon, eh bien je me suis inspiré de le réponde de SylvainPV dans un des posts précédents sur le SetTimeOut:

EXPLICATIONS:
le click sur la vignette envoie sur une fonction 'préouvre' avec en paramètre l'adresse de l'image à afficher. La fonction 'préouvre' initialise une variable portant le nom de l'image transmis par le click sur la vignette et appelle la fonction ouvre dont la variable 'nomimage' est maintenant fixée.
L'affaire est dans le sac

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
 
<head>
<script language="javascript">
function preouvre(nomimage)
{ mypicture = nomimage;
ouvre(mypicture); }
 
 
function ouvre(nomimage)
{ temoin=1;
     if(document.getElementById){
 
        hautimage -=1.5;
        gaucheimage -=1.8;
        haut +=3;
        larg +=3.6;
        document.getElementById("bloc_pres").style.top = hautimage+"%";
        document.getElementById("bloc_pres").style.left = gaucheimage+"%";
        document.getElementById("bloc_pres").style.height = haut+"%";
        document.getElementById("bloc_pres").style.width = larg+"%";
        document.getElementById("bloc_pres").style.border = "solid 2px black";
		document.getElementById("image_bloc_pres").src = mypicture;
		 }
		if (larg < 70)
        {setTimeout('ouvre(mypicture)', 10);}
 
	  temoin=0;
}
 
</script>
 
</head>
<body>
<SCRIPT LANGUAGE="javascript">
var hautimage =50;
var gaucheimage = 50;
var haut = 0;
var larg = 0;
var temoin=0;
var nomimage='v4.jpg'
var texte=""
 
document.write('<div id="bloc_pres"  height='+haut+'px;  width='+larg+'px ; style="position:absolute;top:'+hautimage+'%; left:'+gaucheimage+'%;"><img class="fermer_bloc_pres" src="bouton_fermer.jpg" onclick="fermer()"><img id="image_bloc_pres" src='+nomimage+'  "><div class="descriptif_bloc_pres" id="descript"></div></div>')
</SCRIPT>
<div class="mosaique">
<img src="v1.jpg" class="image_mosaique" onclick="preouvre('v1.jpg');">	  
	   <img src="v2.jpg" class="image_mosaique" onclick="preouvre('v2.jpg');">
	   <img src="v3.jpg" class="image_mosaique" onclick="preouvre('v3.jpg');">
	   <img src="v4.jpg" class="image_mosaique" onclick="preouvre('v4.jpg');">	 
	   <img src="v5.jpg" class="image_mosaique" onclick="preouvre('v5.jpg');">	 
	   <img src="v6.jpg" class="image_mosaique" onclick="preouvre('v6.jpg');">	
	   <img src="v7.jpg" class="image_mosaique" onclick="preouvre('v7.jpg');">	 
	   <img src="v8.jpg" class="image_mosaique" onclick="preouvre('v8.jpg');">	  
	   <img src="v9.jpg" class="image_mosaique" onclick="preouvre('v9.jpg');">	 
	   <img src="v10.jpg" class="image_mosaique" onclick="preouvre('v10.jpg');">	 
	   <img src="v11.jpg" class="image_mosaique" onclick="preouvre('v11.jpg');">	 
	   <img src="v12.jpg" class="image_mosaique" onclick="preouvre('v12.jpg');">	 
	   <img src="v13.jpg" class="image_mosaique" onclick="preouvre('v13.jpg');">	 
	   <img src="v14.jpg" class="image_mosaique" onclick="preouvre('v14.jpg');">	 
	   <img src="v15.jpg" class="image_mosaique" onclick="preouvre('v15.jpg');">
 
	</div>
</body>

Si ça peut aider quelqu'un..
Remerciements indirects à Sylvain

A+
Philippe

Ouverture progressive d'image

JavaScript

Discussions similaires

Partager

Partager