Bloquer les boutons d'un défilement d'images
Bonjour à tous ^^,
je suis nouvelle inscrite sur ce forum mais j'y viens souvent pour trouver des réponses à mes questions.
Mais en ce moment je travaille sur quelque chose qui me pose un problème dont je n'ai pu trouver de solution.
Je me suis donc décidé à vous demander directement si vous pouviez m'y aider.
Voilà il s'agit d'un code pour faire défiler des images avec un bouton avant et un après.
Le code fonctionne mais j'aimerais inclure la possibilité pour n'importe qui d'ajouter des images dans ce défilement.
J'ai pour cela augmenté le nombre d'image maximum à 100 mais malheureusement comme pour le moment mon dossier n'en comporte que quatre et bien après la quatrième image ou avant la première mes boutons continuent de reculer ou d'avancer dans le vide alors que j'aimerais qu'il reste bloquer à la dernière ou la première image disponible pour le moment.
Mon but est que mon défilement d'image soit mis à jour facilement par une personne qui n'y connait rien en code et à qui je laisserais cette page.
(j'espère être assez clair)
Voici le code que j'ai utilisé.
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
| <HTML>
<head>
<script language="JavaScript">
<!--
function recomail()
{
mail_str = "mailto:?subject=Regarde " + document.title;
mail_str += "&body=Cette page peut t'interesser " + document.title;
mail_str += " et elle est disponible à l'adresse : " + location.href;
location.href = mail_str;
}
//-->
</script>
<title>Annonces de l'Eglise Adventiste du 7eme jour</title>
<SCRIPT LANGUAGE="JavaScript">
var compteur = 1
var nbr_image = 100
function decremente(arg)
{
if (compteur == 0)
{
compteur = nbr_image
}
document.images[0].src = "annonce"+compteur+".jpg"
compteur --
}
function incremente(arg)
{
compteur ++
if (compteur == (nbr_image+1))
{
compteur = 1
}
document.images[0].src = "annonce"+compteur+".jpg"
}
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">
<!--
body {
background-color: #FFFFFF;
background-image: url(titre.jpg);
background-repeat: no-repeat;
}
a:link {
color: #808080;
}
a:visited {
color: #808080;
}
a:hover {
color: #808080;
}
a:active {
color: #808080;
}
.Style1 {font-family: Arial}
.Style2 {font-family: Arial; font-weight: bold; }
-->
</style></head>
<BODY>
<FORM>
<center>
<p><br>
</p>
<p> </p>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" bordercolor="#11111111" bgColor="#DBDBDB">
<tr>
<td align="center"> <img src="annonce1.jpg" border="0"> </td>
</tr>
</table>
</div>
<p align="center"><br>
<input type="button" value="precedent" onClick="decremente(this.arg)">
* * * *
<input type="button" value="suivant" onClick="incremente(this.arg)">
</p>
</div></td>
</tr>
<tr>
<td><div align="center">
<table width="485" border="0">
<tr>
<td width="273"><div align="center"><img src="print.GIF" width="16" height="14"> <span class="Style3 Style1"><strong><a href="javascript:self.print()">Imprimer </a></strong></span> </div></td>
<td width="273"><div align="center"><img src="mail.gif"> <a href="javascript:recomail()" class="Style2">Envoyer cette page à un ami</a></div></td>
</tr>
</table>
</div></td>
</tr>
</table>
<p> </p>
<p> </p>
</body>
</html> |
(Peut être pourra-t-il même servir à des personnes cherchant à créer le même système avec ma contrainte en moins ^^)
Merci d'avance quelque soit vos réponses.
(J'ai plutôt un niveau de débutant pour tout ce qui est programmation mais je n'ai pas peur de faire des efforts.
Ce code aussi simple qu'il puisse être m'a demandé beaucoup de temps à comprendre et à modifier.)
