[POO] Class Défilementa automatique d'images avec animation

Version imprimable

e suis sur d'etre pret du but et je suis également convaincu que ce script peut servir à bcp de personne.

Ceci ma première tentative avec la POO javascript cela explique peut etre ce message, cependant j'ai beau retourné le problème dans tous les sens je ne trouve pas d'ou viens l'erreur

J'ai creer ma class qui dois me crer une boxe ou des images défile en alternance avec une animation de transition.

Je crois avoir remarqué que seTimeout(this.mafonction,time) marche pas j'ai essayer différente syntaxe ça provoque une drole de réaction... soit j'ai un problème de récursion soit je perd mon objet en cours de route du coup plus de propriétés plus de variable...

Toute aide sera la bienvenue d'avance je vous en remercie...

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
<SCRIPT type="text/javascript">
// ===== Constructeur de l'objet ====================
function cl_imgDia(id,time,imgPath,imgLink,txtText,txtLink){
this.id = id;
this.time = time;
this.index = 0;
 
this.imgPath = imgPath;
this.imgLink = imgLink;
this.txtText = txtText;
this.txtLink = txtLink;
 
this.imgNbr = this.imgPath.length;
 
// Méthode
this.startDia = startDia;
this.defilDia = defilDia;
this.filterDia = filterDia;
 
}
 
//======= Commence l'écriture de la dia =============
function startDia(){
if (document.images) {
document.write('<A id="link_'+this.id+'" HREF="#"><IMG id="img_'+this.id+'" id="name_'+this.id+'" SRC="./img/mini" BORDER=0 ALT=Menu style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=100,Duration=1)"></A><BR><A id="linktext_'+this.id+'" href="./events.php"><FONT id="text_'+this.id+'">TEST</FONT></A>');
this.defilDia();
}
else{
document.write('<A id="link_'+this.id+'" HREF="#"><IMG SRC="./img/mini" BORDER=0></A><BR><A id="linkevent_diapo" href="./events.php"><FONT id="text_'+this.id+'">TEST A</FONT></A>');
}
}
 
//======= Defile les images ================
function defilDia(){
if (a == this.imgNbr){
a = 0;
}
document.getElementById('text_'+this.id).innerHTML = this.txtText[a];
document.getElementById('link_'+this.id).href = this.imgLink[a];
document.getElementById('linktext_'+this.id).href = this.txtLink[a];
if (document.images){
name_img = 'name_'+this.id;
this.filterDia(document.name_img);
document.getElementById('img_'+this.id).src = imgPath[a];
tempo3 = setTimeout("this.defilDia()",this.time);
a++;
}
}
function filterDia(img){
if(img && img.filters && img.filters[0]){
img.filters[0].apply();
img.filters[0].play();
}
}
 
</SCRIPT>
 
<SCRIPT type="text/javascript">
imgPath = new Array;
imgText = new Array;
eventID = new Array;
SiClickGoTo = new Array;
if (document.images)
{
i0 = new Image;
i0.src = "./img/mini/4.jpg";
SiClickGoTo[0] = "./showphoto.php?img=4";
imgPath[0] = i0.src;
imgText[0] = "Texte 0";
eventID[0] = "3";
 
i1 = new Image;
i1.src = "./img/mini/8.jpg";
SiClickGoTo[1] = "./showphoto.php?img=8";
imgPath[1] = i1.src;
imgText[1] = "Texte 1";
eventID[1] = "4";
 
i2 = new Image;
i2.src = "./img/mini/3.jpg";
SiClickGoTo[2] = "./showphoto.php?img=3";
imgPath[2] = i2.src;
imgText[2] = "Texte 2";
eventID[2] = "3";
 
i3 = new Image;
i3.src = "./img/mini/2.jpg";
SiClickGoTo[3] = "./showphoto.php?img=2";
imgPath[3] = i3.src;
imgText[3] = "Texte 3";
eventID[3] = "4";
 
i4 = new Image;
i4.src = "./img/mini/3.jpg";
SiClickGoTo[4] = "./showphoto.php?img=3";
imgPath[4] = i4.src;
imgText[4] = "Texte 4";
eventID[4] = "4";
 
i5 = new Image;
i5.src = "./img/mini/7.jpg";
SiClickGoTo[5] = "./showphoto.php?img=7";
imgPath[5] = i5.src;
imgText[5] = "Texte 5";
eventID[5] = "3";
 
}
a = 0;
 
