Comment modifier une partie d'url à l'aide de deux balises select en JS ?

**mathieu** · 27/03/2016, 18h28

les champs reprennent leur valeur par défaut parce que la page est rechargée au clic sur le bouton.
je pense que ça serait plus simple si le clic sur le bouton s'occupe d'appeler la fonction GenerateContent sans soumettre le formulaire

**Beginner.** · 28/03/2016, 04h26

Salut,

Comme l'a dit Mathieu (j'ai testé) :" les champs reprennent leur valeur par défaut parce que la page est rechargée au clic sur le bouton."

Une idée serait de remettre à jour les champs avec les valeurs qui ont été sélectionnées auparavant... On pourrait faire cela en se servant des paramètres...

J'ai testé ceci :

remplacer

Code html :

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

<body onLoad="initInput()">

par

Code html :

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

<body onLoad="initInputOnload()">

Et bien sûr ajouter la fonction initInputOnload() :

Code javascript :

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
 
function initInputOnload() {
 
    var strParameter = window.location.search;
 
    if (strParameter == '') {          
          initInput(); 
    }
          else { 
 
            var n = strParameter.lastIndexOf("/");         
            var type_region_fin = strParameter.slice(n+1).split("_");
 
            document.formulaire.type.value = type_region_fin[0];
            document.formulaire.region.value = type_region_fin[1];
            initInput();         
        } 
 
}

Voici toute la page pour tester... :

Code html :

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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
 
<!DOCTYPE html>
<html>
  <head>
 
    <title>Meteo Consorzio Lamma</title>
    <meta charset="UTF-8">
    <SCRIPT LANGUAGE=javascript>
    <!--
 
    // ---------------------------------------------------------------------------
    // -- Scriptname   : Javascript Fusker                                      --
    // -- Author       : Bas de Reuver                                          --
    // -- Date         : 8-may-2004                                             --
    // -- Description  : Sometimes someone put up lots of pictures (Pic001.jpg, --
    // --                Pic002.jpg etc.) without a proper overview or index    --
    // --                page. This script takes an URL and dumps all pictures  --
    // --                in the HTML document so you can view them more easily. --
    // --                Idea sort of taken from http://fusker.lewww.com        --
    // --                fusker: [Danish], n. cheater, hacker                   --
    // -- 14-jul-2004 Johann Zacharee sent in some updates and ideas            --
    // -- added nested number ranges and removed hardcoded "fusker.html" name.  --
    // ---------------------------------------------------------------------------
    // script modified by webmaster@fuckingright.com to clear text box when clicked on
    // ---------------------------------------------------------------------------
    function GenerateContent()
    {
      var strParameter = window.location.search;
//    if (strParameter.charAt (0) != '?')
//      return(1);
 
      strParameter = strParameter.substring(1, strParameter.length);
 
      //next link has info on 'command-line' arguments
      //http://sharkysoft.com/tutorials/jsa/content/043.html
 
      if (strParameter == '')
      {
 
      }
      else
      {
        // must contain 'http://' or 'ftp://' or something
        if (strParameter.indexOf('://') < 0)
          {strParameter = 'http://' + strParameter}
 
        strParameter = strParameter.replace(/%5B/g, '[');  // g=global, replace all
        strParameter = strParameter.replace(/%5D/g, ']');
 
 
        ProcessURL('', strParameter); // start recursion
      }
    }
 
    function RemoveLeadingZeros(strInput)
    {
      // remove zero's because else parseInt('0123') interprets as octal number and returns 83
      i = 0
      while (strInput.substr(i, 1) == '0') {i++}
 
      // incase all zero's then the string is empty now
      if (strInput.length == i)
        // put one '0' character in string
        {strInput = '0'}
      else
        // removeonly keep valid digits '00123' -> '123'
        {strInput = strInput.substr(i)}
      return strInput;
    }
 
    function WriteURLtoDocument(strURL)
    {   
      document.writeln('<p><img src="' + strURL + '"><br>');
      document.writeln('<a href="' + strURL + '">' + strURL + '</a></p>');
    }
 
    // ExamineURL(strFirst, strLast) takes an URL and determines where the number-part is located.
    // example: strFirst='http://www.bla.com/user/test[01-10].jpg'
    // will show pictures test01.jpg through test10.jpg
    function ProcessURL(strFirstPart, strLastPart)
    {
      var strBegin = '';
      var strEnd = '';
      var iStartNr = -1;
      var iEndNr = -1;
      var iDigits = 0  // number of digits, example 3 digits, then 1 becomes '001'
      var strTemp;
 
      var strNumberPart = '';
      var i;
 
      //force typecast to string
      strFirstPart = strFirstPart + '';
      strLastPart = strLastPart + '';
 
      // check for '[01-10]' part
      var iBegin = strLastPart.indexOf('[');
      var iEnd   = strLastPart.indexOf(']');
      if (iBegin < 0 || iEnd < 0)
      {
        // no more number parts, print to HTML document
        WriteURLtoDocument(strFirstPart + strLastPart);
        return -1;
      };
 
      // there are more number parts, process it
      strBegin = strFirstPart + strLastPart.substr(0, iBegin);
      strEnd   = strLastPart.substr(iEnd+1, strLastPart.length-iEnd);
 
      var strTemp = strLastPart.substr(iBegin+1, (iEnd-iBegin-1));
      var iDash  = strTemp.indexOf('-');
 
      if (iDash < 0)
      {
        WriteURLtoDocument(strFirstPart + strLastPart);
        return -1;
      };
 
      var strStartNr = strTemp.substr(0, iDash);
      iDigits  = strStartNr.length;
      strStartNr = RemoveLeadingZeros(strStartNr);
 
      var strEndNr = strTemp.substr(iDash+1, strTemp.length-iDash-1);
      strEndNr = RemoveLeadingZeros(strEndNr);
 
      if (isNaN(strStartNr) == true || isNaN(strEndNr) == true)
      {
        WriteURLtoDocument(strFirstPart + strLastPart);
        return -1;
      }
 
      iStartNr = parseInt(strStartNr);
      iEndNr = parseInt(strEndNr);
 
      // call ProcessURL recursively
      for (i = iStartNr; i <= iEndNr; i++)
      {
        strNr = i + '';  // typecast to string
        while (strNr.length < iDigits)
          {strNr = '0' + strNr}
        // recursive call
        strTemp = strBegin + strNr;
        ProcessURL(strTemp, strEnd);
      }
    }
 
    function DisplayHelp()
    {
      document.formulaire.URL.value = '';
      HandleSubmit();
    }
 
    function HandleSubmit()
    {
      // when user types in textbox and presses enter, this function is called
      var strParameter = document.formulaire.affichage.value;
      // replace again, easier to copy into UBB codes ([url=..]) because that also uses '[' and ']'
      strParameter = strParameter.replace(/\[/g, '%5B'); // g=global, replace all
      strParameter = strParameter.replace(/\]/g, '%5D');
      top.location = window.location.pathname + '?' + strParameter;
      // next lines causes form not to reload (like pressing F5)
      return false;
    }
 
 
 
    //-->
 
 
