Faire deux défilements d'images sur une même page

**ndsaerith** · 14/08/2007, 22h56

Bonsoir otut le monde,

Voila, je suis sur un problème depuis le debut de la journée.
Je réalise unsite. il y a deux parties principales : le menu et l'écran principal.
J'ai fait un tableau pour les séparer.
Dans l'écran principale il y a deux 'écrans', c'est à dire deux carrés ou il y aura des images.

Chaque menu permet de visualiser un couple d'image (1 image par écran)

jusque là tout va bien.

Mais il doit être possible de présenter plusieurs versions de ce menu (plusieurs couples d'images). Pour cela, le mécanisme du défilement à été choisi. -> Donc pour un menu on doit pouvoir faire défiler plusieurs coupkes d'images.

Pour l'instant j'ai réussi à faire défiler une partie d'un couple pour un menu (oui c'est maigre :p:p) Pour cela j'ai récupéré un code javascript mais je n'en ai jamais fait et je ne sais pas trop quoi modifier pour que ça marche. Voici ma page de 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
 
<html>
<head>
<STYLE type="text/css">
P{ text-indent:30px}
</style>
<title>** AlfaDir **</title>
 
<!-- DEBUT DU SCRIPT Pour le défilement des images-->
<SCRIPT LANGUAGE="JavaScript">
imgPath = new Array;
SiClickGoTo = new Array;
if (document.images)
	{
	i0 = new Image;
	i0.src = 'images/Skin_1/logo.jpg';
	SiClickGoTo[0] = "";
	imgPath[0] = i0.src;
	i1 = new Image;
	i1.src = 'images/Skin_1/Client01.jpg';
	SiClickGoTo[1] = "";
	imgPath[1] = i1.src;
	i2 = new Image;
	i2.src = 'images/Skin_1/Client02.jpg';
	SiClickGoTo[2] = "";
	imgPath[2] = i2.src;
	}
a = 0;
function ejs_img_fx(img)
	{
	if(img && img.filters && img.filters[0])
		{
		img.filters[0].apply();
		img.filters[0].play();
		}
	}
 
function StartAnim()
	{
	if (document.images)
		{
		document.write('<A HREF="#" onClick="ImgDest();return(false)"><IMG SRC="images/Skin_1/logo.jpg" BORDER=0 ALT=Menu NAME=defil style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=100,Duration=1)"></A>');
		defilimg()
		}
	else
		{
		document.write('<A HREF=""><IMG SRC="images/Skin_1/logo.jpg" BORDER=0></A>')
		}
	}
function ImgDest()
	{
	document.location.href = SiClickGoTo[a-1];
	}
function defilimg()
	{
	if (a == 3)
		{
		a = 0;
		}
	if (document.images)
		{
		ejs_img_fx(document.defil)
		document.defil.src = imgPath[a];
		tempo3 = setTimeout("defilimg()",3000);
		a++;
		}
	}
</SCRIPT>
<!-- FIN DU SCRIPT -->
 
</head>
<body topmargin="3"><font face="Times New Roman, Times, serif" style="overflow:hidden">
<table border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td background="images/MenuBlanc.jpg" align="left" valign="top" width="304">
			<br><br><center>LOGO</center><br><br>
			<br><p><a href="?page=1">Skin 1</a></p>
			<p><a href="?page=2">Skin 2</a></p>
			<p><a href="?page=3">Skin 3</a></p>
		</td><!--<td width="518" colspan="2"><img src="images/DsBlanche.jpg" border="0" vspace="0" hspace="0" align="left"></td>-->
		<td colspan="3">
			<TABLE WIDTH=540 BORDER=0 CELLPADDING=0 CELLSPACING=0>
				<TR>
					<TD COLSPAN=3>
						<IMG SRC="images/NDS_Blanche_01.jpg" WIDTH=540 HEIGHT=41 ALT=""></TD>
				</TR>
				<TR>
					<TD ROWSPAN=4>
						<IMG SRC="images/NDS_Blanche_02.jpg" WIDTH=143 HEIGHT=522 ALT=""></TD>
					<TD height="192"><?php
                                                if (isset($_GET["page"])) $page = $_GET["page"];
                                                else $page = 0;
                                                switch ($page) {
                                                        case 1 : echo"<SCRIPT LANGUAGE='JavaScript'>StartAnim()</SCRIPT>"; break;
                                                        case 2 : echo"<img src='images/Skin_1/Client02.jpg'>"; break;
                                                        case 3 : echo"<img src='images/Skin_1/Client01.jpg'>"; break;
                                                        default : echo"<img src='images/Skin_1/logo.jpg'>"; break;
                                                }                                                 
                                        ?><!--<SCRIPT LANGUAGE="JavaScript">StartAnim()</SCRIPT><IMG SRC="images/NDS_Blanche_03.jpg" WIDTH=256 HEIGHT=192 ALT="">--></TD>
					<TD ROWSPAN=4>
						<IMG SRC="images/NDS_Blanche_04.jpg" WIDTH=141 HEIGHT=522 ALT=""></TD>
				</TR>
				<TR>
					<TD>
						<IMG SRC="images/NDS_Blanche_05.jpg" WIDTH=256 HEIGHT=94 ALT=""></TD>
				</TR>
				<TR>
					<TD height="192"><?php
                                                if (isset($_GET["page"])) $page = $_GET["page"];
                                                else $page = 0;
                                                switch ($page) {
                                                        case 1 : echo"<img src='images/Skin_1/Client01.jpg'>"; break;
                                                        case 2 : echo"<img src='images/Skin_1/Desk01.jpg'>"; break;
                                                        case 3 : echo"<img src='images/Skin_1/Desk02.jpg'>"; break;
                                                        default : echo"<img src='images/Skin_1/Client01.jpg'>"; break;
                                                }                                                 
                                        ?><!--<IMG SRC="images/NDS_Blanche_06.jpg" WIDTH=256 HEIGHT=192 ALT="">testSkinBas3.jpg--></TD>
				</TR>
				<TR>
					<TD>
						<IMG SRC="images/NDS_Blanche_07.jpg" WIDTH=256 HEIGHT=44 ALT=""></TD>
				</TR>
			</TABLE>		
		</td>
	</tr>
	<tr>
		<td align="center">Visuel <a href="indexNoir.htm">noir</a>  /  <a href="index.php">Blanc</a></td>
		<td align="center">Télécharger ce skin...</td>
		<td align="center">Description du skin...</td>
	</tr>