</SCRIPT>
</HEAD>
 
<BODY>
<DIV style="border:1px solid black; float:left; ">
<SCRIPT language="JavaScript">
var event_1 = new cl_imgDia(1,4000,imgPath,SiClickGoTo,imgText,eventID);
event_1.startDia();
</SCRIPT>
</DIV>
</BODY>

14/01/2005, 09h09
SpaceFrog

et tu fais tous les forums comme ça ?
j'ai récupéré sur le net un script qui fait la même chose..; mais c'étaiot y'a un an...

merci tout de même pour ta générosité ... :wink:
14/01/2005, 10h11
rakoto.n

oui dsl je spam un peu tous les forums c'est assez urgent à vrai dire et j'ai déjà perdu pas mal de temps la dessus surtout que l'erreur me dépasse.:?

Pour ma générosité ya pas de problème les scripts coté clients sont franchement pas pour moi un grand act de générosité... :wink:

Mais tu sais tu serais encore plus généreux si t'arrivais à me résoudre le problème et comme ça on seraient deux personne très généreuses en communiquant cette petite source à la communauté develloper... :D

ou alors tu me communique ta source d'il y a un an mais je doute que ça soit une class...
14/01/2005, 10h17
SpaceFrog

le problème vient de this.time ... this est un référent relatif donc pas à sa place dans le setTimeout
d'ailleurs tu utilises le this à tous de bras !!!

As tu essayé avec une durée fixe !!

Code:

setTimeout("this.defilDia()",1000);
14/01/2005, 11h15
Matthieu2000

Citation:

<html>

<SCRIPT type="text/javascript">
// ===== Constructeur de l'objet ====================
// ===== Constructeur de l'objet ====================
function cl_imgDia(id,time,imgPath,imgLink,txtText,txtLink){
this.id = id;
this.time = time;
this.index = 0;

this.imgPath = imgPath;
this.imgLink = imgLink;
this.txtText = txtText;
this.txtLink = txtLink;

this.imgNbr = this.imgPath.length;

// Méthode
this.startDia = startDia;
this.defilDia = defilDia;
this.filterDia = filterDia;

}
//======= Commence l'écriture de la dia =============
function startDia(){
if (document.images) {
document.write('<A id="link_'+this.id+'" HREF="#"><IMG id="img_'+this.id+'" id="name_'+this.id+'" SRC="./img/mini" BORDER=0 ALT=Menu style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=100,Duration=1)"></A><BR><A id="linktext_'+this.id+'" href="./events.php"><FONT id="text_'+this.id+'">TEST</FONT></A>');
this.defilDia();
}
else{
document.write('<A id="link_'+this.id+'" HREF="#"><IMG SRC="./img/mini" BORDER=0></A><BR><A id="linkevent_diapo" href="./events.php"><FONT id="text_'+this.id+'">TEST A</FONT></A>');
}
}

//======= Defile les images ================
function defilDia(){
a++;
tempo3 = setTimeout("defilDia()",4000);
a = a % imgPath.length;

document.getElementById('text_'+'1').innerHTML = imgText[a];
document.getElementById('link_'+'1').href = imgPath[a];
document.getElementById('linktext_'+'1').href = imgText[a];
if (document.images){
name_img = 'name_'+a;
this.filterDia(eval('document.'+name_img));
document.getElementById('img_'+'1').src = imgPath[a];
}

}

function filterDia(img){
if(img && img.filters && img.filters[0]){
img.filters[0].apply();
img.filters[0].play();
}
}

</SCRIPT>

<SCRIPT type="text/javascript">
var imgPath = new Array();
var imgText = new Array();
var eventID = new Array();
var SiClickGoTo = new Array();

i0 = new Image();
i0.src = "./img/mini/4.jpg";
SiClickGoTo[0] = "./showphoto.php?img=4";
imgPath[0] = i0.src;
imgText[0] = "Texte 0";
eventID[0] = "3";

i1 = new Image();
i1.src = "./img/mini/8.jpg";
SiClickGoTo[1] = "./showphoto.php?img=8";
imgPath[1] = i1.src;
imgText[1] = "Texte 1";
eventID[1] = "4";