function initInput()
    {
    var url = "http://www.lamma.rete.toscana.it/models/ventoemare/%TYPE%_%REGION%_web_[1-3].png";
        var type = formulaire.type.value;
url = url.replace("%TYPE%", type);
var region = formulaire.region.value;
url = url.replace("%REGION%", region);
    document.formulaire.affichage.value = url;
    }
 
function initInputOnload() {
 
    var strParameter = window.location.search;
 
    if (strParameter == '') {          
          initInput(); 
    }
          else { 
 
            var n = strParameter.lastIndexOf("/");         
            var type_region_fin = strParameter.slice(n+1).split("_");
 
            document.formulaire.type.value = type_region_fin[0];
            document.formulaire.region.value = type_region_fin[1];
            initInput();         
        } 
 
}    
 
</script>
 
  </head>
 
  <body onLoad="initInputOnload()">
 
    <table border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td width="220">
            <p style="margin-top: 0; margin-bottom: 0"><b>
            <font face="Arial" size="5"><span style="text-decoration: none">
            Exemple</span></font></b></td>
            <form name='formulaire'>
            <td>
            <p align="center" style="margin-top: 0; margin-bottom: 0">
            <select size="1" name="region" onChange="initInput()">
            <option value="AA">Méditerranée</option>
            <option value="K">Baléares</option>
            <option value="R">Valencia</option>
            </select></td>
 
            <td>
            <p align="center" style="margin-top: 0; margin-bottom: 0">
            <select size="1" name="type" onChange="initInput()">
            <option value="wind10m">Vent</option>
            <option value="mwp">Houle</option>
            </select></td>
            <td width="5">
            <p style="margin-top: 0; margin-bottom: 0">&nbsp;</td>
 
            <td align="left">
            <p style="margin-top: 0; margin-bottom: 0">
            <INPUT TYPE="button" NAME="RefreshButton" value="GO" style="cursor:pointer; color:red; font-weight:bold;" onClick="HandleSubmit()"></td>
            <td width="500" align="left">
            <p style="margin-top: 0; margin-bottom: 0">
            <INPUT NAME="affichage"; value="" id="affichage"; color:red;" size="66"></td>
 
            </FORM>
 
        </table>
    <hr>
 
<!-- insert pictures here -->
    <SCRIPT LANGUAGE="JavaScript">
      GenerateContent();
    </SCRIPT>
 
  </body>
</html>

PS : Le code html n'est pas top, certaines balises ne sont pas fermées, des indentations supplémentaires pourraient aider pour la lisibilité... Et je n'ai pas compris ce qu'est la balise <hr> ?

**Beginner.** · 28/03/2016, 19h09

Salut,

Je me suis demandé pourquoi tu passes par les paramètres dans l'url (c'est d'ailleurs, je crois, cela qui provoque le rechargement de la page).

Oui parce qu’apparemment tu veux afficher des images sur la page : les adresses de ces images sont calculées en fonction des données sélectionnées par l’utilisateur + l'url contenu dans le input text... Tu n'as donc pas besoin de données extérieures...

Dans ce cas, une fois que tu as les adresses, pourquoi ne pas afficher simplement ces images en injectant dans ta page le code html nécessaire pour cela ?

**plefever** · 28/03/2016, 21h04

Je le faisais comme ça avant, mais j'ai en fait 40 régions et 7 variantes, ce qui fait 280 adresses différentes. Je cherchais donc une "page" (ligne) la plus simple possible pour accéder facilement à ces 280 possibilités. Je voulais de plus garder un champ "fusker"pour pouvoir introduire une tout autre adresse.
Je suis parti ce script "Ici" pour développer le script dont j'avais besoin.
Merci de m'avoir aider. Ce forum est génial. Je pense pouvoir finaliser mon script tel que je l'avais imaginé.

**Beginner.** · 29/03/2016, 02h03

Tu as réglé le problème comment en fin de compte ?

As-tu essayé la fonction que je t'ai proposée ? Si oui, est-ce que ça marche ?

-----------------

