Faire deux défilements d'images sur une même page
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:
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 :)