i2 = new Image();
i2.src = "./img/mini/3.jpg";
SiClickGoTo[2] = "./showphoto.php?img=3";
imgPath[2] = i2.src;
imgText[2] = "Texte 2";
eventID[2] = "3";

i3 = new Image();
i3.src = "./img/mini/2.jpg";
SiClickGoTo[3] = "./showphoto.php?img=2";
imgPath[3] = i3.src;
imgText[3] = "Texte 3";
eventID[3] = "4";

i4 = new Image();
i4.src = "./img/mini/3.jpg";
SiClickGoTo[4] = "./showphoto.php?img=3";
imgPath[4] = i4.src;
imgText[4] = "Texte 4";
eventID[4] = "4";

i5 = new Image();
i5.src = "./img/mini/7.jpg";
SiClickGoTo[5] = "./showphoto.php?img=7";
imgPath[5] = i5.src;
imgText[5] = "Texte 5";
eventID[5] = "3";

var a = 0;

</SCRIPT>
</HEAD>

<BODY>
<DIV style="border:1px solid black; float:left; ">
<SCRIPT language="JavaScript">
var event_1 = new cl_imgDia(1,4000,imgPath,SiClickGoTo,imgText,eventID);
event_1.startDia();
</SCRIPT>
</DIV>
</BODY>
</html>

a voir...
14/01/2005, 11h36
rakoto.n

:o okay je vais voir merci bcp je vais essayer tout ça... Merci encor

mais ya quand même quelque truc qui me semble bizare dans tout ça commme

Code:

document.getElementById('img_'+'1').src = imgPath[a];

Je comprend pas... d'ou sort cette ID ? ça correspond pas avec ce qui est définit.. enfin je verrais çA après manger... l'esprit reposé et le ventre plein

Je donnerais des nouvelles Merci
14/01/2005, 11h38
Matthieu2000

Citation:

event_1.startDia();

il n'y a que le premier "event" qui a été généré
14/01/2005, 11h56
rakoto.n
:?: Oui je sais mais
là ça me sert plus à rien de faire une class

Le but est quand même de pouvoir instanicer plusieur objet avec des id différents et ça dans la même page et avec des tablo propre à chaque objet...

alors que là ça modifie toute le temp les memes propriétés celle de img_1 link_1 linktext_1 ect...

et ça seulement si jinstancie mon objet avec l'id 1

Code:

var event_1 = new cl_imgDia([b]1[/b],4000,imgPath,SiClickGoTo,imgText,eventID);

mais mon but j'aurais peut etre du précisé je sais pas dsl...
c'est quand même de pouvoir instancier plusieurs objet différents exemple :
Code:

1 2 var dia1popo = new cl_imgDia(666,4000,imgPath1,SiClickGoTo1,imgText1,dia1popo); var dia2pipi = new cl_imgDia(346,4000,imgPath2,SiClickGoTo2,imgText2,dia2pipi);
bon par contre ya des trucs à reprendre dans la correction ça va m'être utile je t'en remercie mais par contre il me semble pas que je dis de bétise quand ça correspond pas à ce que j'attendais par contre j'ai peut être pas été clair sur ce que j'attendais je m'en excuse...

kdo :chin:

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
 
<html> 
 
<SCRIPT type="text/javascript"> 
 
// ===== Constructeur de l'objet ==================== 
function cl_imgDia(id,time,imgPath,imgLink,txtText,txtLink){ 
this.id = id; 
this.time = time; 
this.index = 0; 
 
this.imgPath = imgPath; 
this.imgLink = imgLink; 
this.txtText = txtText; 
this.txtLink = txtLink; 
 
this.imgNbr = this.imgPath.length; 
 
// Méthode 
this.startDia = startDia; 
this.defilDia = defilDia; 
this.filterDia = filterDia; 
 
} 
//======= Commence l'écriture de la dia ============= 
function startDia(){ 
if (document.images) { 
document.write('<A id="link_'+this.id+'" HREF="#"><IMG id="img_'+this.id+'" id="name_'+this.id+'" SRC="./img/mini" BORDER=0 ALT=Menu style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=100,Duration=1)"></A><BR><A id="linktext_'+this.id+'" href="./events.php"><FONT id="text_'+this.id+'">TEST</FONT></A>'); 
 
} 
else{ 
document.write('<A id="link_'+this.id+'" HREF="#"><IMG SRC="./img/mini" BORDER=0></A><BR><A id="linkevent_diapo" href="./events.php"><FONT id="text_'+this.id+'">TEST A</FONT></A>'); 
} 
} 
 
 
//======= Defile les images ================ 
function defilDia(){ 
a++; 
 
b = a % this.imgPath.length; 
 
document.getElementById('text_'+this.id).innerHTML = this.txtText[b]; 
document.getElementById('link_'+this.id).href = this.imgLink[b]; 
document.getElementById('linktext_'+this.id).href = this.txtLink[b]; 
 
if (document.images){ 
name_img = 'name_'+b; 
this.filterDia(eval('document.'+name_img)); 
document.getElementById('img_'+this.id).src = imgPath[b]; 
} 
 
} 
 