</table>
</font>
</body>
</html>

En fait il me manque :
-> comment faire deux défilements sur la même page
-> comment faire un nouveau couple de défilement? (car la il y a 3 images qui defilent pour le 1er menu seulement)

Voila voila ^^
J'espère que je ne me suis pas trop embrouillée car je suis embourbée dedan depuis le début de l'après midi alors ^^

Voila merci à vous tous d'avance

Et bonne nuit

**SpaceFrog** · 15/08/2007, 12h36

il suffit de créer une nouvelle instance de la fonction de défilement en y passant en paramètre le nom de images ou éléments à déplace

Code :

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

new function StartAnim(monimage)

**ndsaerith** · 15/08/2007, 12h52

Bonjour

merci de m'avoir lu ^^

je voulais te demander où je doit le mettre, car j'ai tenté à laplace où je veux le 2ème défilement, en suivant le même modèle d'où il y a le 1er mais cela ne marche pas :

Code :

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

1
2
3
4
5
6
7
8
9
10
<TD height="192"><?php
		if (isset($_GET["page"])) $page = $_GET["page"];
		else $page = 0;
		switch ($page) {
			case 1 : echo"<SCRIPT LANGUAGE='JavaScript'>new function StartAnim(images/Skin_1/Client01.jpg)</SCRIPT>"; break;
			case 2 : echo"<img src='images/Skin_1/Desk01.jpg'>"; break;
			case 3 : echo"<img src='images/Skin_1/Desk02.jpg'>"; break;
		             default : echo"<img src='images/Skin_1/Client01.jpg'>"; break;
						}						  
					?></TD>

**SpaceFrog** · 15/08/2007, 15h44

heu désolé essaye ça :

Code :

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

<SCRIPT type='text/javascript'>new StartAnim(images/Skin_1/Client01.jpg)</SCRIPT>

et également à chaque appel des autres fonctions

**ndsaerith** · 21/08/2007, 21h02

Re coucou tout le monde

Je me permet de faire un up car je n'arrive pas à m'en sortir.... Je vous donne mon code à ce jour :

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
<html>
<head>
<STYLE type="text/css">
P{text-indent:30px}
</style>
<title>** AlfaDir **</title>
 
<!-- DEBUT DU SCRIPT Pour le défilement des images-->
<SCRIPT LANGUAGE="JavaScript">
imgPath = new Array;
SiClickGoTo = new Array;
if (document.images)
	{
	i0 = new Image;
	i0.src = 'images/Skin_1/logo.jpg';
	SiClickGoTo[0] = "";
	imgPath[0] = i0.src;
	i1 = new Image;
	i1.src = 'images/Skin_1/Client01.jpg';
	SiClickGoTo[1] = "";
	imgPath[1] = i1.src;
	i2 = new Image;
	i2.src = 'images/Skin_1/Client02.jpg';
	SiClickGoTo[2] = "";
	imgPath[2] = i2.src;
	}
a = 0;
function ejs_img_fx(img)
	{
	if(img && img.filters && img.filters[0])
		{
		img.filters[0].apply();
		img.filters[0].play();
		}
	}
 
function StartAnim()
	{
	if (document.images)
		{
		document.write('<A HREF="#" onClick="ImgDest();return(false)"><IMG SRC="images/Skin_1/logo.jpg" BORDER=0 ALT=Menu NAME=defil style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=100,Duration=1)"></A>');
		defilimg()
		}
	else
		{
		document.write('<A HREF=""><IMG SRC="images/Skin_1/logo.jpg" BORDER=0></A>')
		}
	}