J'ai regardé le lien que tu as indiqué mais c'est différent, lui a fait ça pour un cas général (n'importe quel site) et encore c'est discutable car même dans ce cas, j'avoue que je ne vois pas du tout l’intérêt de placer les paramètres dans l'url...

Même si le nombre d'images est énorme, je ne vois pas ce que cela change car dans tous les cas tu "calcules" l'adresse de ces images uniquement en fonction des paramètres présents dans ta page (données sélectionnées par l’utilisateur + l'url contenu dans le input text). Ensuite une fois que tu as les adresses tu pourrais simplement afficher ces images en injectant dans ta page le code html nécessaire pour cela...

Les étapes qui consistent à passer les paramètres dans l'url puis une fois la page rechargée récupérer ces paramètres depuis la nouvelle url pour ensuite recalculer les adresses pour enfin afficher les images... me semble inutiles en plus de causer le problème du rechargement...

En fait concrètement, prenons un exemple : les paramètres Baléares & vent nous donnent dans le input texte :

http://www.lamma.rete.toscana.it/models/ventoemare/wind10m_K_web_[1-3].png

On comprend que tu veux afficher trois images, le [1-3] est un intervalle, cela signifie les images numérotées de 1 à 3... (si on met par exemple [2-7] cela signifie les images numérotées de 2 à 7).

A partir de cela tu calcules les trois adresses et tu obtiens :

http://www.lamma.rete.toscana.it/mod...0m_K_web_1.png
http://www.lamma.rete.toscana.it/mod...0m_K_web_2.png
http://www.lamma.rete.toscana.it/mod...0m_K_web_3.png

Ben pour faire ça il y a plus simple et plus efficace car d'ailleurs l'intervalle peut changer donc il faudrait en tenir compte normalement et ne pas toujours afficher [1-3], tu pourrais ajouter deux autres sélections pour choisir le début et la fin de l'intervalle...

**plefever** · 29/03/2016, 14h39

J'ai bien essayé et adopté la solution que tu proposais. Tout marche nickel. Merci beaucoup.
C'est vrai qu'il pourrait y avoir plus simple, puisque effectivement je connais les adresses?
Il suffirait de garder les deux premières balises de choix qui générerait directement la liste des adresses des images.
J'étais parti du script du fusker, mais c'est vrai qu'on pourrait s'en passer.
Il faut que je me plonge dans un autre script...

**plefever** · 29/03/2016, 15h53

Je vient d'écrire une liste de lignes..
<img src="http://www.lamma.rete.toscana.it/models/ventoemare/wind10m_AA_web_1.png">
<img src="http://www.lamma.rete.toscana.it/models/ventoemare/wind10m_AA_web_2.png">
<img src="http://www.lamma.rete.toscana.it/models/ventoemare/wind10m_AA_web_3.png">
... etc
Mais je ne voit pas comment modifier cette série (il y a 60 images) en fonction des balises "régions" et "types" (il y a 40 régions et 7 types ce qui fait 280 url)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
 
<body>
 <img src="http://www.lamma.rete.toscana.it/models/ventoemare/wind10m_AA_web_1.png">
 <img src="http://www.lamma.rete.toscana.it/models/ventoemare/wind10m_AA_web_2.png">
 <img src="http://www.lamma.rete.toscana.it/models/ventoemare/wind10m_AA_web_3.png">
 <img src="http://www.lamma.rete.toscana.it/models/ventoemare/wind10m_AA_web_4.png">
 <img src="http://www.lamma.rete.toscana.it/models/ventoemare/wind10m_AA_web_5.png">
 <img src="http://www.lamma.rete.toscana.it/models/ventoemare/wind10m_AA_web_6.png">
  </body>
</html>

**Beginner.** · 30/03/2016, 00h13

Envoyé par plefever

Mais je ne voit pas comment modifier cette série (il y a 60 images) en fonction des balises "régions" et "types" (il y a 40 régions et 7 types ce qui fait 280 url)

Tu peux mettre des images dans la page au départ puis les modifier en fonction des paramètres mais ce ne serait pas terrible comme solution notamment parce que le nombre d'image est variable...

Je te propose de "créer" ces images au fur et à mesure et de les insérer une par une dans ta page (par exemple dans une div "conteneur").

J'ai modifié des choses pour le test :

- J'ai ajouté deux input numérique pour choisir le début et la fin de l'intervalle... (tu peux ainsi choisir d'afficher les images numérotées de n1 à n2 où n1 et n2 sont à choisir avec les imput numérique).
- Dans l'adresse j'ai mis le caractère "*" plutôt qu'un intervalle... Comme ça c'est plus simple, les numéros sont placés à la place de ce caractère donc si tu veux changer l'emplacement des numéros il te suffit de changer l'emplacement de ce caractère...
- Les images s'affichent les unes après les autres donc tu peux avoir plusieurs images sur une même ligne selon la largeur de la fenêtre... Si tu veux les afficher les unes sous les autres, il faudra ajouter quelque chose...

Tu peux tester et éventuellement modifier le code ici : http://jsbin.com/kufekijufe/1/edit?html,js,output

Si tu veux tout dans un seul fichier, le voilà :

Code html :

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
 
<!DOCTYPE html>
<html>
<head>
     <title>Meteo Consorzio Lamma</title>
     <meta charset="UTF-8">
     <script type="text/javascript" language="Javascript">
        function initInput(){
            
            var url = document.getElementById("affichage").value = "http://www.lamma.rete.toscana.it/models/ventoemare/TYPE_REGION_web_*.png" ;       
            var type = document.getElementById("type").value;
            var region = document.getElementById("region").value;
              
            
            url = url.replace("TYPE", type);     
            url = url.replace("REGION", region);          
            document.getElementById("affichage").value = url;
 
        }
 
        function Afficheimages(){
            
            var url = document.getElementById("affichage").value;
            var nbrBegin = document.getElementById("nbrBegin").value;
            var nbrEnd = document.getElementById("nbrEnd").value;   
          
            nbrBegin = parseInt(nbrBegin,10);
            nbrEnd = parseInt(nbrEnd,10);
          
            var monImg ;  
            var conteneur = document.getElementById('conteneur');
          
            conteneur.innerHTML = "";
          
            for (var i= nbrBegin; i<= nbrEnd; i++) {
 
              monImg = document.createElement('img');     
              monImg.src = url.replace("*", i);
              conteneur.appendChild(monImg);           
            }
        }
 
     </script>
</head>
 
<body onLoad="initInput()">
 
    <div>Paramètres  :   
 
        <select size="1" id="region" onChange="initInput()">
            <option value="AA">Méditerranée</option>
            <option value="K">Baléares</option>
            <option value="R">Valencia</option>
        </select>
 
        <select size="1" id="type" onChange="initInput()">
            <option value="wind10m">Vent</option>
            <option value="mwp">Houle</option>
        </select>  
        Images de :
        <input type="number" id="nbrBegin" value="1" min="1" max="70">
        à :
        <input type="number" id="nbrEnd" value="1" min="1" max="70">
    </div> 
 
    <div>
 
        <input type="button" name="RefreshButton" value="GO" style="cursor:pointer; color:red; font-weight:bold;" onClick="Afficheimages()">       
        <input id="affichage" ; value=""; color:red; size="73">
 
    </div>  
    <hr>
 
    <div id="conteneur"></div>         
</body>
</html>

C'est plus court, il n'y a pas de formulaire, il n'y a que deux fonctions en JavaScript...

J'ai mis ceci :

nbrBegin *= 1;
nbrEnd *= 1;

car je me suis aperçu que ça déconnait pour certaines valeurs car je pense qu'en fait nbrBegin et nbrEnd sont des strings qu'il fallait transformer en nombre car sinon la comparaison dans certains cas ne produit pas le résultat attendu...

Mais il y a surement mieux pour régler ce problème...

EDIT : Oui il y a bien une fonction pour convertir une string en un nombre entier : la fonction : https://developer.mozilla.org/fr/doc...obaux/parseInt.

Je l'ai donc utilisée, j'ai remplacé les deux instructions barrées ci-dessus par :

nbrBegin = parseInt(nbrBegin,10);
nbrEnd = parseInt(nbrEnd,10);

**plefever** · 30/03/2016, 14h34

Excellent !!!
C'est plus rapide, plus simple plus efficace !
Merci beaucoup pour votre aide.
Ca m'ouvre de nouvelles possibilités en plus...
Je finalise ce projet .

**Beginner.** · 31/03/2016, 00h42

Ah ben tant mieux si cela te convient.

---

1- Je voulais quand même te signaler que tous les codes qu'on a vu jusqu'à maintenant ne te permettent pas de changer la première partie de l'url, c'est-à-dire que c'est toujours ceci :

http://www.lamma.rete.toscana.it/models/ventoemare/

Et la deuxième partie est toujours de la forme suivante : TYPE_REGION_web_*.png"

Or j'ai cru comprendre que tu voulais garder la possibilité de changer cette première partie de l'url, j'ai donc modifié le code pour que cela soit possible tout en faisant en sorte que l'url citée ci-dessus reste l'url par défaut...

2- Tu te souviens de ce problème :

Envoyé par plefever

Voici un exemple du code complet (ou presque)
Ça fonctionne, mais lorsque l'on clique sur "GO", les premiers champs reprennent leurs valeurs par défaut (ici "Méditerranée" et "vent") ainsi que l'adresse dans le troisième champ.
C'est embêtant, parce-que, du coup, lorsque les images sont chargées, "l'entête " affichée ne correspond pas à ce que l'on voit.
Il faudrait donc que les champs 1 et 2 gardent les valeurs sélectionnées lorsque l'on appuie sur "GO".

Comme tu dis c'est gênant lorsque les images affichées ne correspondent pas aux paramètres sélectionnés or si tu fais attention tu remarqueras qu'on retrouve ce problème lorsque tu modifies les paramètres après avoir affiché des images... Dans cette situation on perd la correspondance et on ne la retrouve que lorsqu'on rafraichi la page en cliquant de nouveau sur le bouton "GO". Je me suis donc dis que ce serait bien qu'un message nous avertisse dans ce genre de situation...

Et j'ai donc aussi ajouté cette fonctionnalité : pour l'instant le code affiche cette phrase "Les paramètres ont été modifiés, veuillez cliquer sur le bouton 'GO' pour rafraîchir la page...". Tu peux bien sûr la modifier à ta guise...

---> J'en ai profité pour ajouter d'autres messages que tu peux modifier à ta guise :

- Au chargement : "Choisissez vos paramètres puis cliquez sur le bouton 'GO' pour afficher les images...".

- Si le caractère '*' est absent : "L'url doit contenir le caractère '*' ! "

- Après avoir cliquer sur le bouton 'GO' pour afficher les images : "La page a été mise à jour(rafraichie). Pour afficher d'autres images choisissez vos paramètres puis cliquez sur le bouton 'GO'..."

3-Le code ne fonctionne pas (ce qui est normale dans ce cas) lorsqu'on choisi un intervalle dont la première borne est supérieur à la deuxième comme par exemple [11,3]... J'ai donc rajouté une fonction qui empêche cela : quand tu modifies une des bornes et que la première borne devient supérieur à la deuxième l'autre bornes est automatiquement modifiée...

Enfin c'est compliqué à expliquer, essaye différentes possibilités et tu verras bien...

--------------------------------

Voilà tu peux le tester et éventuellement le modifier ici : http://jsbin.com/xuriwolole/1/edit?html,js,output

Et voici le code en un fichier (un peu plus gros mais d'autres parties ont été allégées donc ça reste simple) :

Code html :

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
 
<!DOCTYPE html>
<html>
<head>
    <title>Meteo Consorzio Lamma</title>
    <meta charset="UTF-8">
    <script type="text/javascript" language="Javascript">
function initInputonload() {
  
   initInput();
   document.getElementById("msg").innerHTML = "Choisissez vos paramètres puis cliquez sur le bouton 'GO' pour afficher les images...";
}
 
function changementParametre(event) {
  
    document.getElementById("msg").innerHTML = "Les paramètres ont été modifiés, veuillez cliquer sur le bouton 'GO' pour rafraîchir la page...";
 
    if (event === undefined) return ;
  
    var elemBegin = document.getElementById("nbrBegin");
    var elemEnd = document.getElementById("nbrEnd"); 
    var nbrBegin = +elemBegin.value;
    var nbrEnd = +elemEnd.value;
    
    if(nbrBegin > nbrEnd) 
        if(event.target.id === "nbrBegin") elemEnd.value = nbrBegin ;
            else elemBegin.value = nbrEnd ;
}
 
function initInput() {
    
    var url = document.getElementById("affichage").value ;       
    var type = document.getElementById("type").value;
    var region = document.getElementById("region").value;    
  
    var n = url.lastIndexOf("/"); 
    url = url.slice(0,n+1) + type + "_" + region + "_web_*.png";
    document.getElementById("affichage").value = url;
    
    changementParametre();
}
 
function Afficheimages() {
    
    var url = document.getElementById("affichage").value;
  
    if (url.indexOf("*") === -1) {
        
      document.getElementById("msg").innerHTML = "L'url doit contenir le caractère '*' ! ";
      return;
    }
  
    var nbrBegin = +document.getElementById("nbrBegin").value;
    var nbrEnd = +document.getElementById("nbrEnd").value; 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
  
    conteneur.innerHTML = "";
  
    for (var i= nbrBegin; i<= nbrEnd; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = url.replace("*", i);
        conteneur.appendChild(monImg);           
    }
    
    document.getElementById("msg").innerHTML = "La page a été mise à jour(rafraichie). Pour afficher d'autres images choisissez vos paramètres puis cliquez sur le bouton 'GO'...";
}    
    
 
    </script>
</head>
 
<body onLoad="initInputonload()" style="font-family:verdana; font-size:13px">
 
    <div>Paramètres  :   
        <select size="1" id="region" onChange="initInput()">
            <option value="AA">Méditerranée</option>
            <option value="K">Baléares</option>
            <option value="R">Valencia</option>
        </select>
 
        <select size="1" id="type" onChange="initInput()">
            <option value="wind10m">Vent</option>
            <option value="mwp">Houle</option>
        </select>  
        Images de :
        <input type="number" id="nbrBegin" onChange="changementParametre(event)"  value="1" min="0" max="60">
        à :
        <input type="number" id="nbrEnd" onChange="changementParametre(event)"  value="1" min="0" max="60">
    </div> 
 
    <div>
        <input type="button" name="RefreshButton" value="GO" style="cursor:pointer; color:red; font-weight:bold;" onClick="Afficheimages()">       
        <input type="text" id="affichage" value="http://www.lamma.rete.toscana.it/models/ventoemare/TYPE_REGION_web_*.png"; size="79">
        <p id="msg" style="color:blue">...</p>
    </div>  
    <hr>
 
    <div id="conteneur"></div>
 
</body>
</html>

Bon ben tu me diras ce que t'en penses...

**plefever** · 31/03/2016, 06h55

Magnifique!
De plus en plus complet.
Du coup, je me dis qu'il est peut être possible de faire quelque chose de très utile.
J'utilise ce script en navigation. Lorsque j'ai un accès Internet (près des côtes), je charge ma pages avec les données qui me sont utiles et j'enregistre la page sur mon disque dur pour pouvoir consulter ces images hors connexion. J'ouvre ensuite un programme pour visualiser ces images et, avec la roulette de la souris, je peux visualiser la succession des images un peu comme une animation.
Ne pourrait on pas, dans notre page, les afficher non pas l'une au dessus de l'autre, mais dans un cadre où l'on pourrait les faire défiler avec la roulette?
Dans l'exemple ci dessous, j'ai aussi caché l'adresse dans le cas ou je dédie la page à ce seul "fournisseur" d'images :

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
<!DOCTYPE html>
<html>
<head>
    <title>Meteo Consorzio Lamma</title>
 
    <script type="text/javascript" language="Javascript">
function initInputonload() {
 
   initInput();
   document.getElementById("msg").innerHTML = "Choisissez vos paramètres puis cliquez sur le bouton 'GO' pour afficher les images...";
}
 
function changementParametre(event) {
 
    document.getElementById("msg").innerHTML = "Les paramètres ont été modifiés, veuillez cliquer sur le bouton 'GO' pour rafraîchir la page...";
 
    if (event === undefined) return ;
 
    var elemBegin = document.getElementById("nbrBegin");
    var elemEnd = document.getElementById("nbrEnd"); 
    var nbrBegin = +elemBegin.value;
    var nbrEnd = +elemEnd.value;
 
    if(nbrBegin > nbrEnd) 
        if(event.target.id === "nbrBegin") elemEnd.value = nbrBegin ;
            else elemBegin.value = nbrEnd ;
}
 
function initInput() {
 
    var url = document.getElementById("affichage").value ;       
    var type = document.getElementById("type").value;
    var region = document.getElementById("region").value;    
 
    var n = url.lastIndexOf("/"); 
    url = url.slice(0,n+1) + type + "_" + region + "_web_*.png";
    document.getElementById("affichage").value = url;
 
    changementParametre();
}
 
function Afficheimages() {
 
    var url = document.getElementById("affichage").value;
 
    if (url.indexOf("*") === -1) {
 
      document.getElementById("msg").innerHTML = "L'url doit contenir le caractère '*' ! ";
      return;
    }
 
    var nbrBegin = +document.getElementById("nbrBegin").value;
    var nbrEnd = +document.getElementById("nbrEnd").value; 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
 
    conteneur.innerHTML = "";
 
    for (var i= nbrBegin; i<= nbrEnd; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = url.replace("*", i);
        conteneur.appendChild(monImg);           
    }
 
    document.getElementById("msg").innerHTML = "La page a été mise à jour(rafraichie). Pour afficher d'autres images choisissez vos paramètres puis cliquez sur le bouton 'GO'...";
}    
 
 
    </script>
</head>
 
<body onLoad="initInputonload()" style="font-family:verdana; font-size:13px">
 
    <div>Paramètres  :   
        <select size="1" id="region" onChange="initInput()">
            <option value="AA">Méditerranée</option>
            <option value="K">Baléares</option>
            <option value="R">Valencia</option>
        </select>
 
        <select size="1" id="type" onChange="initInput()">
            <option value="wind10m">Vent</option>
            <option value="mwp">Houle</option>
        </select>  
        Images de :
        <input type="number" id="nbrBegin" onChange="changementParametre(event)"  value="1" min="0" max="60">
        à :
        <input type="number" id="nbrEnd" onChange="changementParametre(event)"  value="3" min="0" max="60">
    	<input type="button" name="RefreshButton" value="GO" style="cursor:pointer; color:red; font-weight:bold;" onClick="Afficheimages()">
		<input type="text" style="display:none" id="affichage" value="http://www.lamma.rete.toscana.it/models/ventoemare/TYPE_REGION_web_*.png";>
    	<p id="msg" style="color:blue">...</p>
    </div>  
    <hr>
 
    <div id="conteneur"></div>
 
</body>
</html>

Vraiment intéressant tout ça, j'en apprend beaucoup! Merci

**Beginner.** · 31/03/2016, 22h26

Oui moi aussi j’apprends en même temps, ça me fait des exercices pratiques!

Envoyé par plefever

Ne pourrait on pas, dans notre page, les afficher non pas l'une au dessus de l'autre, mais dans un cadre où l'on pourrait les faire défiler avec la roulette?

En fait je crois que c'est ce qu'on a déjà mais le cadre c'est toute la fenêtre, tu voudrais que ce cadre soit plus petit, c'est ça ?

Il faudrait qu'il soit au moins égale à la taille d'une image pour qu'on puisse voir une image entière... J'ai vu que la taille des images étaient variables selon les paramètres qu'on sélectionne mais j'ai l'impression que pour des paramètres donnés les images numérotées de n1 à n2 ont la même taille.

**plefever** · 01/04/2016, 06h43

Pour obtenir cet effet là : (un petit code plutôt qu'un long discours)

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
</head>
 
<body>
<img id="slideshow" src="summer.jpg" />
 
<script type="text/javascript">
 
var myimages=[
    "wind10m_K_web_1.png",
    "wind10m_K_web_2.png",
    "wind10m_K_web_3.png"
 
]
 
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
 
function rotateimage(e){
    var evt=window.event || e //equalize event object
    var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
    nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1 //move image index forward or back, depending on whether wheel is scrolled down or up
    nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex //wrap image index around when it goes beyond lower and upper boundaries
    slideshow.src=myimages[nextslideindex]
    if (evt.preventDefault) //disable default wheel action of scrolling page
        evt.preventDefault()
    else
        return false
 
}
 
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
 
if (slideshow.attachEvent) //if IE (and Opera depending on user setting)
    slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener) //WC3 browsers
    slideshow.addEventListener(mousewheelevt, rotateimage, false)
 
 
</script>
</body>
 
</html>

Les 3 images à mettre dans le dossier du code :
Nom : wind10m_K_web_1.png
Affichages : 126
Taille : 29,2 Ko

Nom : wind10m_K_web_2.png
Affichages : 131
Taille : 29,4 Ko

Nom : wind10m_K_web_3.png
Affichages : 125
Taille : 29,2 Ko

On peut voir immédiatement l’intérêt de l'effet: la roulette permet un déplacement rapide en avant ou en arrière dans les prévisions.
Par contre, il faudrait un "buttoir" avant la première image et un autre après le dernière pour ne pas faire un saut brutal dans le temps. (dans l'exemple ici, le défilement fait 1,2,3 puis repasse à 1. Pareil dans le sens inverse, ce qui devrait être interdit pour éviter des confusions)
Il faudrait pouvoir garder cette page hors connexion, c'est à dire avec les images enregistrées sur le disque dur tout en gardant l'effet.
Pas facile...

**Beginner.** · 01/04/2016, 06h59

Salut,

Je ne doute pas de l’intérêt, je cherche plutôt à comprendre...

J'ai essayé ton code mais cela ne fonctionne pas chez moi... Il ne manquerait pas quelque chose ? (j'ai bien stoker les 3 images pourtant...)

EDIT : C'est bon cela fonctionne mais la roulette de ma souris roule mal...

**Beginner.** · 01/04/2016, 16h17

J'ai analysé le bout de code que tu as posté, j'ai compris comment il fonctionnait... Merci j'ai appris de nouvelles choses...

Envoyé par plefever

Par contre, il faudrait un "buttoir" avant la première image et un autre après le dernière pour ne pas faire un saut brutal dans le temps. (dans l'exemple ici, le défilement fait 1,2,3 puis repasse à 1. Pareil dans le sens inverse, ce qui devrait être interdit pour éviter des confusions)

Oui j'ai repéré la partie qui fait cela, cela ne me semble pas difficile de la modifier pour mettre des butoirs comme tu dis...

Envoyé par plefever

Il faudrait pouvoir garder cette page hors connexion, c'est à dire avec les images enregistrées sur le disque dur tout en gardant l'effet.
Pas facile...

J'ai fait plusieurs tests pour voir comment se comporte Google chome et Firefox lorsque tu enregistres une page contenant des images et j'ai découverts des choses intéressantes qui pourrait être utile :

- Lorsque tu sauvegardes la page dont le titre est "Meteo Consorzio Lamma" (si tu ne changes pas le nom) tu obtiens :

un fichier html : "Meteo Consorzio Lamma.html"
un dossier : "Meteo Consorzio Lamma_files" contenant les images et éventuellement un fichier *.js si tu as mis le script dans un fichier à part...

Bon ça je pense que tu le savais déjà mais j'ai découvert que si tu enregistres de nouveaux la page après avoir affiché de nouvelles images et bien il n'efface pas les anciennes contenues dans le dossier "Meteo Consorzio Lamma_files" il les ajoute... Pour cela il faut que tu enregistres à chaque fois la page avec le même nom de fichier html : "Meteo Consorzio Lamma.html". Bien sûr le fichier .html sera lui écrasé (ce qui n'est pas un problème) d'ailleurs le navigateur d'alerte que le fichier existe déjà.

Après à force tu peux te retrouver avec un grand nombre d'images dans le dossiers, tu peux même avoir les 280 images tous les différents paramètres... Il faudra donc de nouveau utiliser les fonctions pour afficher ces images selon les paramètres sélectionnés mais cette fois il faudra aller chercher les images dans le dossier et non sur le réseau Internet.

Cela me semble donc faisable...

**Beginner.** · 01/04/2016, 19h17

Voilà j'ai réussi à régler deux des trois problèmes (le troisième me semble faisable aussi...). Pour l'instant j'ai laissé l'affichage des images les unes après les autres histoire de régler d'abord l'affichage hors connexion... Bon chez moi ça fonctionne bien... Il faut bien suivre la procédure expliquée dans mon précédent message...

Bien sûr si il n'y a pas d'images dans le dossier "Meteo Consorzio Lamma_files" aucune image ne s'affiche... Après avoir afficher tes images online il te faut donc sauvegarder la page en gardant à chaque fois le même nom de fichier (c'est facile puisque c'est celui qui t'es proposé, il correspond au titre de la page html). Ainsi les nouveaux fichiers images s'ajouteront au dossier sans effacer les anciens.

Voila le code :

Code html :

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
135
 
<!DOCTYPE html>
<html>
<head>
    <title>Meteo Consorzio Lamma</title>
    <meta charset="UTF-8">
    <script type="text/javascript" language="Javascript">
function initInputonload() {
    
   conteneur.innerHTML = "";
   initInput();
   document.getElementById("msg").innerHTML = "Choisissez vos paramètres puis cliquez sur le bouton 'GO' pour afficher les images...";
}
 
function changementParametre(event) {
  
    document.getElementById("msg").innerHTML = "Les paramètres ont été modifiés, veuillez cliquer sur le bouton 'GO' pour rafraîchir la page...";
 
    if (event === undefined) return ;
  
    var elemBegin = document.getElementById("nbrBegin");
    var elemEnd = document.getElementById("nbrEnd"); 
    var nbrBegin = +elemBegin.value;
    var nbrEnd = +elemEnd.value;
    
    if(nbrBegin > nbrEnd) 
        if(event.target.id === "nbrBegin") elemEnd.value = nbrBegin ;
            else elemBegin.value = nbrEnd ;
}
 
function initInput() {
    
    var url = document.getElementById("affichage").value ;       
    var type = document.getElementById("type").value;
    var region = document.getElementById("region").value;    
  
    var n = url.lastIndexOf("/"); 
    url = url.slice(0,n+1) + type + "_" + region + "_web_*.png";
    document.getElementById("affichage").value = url;
    
    changementParametre();
}
 
function afficheImages() {    
    
    if(document.getElementById("offline").checked) {
        
        afficheImagesHorsConnexion();
        return;        
    }
    
    var url = document.getElementById("affichage").value;
  
    if (url.indexOf("*") === -1) {
        
      document.getElementById("msg").innerHTML = "L'url doit contenir le caractère '*' ! ";
      return;
    }
  
    var nbrBegin = +document.getElementById("nbrBegin").value;
    var nbrEnd = +document.getElementById("nbrEnd").value; 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
  
    conteneur.innerHTML = "";
  
    for (var i= nbrBegin; i<= nbrEnd; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = url.replace("*", i);
        conteneur.appendChild(monImg);           
    }
    
    document.getElementById("msg").innerHTML = "La page a été mise à jour(rafraichie). Pour afficher d'autres images choisissez vos paramètres puis cliquez sur le bouton 'GO'...";
}
 
 
 
function afficheImagesHorsConnexion() {
    
    var url = document.getElementById("affichage").value;    
    var n = url.lastIndexOf("/");          
    var pathImages = "./" + document.title + "_files" + url.slice(n);    
 
    var nbrBegin = +document.getElementById("nbrBegin").value;
    var nbrEnd = +document.getElementById("nbrEnd").value; 
    var monImg ;  
    var conteneur = document.getElementById("conteneur");
  
    conteneur.innerHTML = "";
  
    for (var i= nbrBegin; i<= nbrEnd; i++) {
 
        monImg = document.createElement('img');     
        monImg.src = pathImages.replace("*", i);
        conteneur.appendChild(monImg);           
    }
    
    document.getElementById("msg").innerHTML = "La page a été mise à jour(rafraichie). Pour afficher d'autres images choisissez vos paramètres puis cliquez sur le bouton 'GO'...";
}
    </script>
 
</head>
 
<body onLoad="initInputonload()" style="font-family:verdana; font-size:13px">
 
    <div>Paramètres  :   
        <select size="1" id="region" onChange="initInput()">
            <option value="AA">Méditerranée</option>
            <option value="K">Baléares</option>
            <option value="R">Valencia</option>
        </select>
 
        <select size="1" id="type" onChange="initInput()">
            <option value="wind10m">Vent</option>
            <option value="mwp">Houle</option>
        </select>  
        Images de :
        <input type="number" id="nbrBegin" onChange="changementParametre(event)"  value="1" min="0" max="60">
        à :
        <input type="number" id="nbrEnd" onChange="changementParametre(event)"  value="1" min="0" max="60">
        <input type="checkbox" id="offline">Travail hors connexion 
    </div> 
 
    <div>        
        <input type="button" name="RefreshButton" value="GO" style="cursor:pointer; color:red; font-weight:bold;" onClick="afficheImages()">       
        <input type="text" id="affichage" value="http://www.lamma.rete.toscana.it/models/ventoemare/TYPE_REGION_web_*.png"; size="79">
        <p id="msg" style="color:blue">...</p>
    </div>  
    <hr>
 
    <div id="conteneur"></div>
 
</body>
</html>

Dis-moi si cela fonctionne chez toi aussi...

**plefever** · 02/04/2016, 06h50

Ca marche. Je vient de charger une page avec 3 images. J'ai fait un Ctrl+S dans Chrome il a créer le dossier et enregistré les images dedans (ce que je faisais avant ). J'ai coupé toutes connexions et en cliquant sur la page enregistrée par Chome, il a bien ouvert les 3 images après avoir re-cliquer sur GO avec les mêmes paramètres.
On y est presque

**plefever** · 02/04/2016, 09h31

Suite à mon dernier message:
J'enregistrais auparavant chaque page dans un dossier. Ex un dossier Corse/Vent et un autre dossier Corse/Houle. Dans chaque dossier il y avait les images et la page html enregistrée par Chrome. Il faut que je continue à faire des dossiers séparé pour ne pas mélanger toutes les données. Lorsque j'avais de nouvelles données pour le même lieu, j’effaçais les images du dossier et les remplaçais par les nouvelles. Je consultait les images avec un programme de visualisation d'images (ACDsee ou autre). Mais j'aurai pu utiliser la page html enregistrée...Je ne le faisais pas, parce que les images étaient l'une à la suite de l'autre.
Je pense donc que si l'on fait notre script avec le "visualiseur d'images intégré" et que l'on enregistre la page, elle reste consultable hors connexion tout simplement.

**Beginner.** · 02/04/2016, 19h28

Mais maintenant que la sélection des images à afficher se fait automatiquement en fonction des paramètres est-ce que cela te gêne toujours que les données soient mélangées (c'est-à-dire que les images soient toutes dans le même dossier) ? C'est un point important à préciser car si comme tu dis tu continues à faire des dossiers séparés alors le script ne fonctionnera plus car il part du principe que toutes les images sont dans le dossier "Meteo Consorzio Lamma_files".

Si tu veux des dossiers différents selon les paramètres (région, type, intervalle) cela me semble possible mais il faudra suivre une certaine logique pour les noms et l'emplacement de ces dossiers. Il suffit d'une différence d'un caractère dans le nom pour que cela ne fonctionne pas...

Pour aider à nommer les dossiers on peut mettre à chaque fois les paramètres (région, type, intervalle) dans le titre (quand tu fais ctrl+s c'est ce titre qui t'es proposé comme nom). Par exemple on aurait : un fichier html : "Meteo Consorzio Lamma-Méditerranée-Vent-[1-7].html".

---> il faut que tu précises ces choses avant de continuer...

**plefever** · 02/04/2016, 20h00

Dans un soucis de "nettoyage" des données obsolètes alors que certaines autres peuvent encore être utiles, il est nécessaire de séparer les dossiers. Si en sauvegardant les images, le navigateurs remplaçait les anciennes par les nouvelles, alors il serait plus simple de tout mélanger. Mais ce n'est pas le cas. Or je télécharge pour une seule donnée environ 60 images... je risque fort d'avoir un dossier énorme rempli d'un tas d'images qui appartiennent au passé mais qu'il est difficile de séparer des images d'actualité. Donc, oui, il faut séparer....

Comment modifier une partie d'url à l'aide de deux balises select en JS ?

JavaScript

Discussions similaires

Partager

Partager