function filterDia(img){ 
if(img && img.filters && img.filters[0]){ 
img.filters[0].apply(); 
img.filters[0].play(); 
} 
} 
 
</SCRIPT> 
 
<SCRIPT type="text/javascript"> 
var imgPath = new Array(); 
var imgText = new Array(); 
var eventID = new Array(); 
var SiClickGoTo = new Array(); 
 
i0 = new Image(); 
i0.src = "./img/mini/4.jpg"; 
SiClickGoTo[0] = "./showphoto.php?img=4"; 
imgPath[0] = i0.src; 
imgText[0] = "Texte 0"; 
eventID[0] = "3"; 
 
i1 = new Image(); 
i1.src = "./img/mini/8.jpg"; 
SiClickGoTo[1] = "./showphoto.php?img=8"; 
imgPath[1] = i1.src; 
imgText[1] = "Texte 1"; 
eventID[1] = "4"; 
 
i2 = new Image(); 
i2.src = "./img/mini/3.jpg"; 
SiClickGoTo[2] = "./showphoto.php?img=3"; 
imgPath[2] = i2.src; 
imgText[2] = "Texte 2"; 
eventID[2] = "3"; 
 
i3 = new Image(); 
i3.src = "./img/mini/2.jpg"; 
SiClickGoTo[3] = "./showphoto.php?img=2"; 
imgPath[3] = i3.src; 
imgText[3] = "Texte 3"; 
eventID[3] = "4"; 
 
i4 = new Image(); 
i4.src = "./img/mini/3.jpg"; 
SiClickGoTo[4] = "./showphoto.php?img=3"; 
imgPath[4] = i4.src; 
imgText[4] = "Texte 4"; 
eventID[4] = "4"; 
 
i5 = new Image(); 
i5.src = "./img/mini/7.jpg"; 
SiClickGoTo[5] = "./showphoto.php?img=7"; 
imgPath[5] = i5.src; 
imgText[5] = "Texte 5"; 
eventID[5] = "3"; 
 
 
var a = 0; 
 
</SCRIPT> 
</HEAD> 
 
<BODY> 
<DIV style="border:1px solid black; float:left; "> 
<SCRIPT language="JavaScript"> 
var event_1 = new cl_imgDia(1,4000,imgPath,SiClickGoTo,imgText,eventID); 
event_1.startDia(); 
tempo3 = setInterval("event_1.defilDia()",4000);
</SCRIPT> 
</DIV> 
</BODY> 
</html>

PS : j'ai laissé le problème de la variable a :twisted:

:yaisse: C bon j'ai reussi! mais j'ai pas utilisé ton script haha :twisted: Mais c'étais sympa pour le kdo par contre pour le problème de la variable a ben je m'en fiche haha :twisted: tralallalère hehe ! :-D dsl je crack trop d'heure de fatigue à rattraper mais merci à tous pour vos intervention mine de rien ça m'as aidé à comprendre un special merci aussi a un ami :calin: ya ke ça de vrai les amis :D
voilà je vous poste le résultat :

Comme je suis généreux :wink: pfff...

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Document sans titre</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<SCRIPT type="text/javascript" >
// ===== Constructeur de l'objet ====================
function cl_imgDia(id,time,imgPath,imgLink,txtText,txtLink,objname){
	this.id = id;
	this.time = time;
	this.index = 0;
 
	this.imgPath = imgPath;
	this.imgLink = imgLink;
	this.txtText = txtText;
	this.txtLink = txtLink;
	this.objname = objname;
	this.imgNbr = this.imgPath.length;
 
	// Méthode
	this.startDia = startDia;
	this.defilDia = defilDia;
	this.filterDia = filterDia;
 
}
 