function ImgDest()
	{
	document.location.href = SiClickGoTo[a-1];
	}
function defilimg()
	{
	if (a == 3)
		{
		a = 0;
		}
	if (document.images)
		{
		ejs_img_fx(document.defil)
		document.defil.src = imgPath[a];
		tempo3 = setTimeout("defilimg()",3000);
		a++;
		}
	}
</SCRIPT>
<!-- FIN DU SCRIPT -->
 
</head>
<body topmargin="3"><font face="Times New Roman, Times, serif" style="overflow:hidden">
<table border="0" align="center" cellpadding="0" cellspacing="0">
	<tr>
		<td background="images/MenuBlanc.jpg" align="left" valign="top" width="304">
			<br><br><center>LOGO</center><br><br>
			<br><p><a href="?page=1">Skin 1</a></p>
			<p><a href="?page=2">Skin 2</a></p>
			<p><a href="?page=3">Skin 3</a></p>
		</td><!--<td width="518" colspan="2"><img src="images/DsBlanche.jpg" border="0" vspace="0" hspace="0" align="left"></td>-->
		<td colspan="3">
			<TABLE WIDTH=540 BORDER=0 CELLPADDING=0 CELLSPACING=0>
				<TR>
					<TD COLSPAN=3>
						<IMG SRC="images/NDS_Blanche_01.jpg" WIDTH=540 HEIGHT=41 ALT=""></TD>
				</TR>
				<TR>
					<TD ROWSPAN=4>
						<IMG SRC="images/NDS_Blanche_02.jpg" WIDTH=143 HEIGHT=522 ALT=""></TD>
					<TD height="192"><?php
                                                if (isset($_GET["page"])) $page = $_GET["page"];
                                                else $page = 0;
                                                switch ($page) {
                                                        case 1 : echo"<SCRIPT LANGUAGE='JavaScript'>StartAnim()</SCRIPT>"; break;
                                                        case 2 : echo"<img src='images/Skin_1/Client02.jpg'>"; break;
                                                        case 3 : echo"<img src='images/Skin_1/Client01.jpg'>"; break;
                                                        default : echo"<img src='images/Skin_1/logo.jpg'>"; break;
                                                }                                                 
                                        ?><!--<SCRIPT LANGUAGE="JavaScript">StartAnim()</SCRIPT><IMG SRC="images/NDS_Blanche_03.jpg" WIDTH=256 HEIGHT=192 ALT="">--></TD>
					<TD ROWSPAN=4>
						<IMG SRC="images/NDS_Blanche_04.jpg" WIDTH=141 HEIGHT=522 ALT=""></TD>
				</TR>
				<TR>
					<TD>
						<IMG SRC="images/NDS_Blanche_05.jpg" WIDTH=256 HEIGHT=94 ALT=""></TD>
				</TR>
				<TR>
					<TD height="192"><?php
                                                if (isset($_GET["page"])) $page = $_GET["page"];
                                                else $page = 0;
                                                switch ($page) {
                                                        case 1 : echo"<SCRIPT type='text/javascript'>new StartAnim(images/Skin_1/Client01.jpg)</SCRIPT>"; break;
                                                        case 2 : echo"<img src='images/Skin_1/Desk01.jpg'>"; break;
                                                        case 3 : echo"<img src='images/Skin_1/Desk02.jpg'>"; break;
                                                        default : echo"<img src='images/Skin_1/Client01.jpg'>"; break;
                                                }                                                 
                                        ?><!--<IMG SRC="images/NDS_Blanche_06.jpg" WIDTH=256 HEIGHT=192 ALT="">testSkinBas3.jpg--></TD>
				</TR>
				<TR>
					<TD>
						<IMG SRC="images/NDS_Blanche_07.jpg" WIDTH=256 HEIGHT=44 ALT=""></TD>
				</TR>
			</TABLE>		
		</td>
	</tr>
	<tr>
		<td align="center">Visuel <a href="indexNoir.htm">noir</a>  /  <a href="index.php">Blanc</a></td>
		<td align="center">Télécharger ce skin...</td>
		<td align="center">Description du skin...</td>
	</tr>
</table>
</font>
</body>
</html>

Pour l'instant il n'y a que les images du haut qui defile, celles du bas ne s'affichent pas du tout.
on m'a donner une piste comme quoi on ne devait pas se servir du new functon de ectte manière.
Auriez vous une solution?

Merci beaucoup beaucoup d'avance

**SpaceFrog** · 22/08/2007, 10h20

si tu pouvais directement nous donner le html généré ... plutot que le php.

arrf en plus c'est un truc exclusif IE ...

Code :

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

style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=100,Duration=1)"

Dis nous plutot ce que tu souhaites que l'on tente de faire un code correct ...

Faire deux défilements d'images sur une même page

JavaScript

Vue hybride

Discussions similaires

Partager

Partager