//======= Commence l'écriture de la dia =============
function startDia(){
	if (document.images)	{
		document.write('<A id="link_'+this.id+'" HREF="#"><IMG id="img_'+this.id+'" name="name_'+this.id+'" SRC="./img/mini" BORDER=0 ALT=Menu style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=100,Duration=1)<"></A><BR><A id="linktext_'+this.id+'" href="./events.php"><FONT id="text_'+this.id+'">TEST</FONT></A>');
		this.defilDia();
	}
	else{
		document.write('<A id="link_'+this.id+'" HREF="#"><IMG SRC="./img/mini" BORDER=0></A><BR><A id="linkevent_diapo" href="./events.php"><FONT id="text_'+this.id+'">TEST A</FONT></A>');
	}
}
 
//======= Defile les images ================
function defilDia(){
	if (this.index == this.imgNbr){
		this.index = 0;
	}
	document.getElementById('text_'+this.id).innerHTML = this.txtText[this.index]+" "+this.imgPath[this.index];
	document.getElementById('link_'+this.id).href = this.imgLink[this.index];
	document.getElementById('linktext_'+this.id).href = this.txtLink[this.index];
	if (document.images){
		name_img = 'name_'+this.id;
		this.filterDia(eval('document.'+name_img));
		document.getElementById('img_'+this.id).src = this.imgPath[this.index];
		tempo3 = setTimeout(this.objname+".defilDia()",this.time);
		this.index++;
	}
}
function filterDia(img){
	if(img && img.filters && img.filters[0]){
		img.filters[0].apply();
		img.filters[0].play();
	}
}
 
</SCRIPT>
 
<SCRIPT  type="text/javascript">
		imgPath = new Array;
		imgText = new Array;
		eventID = new Array;
		SiClickGoTo = new Array;
		if (document.images){
			i0 = new Image;
			i0.src = "./img/mini/4.jpg";
			SiClickGoTo[0] = "./showphoto.php?img=4";
			imgPath[0] = i0.src;
			imgText[0] = "adsgasdg";
			eventID[0] = "3";
 
			i1 = new Image;
			i1.src = "./img/mini/8.jpg";
			SiClickGoTo[1] = "./showphoto.php?img=8";
			imgPath[1] = i1.src;
			imgText[1] = "adsgasdgsdag";
			eventID[1] = "4";
 
			i2 = new Image;
			i2.src = "./img/mini/3.jpg";
			SiClickGoTo[2] = "./showphoto.php?img=3";
			imgPath[2] = i2.src;
			imgText[2] = "dgadsgasdgasd";
			eventID[2] = "3";
		}
		var imgPath2 = new Array(); 
		var imgText2 = new Array(); 
		var eventID2 = new Array(); 
		var SiClickGoTo2 = new Array(); 
		if (document.images){
			i4 = new Image;
			i4.src = "./img/mini/9.jpg";
			SiClickGoTo2[0] = "./showphoto.php?img=3";
			imgPath2[0] = i4.src;
			imgText2[0] = "Texte 4";
			eventID2[0] = "4";
 
			i5 = new Image;
			i5.src = "./img/mini/7.jpg";
			SiClickGoTo2[1] = "./showphoto.php?img=7";
			imgPath2[1] = i5.src;
			imgText2[1] = "Texte 5";
			eventID2[1] = "3";
		}
 
		a = 0;
 
</SCRIPT>
</HEAD>
 
<BODY>
<DIV align="center" style="border:1px solid black;">
	<SCRIPT language="JavaScript">
		var event_1 = new cl_imgDia(1,2000,imgPath,SiClickGoTo,imgText,eventID,'event_1');
		event_1.startDia();
	</SCRIPT>
</DIV>
<DIV align="center" style="border:1px solid black;">
	<SCRIPT language="JavaScript">
		var event_2 = new cl_imgDia(2,3000,imgPath2,SiClickGoTo2,imgText2,eventID2,'event_2');
		event_2.startDia();
	</SCRIPT>
</DIV>
</BODY>
</HTML>

voili voilou mini youpiii en l'honneur de moi ! :D