IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Générer une série d'URL à partir de la date et de l'heure


Sujet :

JavaScript

  1. #21
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Citation Envoyé par plefever Voir le message
    Si on regarde le site, maintenant à cette heure-ci, on voit que la première image date de 02h du matin (local) de ce jour et la dernière mercredi à 23H local. Ils changeront leurs données le 19 à 2H du matin. Ca reste toujours le même nombre d'images
    Là je compte 24 images et non 25...

    Mais je parlais de ce site dont tu avais indiqué le lien sur l'autre fil, il y a plus de 25 images...

    PS : As-tu remarqué un défaut : une partie (le début à gauche) de l'image n'est pas affichée (la flèche déborde dessus)...

  2. #22
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2016
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2016
    Messages : 83
    Points : 11
    Points
    11
    Par défaut
    Effectivement pour la pression atmosphérique, ils la donne sur une plus longue prévision. Je pensais d’ailleurs la séparer de la page des prévisions vent et mer les adresses sont de plus un peu différentes. Mais lorsque j'aurai une page, il sera facile de créer l'autre.
    Le défaut dont tu parles n’apparaît pas sur chrome... c'est un effet de transition fondu entre la barre du temps et le bord de l'image.

  3. #23
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Quel version de Chrome tu utilises ?

    Regarde ce que j'ai avec chrome :

    Nom : ImageChrome.PNG
Affichages : 143
Taille : 131,9 Ko
    Et voici l'image :

    Nom : image.PNG
Affichages : 173
Taille : 142,5 Ko

    Il manque une partie à gauche (qui est en faite effacée par la colonne dans laquelle monte et descend la fléchè rouge...).

    Tu n'as pas cela chez toi ?

    PS : Je suis en train de faire le code pour afficher/charger les images et les faire défiler soit avec la roulette de la souris soit en passant le curseur de la souris au-dessus des heures...
    La partie qui affiche les dates et les heures est nécessaire car comme tu me l'as dit rien n'indique cela sur ces images, c'est bien ça ?

  4. #24
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2016
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2016
    Messages : 83
    Points : 11
    Points
    11
    Par défaut
    J'ai bien le même effet sur mon chrome (dernière version). Mais je pense que c'est un effet "artistique" voulu par le site. On aime ou pas, et c'est vrai qu'une partie de l'image est cachée. Ce n'est pas utile voir même embêtant puisqu'une partie de l'info est cachée.
    Je suis curieux de voir le code que tu travaille. Effectivement les dates ne sont pas sur les images, et il est important de les créer pour que les images aient une référence. Et si de plus, en passant la souris dessus, les images changent c'est top

  5. #25
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Salut,

    Tu peux essayer ça : http://jsbin.com/loqevajiwe/edit?html,output. Tu peux copier/coller le code dans un fichier html...

    Il faut utiliser Chrome (qui gère l'objet input type = "date").

    On peut afficher/charger les images inline et offline (après avoir sauvegardée la page) et les faire défiler soit avec la roulette de la souris soit en passant le curseur de la souris au-dessus des heures...

    J'ai ajouté l'affichage de l'url des images offline et inline (cela permet de bien voir quelle image est affichée).

    ---> Essaye le dans différents cas pour voir comment il fonctionne après à toi de l'adapter en ajoutant ou en retirant ce que tu souhaites...

  6. #26
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2016
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2016
    Messages : 83
    Points : 11
    Points
    11
    Par défaut
    Formidable !!!! C'est exactement ce qu'il fallait Bravo et merci beaucoup pour ton aide précieuses et tes capacités !!!
    Merci de m'apprendre plein de choses extrêmement intéressantes.
    Je fais pleins de tests et je te dis comment ça se comporte.

  7. #27
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2016
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2016
    Messages : 83
    Points : 11
    Points
    11
    Par défaut
    Bonjour,
    J'ai un petit soucis lorsque j'ajoute une image légende en dessous du conteneur.
    Si avant de charger quoi que ce soit comme image on passe la souris sur les div "heures" il se passe un comportement étrange (tout devient rouge et l'image "legende" disparaît sur le premier div "heures".
    Si on charge des images OnLine ou OffLine tout se passe normalement.
    Le script est perturbé par la présence d'une autre image dans la page.
    Exemple:
    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
    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
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    <!DOCTYPE html>
    <html>
    <head>
        <title>Meteorama</title>
        <meta charset="UTF-8">
        <style type="text/css">
     
    body{
        font-family: verdana ;
        font-size:13px
    }        
     
    div#colDate {
        float: left;
        width: 190px;
        height: 530px;
        background: white;
        padding-right: 1px;
     
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;    
    }
     
    div#conteneur {
        float: left;
        padding-left: 3px;  
    }
    div#legende {
    	position:relative;
     	top:500px;
     	right:-3px;    
    }
     
    p#msgDateCode {            
            clear: both;
    }
     
    .heures{
        text-align: right ;
        color: blue;
    }
     
    .heures span {    
        color: white;
        font-weight: bold;
    }
     
    .selected{
        color: red;
        font-weight: bold;
    }
        </style>
     
        <script type="text/javascript" language="Javascript">
     
    function initInputonload() {
     
        var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"
     
        if (document.body.attachEvent)
              document.body.attachEvent("on" + mousewheelevt, rotateimage);
            else if (document.body.addEventListener)
                     document.body.addEventListener(mousewheelevt, rotateimage, false);   
     
        if (document.getElementById("colDate").attachEvent)
              document.getElementById("colDate").attachEvent("onmouseover", selectHourOnMouseOver);
            else if (document.getElementById("colDate").addEventListener)
                     document.getElementById("colDate").addEventListener("mouseover", selectHourOnMouseOver, false);  
     
        var dateTitle = document.title.split("-") ;
     
        if (dateTitle.length === 1) {
            var date = dateToString(new Date());  
            document.getElementById("thedate").value = date[5] ;
            document.getElementById("msgI").innerHTML = "Travail inline ! (vous pouvez modifier la date)";
        }
           else {
              var tabDate = dateTitle[1].split("_") ;
     
              datePageOffLine = tabDate[2] + "-" + tabDate[1] + "-" + tabDate[0] ;
              document.getElementById("thedate").value = datePageOffLine ;
              document.getElementById("thedate").disabled = true;
     
              document.getElementById("offline").checked = true ;
              document.getElementById("msgI").innerHTML = "Travail hors connexion ! La date est celle à laquelle la page a été sauvegardée...";          
           }    
     
        conteneur.innerHTML = "";
        document.getElementById("msgDateCode").innerHTML =  "" ;
        deSelecHour();
        initInput();
        document.getElementById("msg").innerHTML = "Choisissez vos paramètres puis cliquez sur le bouton 'GO' pour afficher les images...";
    }
     
    var tabDateHoursImagesCode = [];
     
    function initInput() {
     
        var url = document.getElementById("affichage").value ;       
        var type = document.getElementById("type").value;
        var region = document.getElementById("region").value;  
     
        //http://meteomaps.s3.amazonaws.com/eltiempo/datamaps/TYPE-REGION-*.gif
     
        var n = url.lastIndexOf("/"); 
        url = url.slice(0,n+1) + type + "-" + region + "-*.gif";
        document.getElementById("affichage").value = url;
     
        //dates & heures...
     
        var date = new Date();
        var tabDate = document.getElementById("thedate").value.split("-") ;    
     
        date.setDate(tabDate[2]); date.setMonth(tabDate[1]-1); date.setFullYear(tabDate[0]);     
        tabDateStr = dateToString(date);
        document.getElementById("d1").innerHTML = tabDateStr[0] + " " + tabDateStr[1] ; 
     
        document.title = "Meteorama-" + tabDateStr[6] + "-" + tabDateStr[0] ; // ajoute la date au titre... 
     
        date.setDate(date.getDate()+1);    
        tabDateStr = dateToString(date); 
        document.getElementById("d2").innerHTML = tabDateStr[0] + " " + tabDateStr[1] ;
     
        date.setDate(date.getDate()+1);    
        tabDateStr = dateToString(date); 
        document.getElementById("d3").innerHTML = tabDateStr[0] + " " + tabDateStr[1] ;    
     
        date.setDate(tabDate[2]); date.setMonth(tabDate[1]-1); date.setFullYear(tabDate[0]);           
        date.setHours(2); date.setMinutes(0); date.setSeconds(0);
     
        for(var i = 0; i< 24 ; i++) {
            tabDateStr = dateToString(date);
            tabDateHoursImagesCode[i] = tabDateStr[4] ;
            date.setHours(date.getHours()+3);       
        }    
     
        document.getElementById("msg").innerHTML = "Les paramètres ont été modifiés, veuillez cliquer sur le bouton 'GO' pour rafraîchir la page...";
    }
     
    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 monImg ;  
        var conteneur = document.getElementById("conteneur");
     
        conteneur.innerHTML = "";    
     
        for(var i = 0; i< 24 ; i++) {
     
            monImg = document.createElement('img');     
            monImg.src = url.replace("*", tabDateHoursImagesCode[i]);
            monImg.style.visibility = 'hidden' ;
            monImg.style.position = "absolute";
            conteneur.appendChild(monImg);                   
         }    
     
        selectHourAndImage(currentImage, 0);
     
        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 monImg ;  
        var conteneur = document.getElementById("conteneur");
     
        conteneur.innerHTML = "";
     
        for(var i = 0; i< 24 ; i++) {
     
            monImg = document.createElement('img');     
            monImg.src = pathImages.replace("*", tabDateHoursImagesCode[i]);
            monImg.style.visibility = 'hidden' ;
            monImg.style.position = "absolute";        
            conteneur.appendChild(monImg);           
        }
     
        selectHourAndImage(currentImage, 0);
     
        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'...";
    }
     
    var myimages = document.images;
    var currentImage = 0 ;
    var nextImage = 0 ;
     
    function rotateimage(event) {
     
        if(myimages.length === 0) return ; 
     
        var delta = event.detail ? event.detail * (-120) : event.wheelDelta     //delta returns +120 when wheel is scrolled up, -120 when scrolled down
        nextImage = (delta <= -120) ? nextImage + 1 : nextImage - 1 //move image index forward or back, depending on whether wheel is scrolled down or up    
     
        nextImage = (nextImage < 0) ? 0 : (nextImage > myimages.length - 1) ? myimages.length - 1 : nextImage
     
        selectHourAndImage(currentImage, nextImage);
     
        if (event.preventDefault)
            //disable default wheel action of scrolling page
            event.preventDefault()
        else
            return false ;
    }
     
    function selectHourOnMouseOver(event){
     
        if(myimages.length === 0) return ;
     
        var idOver = event.target.id ;       
     
        if(idOver.charAt(0)=== "h" || idOver.charAt(0)=== "f") {       
     
            nextImage = +idOver.slice(1);          
            selectHourAndImage(currentImage, nextImage);
      }    
    }
     
    function selectHourAndImage(current, next) {
     
        document.getElementById("h" + current).className = "";
        document.getElementById("f" + current).style.color = "";
        myimages[current].style.visibility = "hidden"; 
     
        document.getElementById("h" + next).className = "selected";
        document.getElementById("f" + next).style.color = "red";
        myimages[next].style.visibility = "visible";  
     
        //document.getElementById("msgDateCode").innerHTML = tabDateHoursImagesCode[+strNbrOver];
        document.getElementById("msgDateCode").innerHTML =  "url : " + myimages[next].src ;
     
        nextImage = next ;     
        currentImage = nextImage ;     
    }
     
    function deSelecHour(){
     
        for(var i = 0; i< 24 ; i++) {
     
            document.getElementById("h" + i).className = "";
            document.getElementById("f" + i).style.color = "";        
        }    
    }
     
    function dateToString(date) {
     
        var tab_jour = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
        var day = date.getDay();
        var ladate = date.getDate(); if (ladate<10) ladate = "0" + ladate ;
        var month = date.getMonth() + 1; if (month<10) month = "0" + month ;
        var year = date.getFullYear();
        var h = date.getHours(); if (h<10) h = "0" + h ;
        var m = date.getMinutes(); if (m<10) m = "0" + m ;
        var s = date.getSeconds(); if (s<10) s = "0" + s ;    
        var h2 = date.getUTCHours() ; if (h2<10) h2 = "0" + h2 ;
     
        var tabResultat = [];    
     
        tabResultat[0] = tab_jour[day]; 
        tabResultat[1] = ladate + "/" + month + "/" + year ;
        tabResultat[2] = h + ":" + m ;    
        tabResultat[3] = ":" + s ;
        tabResultat[4] = year + month + ladate + h2 + m ;
        tabResultat[5] = year + "-" + month + "-" + ladate ;
        tabResultat[6] = ladate + "_" + month + "_"+ year ;
     
        return tabResultat ;    
    }    
     
    var datePageOffLine = "" ;
     
    function checkOnOffLine() {
     
        if(datePageOffLine === "") {
            if(document.getElementById("offline").checked)        
                document.getElementById("msgI").innerHTML = "Travail hors connexion ! Note : pour afficher la page souhaitée, entrez sa date de sauvegarde puis cliquez sur 'GO'..."
                    else document.getElementById("msgI").innerHTML = "Travail inline ! (vous pouvez modifier la date)"
     
            initInput();
            return ;
        }
     
        if(document.getElementById("offline").checked) {
     
            document.getElementById("thedate").value = datePageOffLine ;
            document.getElementById("thedate").disabled = true;
            document.getElementById("msgI").innerHTML = "Travail hors connexion ! La date est celle à laquelle la page a été sauvegardée...";
            initInput();
        }
            else {
                var date = dateToString(new Date());  
     
                document.getElementById("thedate").value = date[5] ;
                document.getElementById("thedate").disabled = false ; 
                document.getElementById("msgI").innerHTML = "Travail inline ! (vous pouvez modifier la date)"
                initInput();
            }
    }
        </script> 
    </head>
     
    <body onLoad="initInputonload()">
     
        <div>
            <label>Paramètres : </label>
            <select size="1" id="region" onchange="initInput()">
                <option value="lion-provence">Lion - Provence</option>
    			<option value="corse">Corse</option>
            </select>
            <select size="1" id="type" onchange="initInput()">
                <option value="seawind">Vent</option>
    			<option value="waveheight">Vagues</option>
    			<option value="seatemp">Temp de la mer</option> 
            </select>
            <label>Date : </label>
            <input type="date" id="thedate" onchange="initInput(event)">
            <input type="checkbox" id="offline" onchange="checkOnOffLine()">
            <label>Travail hors connexion</label>
        </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://meteomaps.s3.amazonaws.com/eltiempo/datamaps/TYPE-REGION-*.gif" size="90">
            <p id="msg" style="color:blue">...</p>
            <p id="msgI" style="color:red; font-weight: bold;">important</p>
        </div>  
        <hr> 
     
        <div>
            <div id="colDate">
                <label id="d1">Mardi 19/04/2016</label>
                <div class = "heures">        
                    <label id=h0>02:00<span id=f0> =></span></label><br>
                    <label id=h1>05:00<span id=f1> =></span></label><br>
                    <label id=h2>08:00<span id=f2> =></span></label><br>
                    <label id=h3>11:00<span id=f3> =></span></label><br>
                    <label id=h4>14:00<span id=f4> =></span></label><br>
                    <label id=h5>17:00<span id=f5> =></span></label><br>
                    <label id=h6>20:00<span id=f6> =></span></label><br>
                    <label id=h7>23:00<span id=f7> =></span></label><br>
                </div>
                <label id="d2">Mardi 19/04/2016</label>
                <div class = "heures">        
                    <label id=h8 >02:00<span id=f8 > =></span></label><br>
                    <label id=h9 >05:00<span id=f9 > =></span></label><br>
                    <label id=h10>08:00<span id=f10> =></span></label><br>
                    <label id=h11>11:00<span id=f11> =></span></label><br>
                    <label id=h12>14:00<span id=f12> =></span></label><br>
                    <label id=h13>17:00<span id=f13> =></span></label><br>
                    <label id=h14>20:00<span id=f14> =></span></label><br>
                    <label id=h15>23:00<span id=f15> =></span></label><br>
                </div>
                <label id="d3">Mardi 19/04/2016</label>
                <div class = "heures">        
                    <label id=h16>02:00<span id=f16> =></span></label><br>
                    <label id=h17>05:00<span id=f17> =></span></label><br>
                    <label id=h18>08:00<span id=f18> =></span></label><br>
                    <label id=h19>11:00<span id=f19> =></span></label><br>
                    <label id=h20>14:00<span id=f20> =></span></label><br>
                    <label id=h21>17:00<span id=f21> =></span></label><br>
                    <label id=h22>20:00<span id=f22> =></span></label><br>
                    <label id=h23>23:00<span id=f23> =></span></label><br>
                </div>
            </div>
     
            <div id="conteneur"></div>
     
        </div>
        <div id="legende">
    		<img border="0" src="../TEST LEGENDE/vent.gif" width="660" height="51"></p>
       		</div>
        <p id="msgDateCode" style="color:blue">url</p> 
     
    </body>
    </html>
    Et l'image en question : Nom : vent.gif
Affichages : 385
Taille : 5,9 Ko
    Et autre petit détail, le "msgDateCode" reste caché sous l'image.
    J'ai tout essayé avec cette image légende, où qu'elle soit, elle perturbe la page. Elle est pourtant nécessaire sur la page "vent". Ce serait bien d'ailleurs qu'elle n'apparaisse que sur le "type" vent et pas pour les autres types.

  8. #28
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Et ben alors, une petite image et tout s'écroule !!! hihihi...

    Non c'est bon, ce n'est rien, j'ai vu pourquoi ça déconne, j'ai modifié le code...

    Citation Envoyé par plefever Voir le message
    Nom : vent.gif
Affichages : 385
Taille : 5,9 Ko
    Et autre petit détail, le "msgDateCode" reste caché sous l'image.
    J'ai tout essayé avec cette image légende, où qu'elle soit, elle perturbe la page. Elle est pourtant nécessaire sur la page "vent". Ce serait bien d'ailleurs qu'elle n'apparaisse que sur le "type" vent et pas pour les autres types.
    J'ai modifié le CSS et j'ai ajouté quelques lignes de code afin que la légende n'apparaisse que sur le "type" vent...

    Tu peux tester ici : http://jsbin.com/pacofaqako/edit?html,output ...

  9. #29
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2016
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2016
    Messages : 83
    Points : 11
    Points
    11
    Par défaut
    Formidable !!! Je viens de faire une petite mise en forme "design " et c'est nickel !!! Merci, merci , merci !!!!
    Je teste ça en profondeur dans les jours qui viennent.
    Je me pose toujours la question de savoir si il faut enregistrer toujours le même fichier ou faire une date différente chaque jour...A tester...

    Quelque fois la connexion 3G ou EDGE même est faible dans certains endroits. Il faut dès fois du temps pour télécharger l'ensemble des images. Je me demandait si il était possible de mettre un "loader" discret comme celui-ci :
    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
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Nouvelle page 1</title>
    <script type="text/javascript" language="Javascript">
    /*! pace 1.0.0 */
    (function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X=[].slice,Y={}.hasOwnProperty,Z=function(a,b){function c(){this.constructor=a}for(var d in b)Y.call(b,d)&&(a[d]=b[d]);return c.prototype=b.prototype,a.prototype=new c,a.__super__=b.prototype,a},$=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};for(u={catchupTime:100,initialRate:.03,minTime:250,ghostTime:100,maxProgressPerFrame:20,easeFactor:1.25,startOnPageLoad:!0,restartOnPushState:!0,restartOnRequestAfter:500,target:"body",elements:{checkInterval:100,selectors:["body"]},eventLag:{minSamples:10,sampleCount:3,lagThreshold:3},ajax:{trackMethods:["GET"],trackWebSockets:!0,ignoreURLs:[]}},C=function(){var a;return null!=(a="undefined"!=typeof performance&&null!==performance&&"function"==typeof performance.now?performance.now():void 0)?a:+new Date},E=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame,t=window.cancelAnimationFrame||window.mozCancelAnimationFrame,null==E&&(E=function(a){return setTimeout(a,50)},t=function(a){return clearTimeout(a)}),G=function(a){var b,c;return b=C(),(c=function(){var d;return d=C()-b,d>=33?(b=C(),a(d,function(){return E(c)})):setTimeout(c,33-d)})()},F=function(){var a,b,c;return c=arguments[0],b=arguments[1],a=3<=arguments.length?X.call(arguments,2):[],"function"==typeof c[b]?c[b].apply(c,a):c[b]},v=function(){var a,b,c,d,e,f,g;for(b=arguments[0],d=2<=arguments.length?X.call(arguments,1):[],f=0,g=d.length;g>f;f++)if(c=d[f])for(a in c)Y.call(c,a)&&(e=c[a],null!=b[a]&&"object"==typeof b[a]&&null!=e&&"object"==typeof e?v(b[a],e):b[a]=e);return b},q=function(a){var b,c,d,e,f;for(c=b=0,e=0,f=a.length;f>e;e++)d=a[e],c+=Math.abs(d),b++;return c/b},x=function(a,b){var c,d,e;if(null==a&&(a="options"),null==b&&(b=!0),e=document.querySelector("[data-pace-"+a+"]")){if(c=e.getAttribute("data-pace-"+a),!b)return c;try{return JSON.parse(c)}catch(f){return d=f,"undefined"!=typeof console&&null!==console?console.error("Error parsing inline pace options",d):void 0}}},g=function(){function a(){}return a.prototype.on=function(a,b,c,d){var e;return null==d&&(d=!1),null==this.bindings&&(this.bindings={}),null==(e=this.bindings)[a]&&(e[a]=[]),this.bindings[a].push({handler:b,ctx:c,once:d})},a.prototype.once=function(a,b,c){return this.on(a,b,c,!0)},a.prototype.off=function(a,b){var c,d,e;if(null!=(null!=(d=this.bindings)?d[a]:void 0)){if(null==b)return delete this.bindings[a];for(c=0,e=[];c<this.bindings[a].length;)e.push(this.bindings[a][c].handler===b?this.bindings[a].splice(c,1):c++);return e}},a.prototype.trigger=function(){var a,b,c,d,e,f,g,h,i;if(c=arguments[0],a=2<=arguments.length?X.call(arguments,1):[],null!=(g=this.bindings)?g[c]:void 0){for(e=0,i=[];e<this.bindings[c].length;)h=this.bindings[c][e],d=h.handler,b=h.ctx,f=h.once,d.apply(null!=b?b:this,a),i.push(f?this.bindings[c].splice(e,1):e++);return i}},a}(),j=window.Pace||{},window.Pace=j,v(j,g.prototype),D=j.options=v({},u,window.paceOptions,x()),U=["ajax","document","eventLag","elements"],Q=0,S=U.length;S>Q;Q++)K=U[Q],D[K]===!0&&(D[K]=u[K]);i=function(a){function b(){return V=b.__super__.constructor.apply(this,arguments)}return Z(b,a),b}(Error),b=function(){function a(){this.progress=0}return a.prototype.getElement=function(){var a;if(null==this.el){if(a=document.querySelector(D.target),!a)throw new i;this.el=document.createElement("div"),this.el.className="pace pace-active",document.body.className=document.body.className.replace(/pace-done/g,""),document.body.className+=" pace-running",this.el.innerHTML='<div class="pace-progress">\n  <div class="pace-progress-inner"></div>\n</div>\n<div class="pace-activity"></div>',null!=a.firstChild?a.insertBefore(this.el,a.firstChild):a.appendChild(this.el)}return this.el},a.prototype.finish=function(){var a;return a=this.getElement(),a.className=a.className.replace("pace-active",""),a.className+=" pace-inactive",document.body.className=document.body.className.replace("pace-running",""),document.body.className+=" pace-done"},a.prototype.update=function(a){return this.progress=a,this.render()},a.prototype.destroy=function(){try{this.getElement().parentNode.removeChild(this.getElement())}catch(a){i=a}return this.el=void 0},a.prototype.render=function(){var a,b,c,d,e,f,g;if(null==document.querySelector(D.target))return!1;for(a=this.getElement(),d="translate3d("+this.progress+"%, 0, 0)",g=["webkitTransform","msTransform","transform"],e=0,f=g.length;f>e;e++)b=g[e],a.children[0].style[b]=d;return(!this.lastRenderedProgress||this.lastRenderedProgress|0!==this.progress|0)&&(a.children[0].setAttribute("data-progress-text",""+(0|this.progress)+"%"),this.progress>=100?c="99":(c=this.progress<10?"0":"",c+=0|this.progress),a.children[0].setAttribute("data-progress",""+c)),this.lastRenderedProgress=this.progress},a.prototype.done=function(){return this.progress>=100},a}(),h=function(){function a(){this.bindings={}}return a.prototype.trigger=function(a,b){var c,d,e,f,g;if(null!=this.bindings[a]){for(f=this.bindings[a],g=[],d=0,e=f.length;e>d;d++)c=f[d],g.push(c.call(this,b));return g}},a.prototype.on=function(a,b){var c;return null==(c=this.bindings)[a]&&(c[a]=[]),this.bindings[a].push(b)},a}(),P=window.XMLHttpRequest,O=window.XDomainRequest,N=window.WebSocket,w=function(a,b){var c,d,e,f;f=[];for(d in b.prototype)try{e=b.prototype[d],f.push(null==a[d]&&"function"!=typeof e?a[d]=e:void 0)}catch(g){c=g}return f},A=[],j.ignore=function(){var a,b,c;return b=arguments[0],a=2<=arguments.length?X.call(arguments,1):[],A.unshift("ignore"),c=b.apply(null,a),A.shift(),c},j.track=function(){var a,b,c;return b=arguments[0],a=2<=arguments.length?X.call(arguments,1):[],A.unshift("track"),c=b.apply(null,a),A.shift(),c},J=function(a){var b;if(null==a&&(a="GET"),"track"===A[0])return"force";if(!A.length&&D.ajax){if("socket"===a&&D.ajax.trackWebSockets)return!0;if(b=a.toUpperCase(),$.call(D.ajax.trackMethods,b)>=0)return!0}return!1},k=function(a){function b(){var a,c=this;b.__super__.constructor.apply(this,arguments),a=function(a){var b;return b=a.open,a.open=function(d,e){return J(d)&&c.trigger("request",{type:d,url:e,request:a}),b.apply(a,arguments)}},window.XMLHttpRequest=function(b){var c;return c=new P(b),a(c),c};try{w(window.XMLHttpRequest,P)}catch(d){}if(null!=O){window.XDomainRequest=function(){var b;return b=new O,a(b),b};try{w(window.XDomainRequest,O)}catch(d){}}if(null!=N&&D.ajax.trackWebSockets){window.WebSocket=function(a,b){var d;return d=null!=b?new N(a,b):new N(a),J("socket")&&c.trigger("request",{type:"socket",url:a,protocols:b,request:d}),d};try{w(window.WebSocket,N)}catch(d){}}}return Z(b,a),b}(h),R=null,y=function(){return null==R&&(R=new k),R},I=function(a){var b,c,d,e;for(e=D.ajax.ignoreURLs,c=0,d=e.length;d>c;c++)if(b=e[c],"string"==typeof b){if(-1!==a.indexOf(b))return!0}else if(b.test(a))return!0;return!1},y().on("request",function(b){var c,d,e,f,g;return f=b.type,e=b.request,g=b.url,I(g)?void 0:j.running||D.restartOnRequestAfter===!1&&"force"!==J(f)?void 0:(d=arguments,c=D.restartOnRequestAfter||0,"boolean"==typeof c&&(c=0),setTimeout(function(){var b,c,g,h,i,k;if(b="socket"===f?e.readyState<2:0<(h=e.readyState)&&4>h){for(j.restart(),i=j.sources,k=[],c=0,g=i.length;g>c;c++){if(K=i[c],K instanceof a){K.watch.apply(K,d);break}k.push(void 0)}return k}},c))}),a=function(){function a(){var a=this;this.elements=[],y().on("request",function(){return a.watch.apply(a,arguments)})}return a.prototype.watch=function(a){var b,c,d,e;return d=a.type,b=a.request,e=a.url,I(e)?void 0:(c="socket"===d?new n(b):new o(b),this.elements.push(c))},a}(),o=function(){function a(a){var b,c,d,e,f,g,h=this;if(this.progress=0,null!=window.ProgressEvent)for(c=null,a.addEventListener("progress",function(a){return h.progress=a.lengthComputable?100*a.loaded/a.total:h.progress+(100-h.progress)/2},!1),g=["load","abort","timeout","error"],d=0,e=g.length;e>d;d++)b=g[d],a.addEventListener(b,function(){return h.progress=100},!1);else f=a.onreadystatechange,a.onreadystatechange=function(){var b;return 0===(b=a.readyState)||4===b?h.progress=100:3===a.readyState&&(h.progress=50),"function"==typeof f?f.apply(null,arguments):void 0}}return a}(),n=function(){function a(a){var b,c,d,e,f=this;for(this.progress=0,e=["error","open"],c=0,d=e.length;d>c;c++)b=e[c],a.addEventListener(b,function(){return f.progress=100},!1)}return a}(),d=function(){function a(a){var b,c,d,f;for(null==a&&(a={}),this.elements=[],null==a.selectors&&(a.selectors=[]),f=a.selectors,c=0,d=f.length;d>c;c++)b=f[c],this.elements.push(new e(b))}return a}(),e=function(){function a(a){this.selector=a,this.progress=0,this.check()}return a.prototype.check=function(){var a=this;return document.querySelector(this.selector)?this.done():setTimeout(function(){return a.check()},D.elements.checkInterval)},a.prototype.done=function(){return this.progress=100},a}(),c=function(){function a(){var a,b,c=this;this.progress=null!=(b=this.states[document.readyState])?b:100,a=document.onreadystatechange,document.onreadystatechange=function(){return null!=c.states[document.readyState]&&(c.progress=c.states[document.readyState]),"function"==typeof a?a.apply(null,arguments):void 0}}return a.prototype.states={loading:0,interactive:50,complete:100},a}(),f=function(){function a(){var a,b,c,d,e,f=this;this.progress=0,a=0,e=[],d=0,c=C(),b=setInterval(function(){var g;return g=C()-c-50,c=C(),e.push(g),e.length>D.eventLag.sampleCount&&e.shift(),a=q(e),++d>=D.eventLag.minSamples&&a<D.eventLag.lagThreshold?(f.progress=100,clearInterval(b)):f.progress=100*(3/(a+3))},50)}return a}(),m=function(){function a(a){this.source=a,this.last=this.sinceLastUpdate=0,this.rate=D.initialRate,this.catchup=0,this.progress=this.lastProgress=0,null!=this.source&&(this.progress=F(this.source,"progress"))}return a.prototype.tick=function(a,b){var c;return null==b&&(b=F(this.source,"progress")),b>=100&&(this.done=!0),b===this.last?this.sinceLastUpdate+=a:(this.sinceLastUpdate&&(this.rate=(b-this.last)/this.sinceLastUpdate),this.catchup=(b-this.progress)/D.catchupTime,this.sinceLastUpdate=0,this.last=b),b>this.progress&&(this.progress+=this.catchup*a),c=1-Math.pow(this.progress/100,D.easeFactor),this.progress+=c*this.rate*a,this.progress=Math.min(this.lastProgress+D.maxProgressPerFrame,this.progress),this.progress=Math.max(0,this.progress),this.progress=Math.min(100,this.progress),this.lastProgress=this.progress,this.progress},a}(),L=null,H=null,r=null,M=null,p=null,s=null,j.running=!1,z=function(){return D.restartOnPushState?j.restart():void 0},null!=window.history.pushState&&(T=window.history.pushState,window.history.pushState=function(){return z(),T.apply(window.history,arguments)}),null!=window.history.replaceState&&(W=window.history.replaceState,window.history.replaceState=function(){return z(),W.apply(window.history,arguments)}),l={ajax:a,elements:d,document:c,eventLag:f},(B=function(){var a,c,d,e,f,g,h,i;for(j.sources=L=[],g=["ajax","elements","document","eventLag"],c=0,e=g.length;e>c;c++)a=g[c],D[a]!==!1&&L.push(new l[a](D[a]));for(i=null!=(h=D.extraSources)?h:[],d=0,f=i.length;f>d;d++)K=i[d],L.push(new K(D));return j.bar=r=new b,H=[],M=new m})(),j.stop=function(){return j.trigger("stop"),j.running=!1,r.destroy(),s=!0,null!=p&&("function"==typeof t&&t(p),p=null),B()},j.restart=function(){return j.trigger("restart"),j.stop(),j.start()},j.go=function(){var a;return j.running=!0,r.render(),a=C(),s=!1,p=G(function(b,c){var d,e,f,g,h,i,k,l,n,o,p,q,t,u,v,w;for(l=100-r.progress,e=p=0,f=!0,i=q=0,u=L.length;u>q;i=++q)for(K=L[i],o=null!=H[i]?H[i]:H[i]=[],h=null!=(w=K.elements)?w:[K],k=t=0,v=h.length;v>t;k=++t)g=h[k],n=null!=o[k]?o[k]:o[k]=new m(g),f&=n.done,n.done||(e++,p+=n.tick(b));return d=p/e,r.update(M.tick(b,d)),r.done()||f||s?(r.update(100),j.trigger("done"),setTimeout(function(){return r.finish(),j.running=!1,j.trigger("hide")},Math.max(D.ghostTime,Math.max(D.minTime-(C()-a),0)))):c()})},j.start=function(a){v(D,a),j.running=!0;try{r.render()}catch(b){i=b}return document.querySelector(".pace")?(j.trigger("start"),j.go()):setTimeout(j.start,50)},"function"==typeof define&&define.amd?define(function(){return j}):"object"==typeof exports?module.exports=j:D.startOnPageLoad&&j.start()}).call(this);
    </script>
    </head>
     
    <body>
    <style type="text/css">
    .pace {
      -webkit-pointer-events: none;
      pointer-events: none;
     
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }
     
    .pace-inactive {
      display: none;
    }
     
    .pace .pace-progress {
      background: #29d;
      position: fixed;
      z-index: 2000;
      top: 0;
      right: 100%;
      width: 100%;
      height: 2px;
    }
    </style>
    </body>
     
    </html>
    ou celui-ci :
    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
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Nouvelle page 1</title>
    <style type="text/css">
    .loader {
      height: 4px;
      width: 100%;
      position: relative;
      overflow: hidden;
      background-color: #ddd;
    }
    .loader:before{
      display: block;
      position: absolute;
      content: "";
      left: -200px;
      width: 200px;
      height: 4px;
      background-color: #2980b9;
      animation: loading 2s linear infinite;
    }
     
    @keyframes loading {
        from {left: -200px; width: 30%;}
        50% {width: 30%;}
        70% {width: 70%;}
        80% { left: 50%;}
        95% {left: 120%;}
        to {left: 100%;}
    }
    </style>
    </head>
     
    <body>
    <div class="loader"></div>
    </body>
     
    </html>
    Ou un compteur d'octets qui pourrait me dire ce que je consomme. Les prix vont en diminuant et les volumes augmentent, mais en attendant d'être tout à fait libre, ça pourrait être utile. et ne trouve rien sur le net à ce sujet.
    En tous cas, je suis bien content, j'ai un bel outil maintenant merci "Beginner"

  10. #30
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Tant mieux si cela fonctionne bien...

    Sinon pour ce qui du loader, je ne sais pas si il est possible de l'utiliser pour un ensemble d'images, j'en ai jamais utilisé...

    Mais le deuxième ne contient pas de scripte ? C'est juste une animation ?

    Ouvre éventuellement un autre fil, peut-être que d'autres sauront de répondre...

  11. #31
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2016
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2016
    Messages : 83
    Points : 11
    Points
    11
    Par défaut
    Tout est résolu. Le loader serait un plus. Je vais ouvrir une nouvelle discussion parce-que je n'ai rien trouvé sur le net.
    Merci beaucoup pour ton aide Beginner

  12. #32
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2016
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2016
    Messages : 83
    Points : 11
    Points
    11
    Par défaut
    Petit message pour "Beginner"
    J'ai à nouveau un petit problème lorsque je rajoute une image légende dans cette version ci-dessous. Tout marche très bien sauf le survol du pointeur sur la colonne des heures.... Si je retire l'image, ça fonctionne... je ne trouve pas le hic...
    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
    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
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    478
    479
    480
    481
    482
    483
    484
    485
    486
    487
    488
    489
    490
    491
    492
    493
    494
    495
    496
    497
    498
    499
    500
    501
    502
    503
    504
    505
    506
    <!DOCTYPE html>
    <!-- saved from url=(0113)file:///C:/Users/Philippe/Desktop/M%C3%A9t%C3%A9orama/Test%20off%20line/Meteorama%20m%C3%A9t%C3%A9o%20marine.html -->
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>Meteorama météo marine</title>
     
        <style type="text/css">
     
    body{
        font-family: verdana ;
        font-size:13px
    }        
     
    div#colDate {
        float: left;
        width: 190px;
        height: 500px;
        background: white;
        padding-right: 1px;
     
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;    
    }
     
    div#conteneur {
        float: left;
        padding-left: 3px;
        padding-top: 20px;  
    }
     
    div#fond {
        float: left;
        padding-left: 3px;
     
    }
    div#legende {
    	position: relative;
    	left: 6px;
    	padding-top: 20px;
    	bottom: 0px;
    }    
     
    div#msgDateCode {            
            position: absolute;
        left: 0px;
        bottom: 0px;
    }
     
    .heures{
        text-align: right ;
        color: blue;
    }
     
    .heures span {    
        color: white;
        font-weight: bold;
    }
     
    .selected{
        color: red;
        font-weight: bold;
    }
    .styled-button-1 {
    cursor: pointer;
    	-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    	-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    	box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
    	color:#707070;
    	background-color:#EEEEEE;
    	border-radius:5px;
    	-moz-border-radius:5px;
    	-webkit-border-radius:5px;
    	border:none;
    	font-family:'Helvetica Neue',Arial,sans-serif;
    	font-size:16px;
    	font-weight:700;
    	height:36px;
    	padding:4px 16px;
    	border: 2px solid #999999;
    }
    .onoffswitch {
        position: relative; width: 160px;
        -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .onoffswitch-checkbox {
        display: none;
    }
    .onoffswitch-label {
        display: block; overflow: hidden; cursor: pointer;
        border: 2px solid #999999; border-radius: 5px;
    }
    .onoffswitch-inner {
        display: block; width: 200%; margin-left: -100%;
        transition: margin 0.3s ease-in 0s;
    }
    .onoffswitch-inner:before, .onoffswitch-inner:after {
        display: block; float: left; width: 50%; height: 34px; padding: 0; line-height: 34px;
        font-family:'Helvetica Neue',Arial,sans-serif;
    	font-size:16px;
    	font-weight:700;
        box-sizing: border-box;
    }
    .onoffswitch-inner:before {
        content: "HORS LIGNE";
        padding-left: 10px;
        background-color: #FF0000; color: #FFFFFF;
    }
    .onoffswitch-inner:after {
        content: "EN LIGNE";
        padding-right: 10px;
        background-color: #EEEEEE; color: #707070;
        text-align: center;
    }
    .onoffswitch-switch {
        display: block; width: 14px; margin: 3px;
        background: #FFFFFF;
        position: absolute; top: 0; bottom: 0;
        right: 136px;
        border: 2px solid #999999; border-radius: 5px;
        transition: all 0.3s ease-in 0s; 
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
        margin-left: 0;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
        right: 0px; 
    }
     
        </style>
     
        <script type="text/javascript" language="Javascript">
     
    function initInputonload() {
     
        var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"
     
        if (document.body.attachEvent)
              document.body.attachEvent("on" + mousewheelevt, rotateimage);
            else if (document.body.addEventListener)
                     document.body.addEventListener(mousewheelevt, rotateimage, false);   
     
        if (document.getElementById("colDate").attachEvent)
              document.getElementById("colDate").attachEvent("onmouseover", selectHourOnMouseOver);
            else if (document.getElementById("colDate").addEventListener)
                     document.getElementById("colDate").addEventListener("mouseover", selectHourOnMouseOver, false);  
     
        var dateTitle = document.title.split("-") ;
     
        if (dateTitle.length === 1) {
            var date = dateToString(new Date());  
            document.getElementById("thedate").value = date[5] ;
            document.getElementById("msgI").innerHTML = "Travail inline ! (vous pouvez modifier la date)";
        }
           else {
              var tabDate = dateTitle[1].split("_") ;
     
              datePageOffLine = tabDate[2] + "-" + tabDate[1] + "-" + tabDate[0] ;
              document.getElementById("thedate").value = datePageOffLine ;
              document.getElementById("thedate").disabled = true;
     
              document.getElementById("offline").checked = true ;
              document.getElementById("msgI").innerHTML = "Travail hors connexion ! La date est celle à laquelle la page a été sauvegardée...";          
           }    
     
        document.getElementById("conteneur").innerHTML = "";
     
        document.getElementById("msgDateCode").innerHTML =  "" ;
        deSelecHour();
        initInput();
        document.getElementById("msg").innerHTML = "Choisissez vos paramètres puis cliquez sur le bouton 'Afficher'";
    }
     
    var tabDateHoursImagesCode = [];
     
    function initInput() {
     
        var url = document.getElementById("affichage").value ;       
     
     
        //http://meteomaps.s3.amazonaws.com/eltiempo/datamaps/eur-pressure-rain-fr-*.gif
     
        var n = url.lastIndexOf("-"); 
        url = url.slice(0,n+1) +"*.gif";
        document.getElementById("affichage").value = url;
     
        //dates & heures...
     
        var date = new Date();
        var tabDate = document.getElementById("thedate").value.split("-") ;    
     
        date.setDate(tabDate[2]); date.setMonth(tabDate[1]-1); date.setFullYear(tabDate[0]);     
        tabDateStr = dateToString(date);
        document.getElementById("d1").innerHTML = tabDateStr[0] + " " + tabDateStr[1] ; 
     
        document.title = "Meteorama-" + tabDateStr[6] + "-" + tabDateStr[0] ; // ajoute la date au titre... 
     
        date.setDate(date.getDate()+1);    
        tabDateStr = dateToString(date); 
        document.getElementById("d2").innerHTML = tabDateStr[0] + " " + tabDateStr[1] ;
     
        date.setDate(date.getDate()+1);    
        tabDateStr = dateToString(date); 
        document.getElementById("d3").innerHTML = tabDateStr[0] + " " + tabDateStr[1] ;
     
    	date.setDate(date.getDate()+1);    
        tabDateStr = dateToString(date); 
        document.getElementById("d4").innerHTML = tabDateStr[0] + " " + tabDateStr[1] ;    
     
        date.setDate(tabDate[2]); date.setMonth(tabDate[1]-1); date.setFullYear(tabDate[0]);           
        date.setHours(2); date.setMinutes(0); date.setSeconds(0);
     
        for(var i = 0; i< 31 ; i++) {
            tabDateStr = dateToString(date);
            tabDateHoursImagesCode[i] = tabDateStr[4] ;
            date.setHours(date.getHours()+3);       
        }    
     
        document.getElementById("msg").innerHTML = "Les paramètres ont été modifiés, veuillez cliquer sur le bouton 'Afficher' pour rafraîchir la page...";
    }
     
    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 monImg ;  
        var conteneur = document.getElementById("conteneur");
     
        conteneur.innerHTML = "";    
     
        for(var i = 0; i< 31 ; i++) {
     
            monImg = document.createElement('img');     
            monImg.src = url.replace("*", tabDateHoursImagesCode[i]);
            monImg.style.visibility = 'hidden' ;
            monImg.style.position = "absolute";
            conteneur.appendChild(monImg);
            myimages[i] = monImg ;                   
         }    
     
        selectHourAndImage(currentImage, 0);
     
     
     
        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 'Afficher'...";
    } 
     
    function afficheImagesHorsConnexion() {
     
        var url = document.getElementById("affichage").value;    
        var n = url.lastIndexOf("/");          
        var pathImages = "./" + document.title + "_files" + url.slice(n);    
     
        var monImg ;  
        var conteneur = document.getElementById("conteneur");
     
        conteneur.innerHTML = "";
     
        for(var i = 0; i< 31 ; i++) {
     
            monImg = document.createElement('img');     
            monImg.src = pathImages.replace("*", tabDateHoursImagesCode[i]);
            monImg.style.visibility = 'hidden' ;
            monImg.style.position = "absolute";        
            conteneur.appendChild(monImg);
            myimages[i] = monImg ;           
        }
     
        selectHourAndImage(currentImage, 0);
     
     
     
        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 'Afficher'";
    }
     
    var myimages = [];
    var currentImage = 0 ;
    var nextImage = 0 ;
     
    function rotateimage(event) {
     
        if(myimages.length === 0) return ; 
     
        var delta = event.detail ? event.detail * (-120) : event.wheelDelta     //delta returns +120 when wheel is scrolled up, -120 when scrolled down
        nextImage = (delta <= -120) ? nextImage + 1 : nextImage - 1 //move image index forward or back, depending on whether wheel is scrolled down or up    
     
        nextImage = (nextImage < 0) ? 0 : (nextImage > myimages.length - 1) ? myimages.length - 1 : nextImage
     
        selectHourAndImage(currentImage, nextImage);
     
        if (event.preventDefault)
            //disable default wheel action of scrolling page
            event.preventDefault()
        else
            return false ;
    }
     
    function selectHourOnMouseOver(event){
     
        if(myimages.length === 0) return ;
     
        var idOver = event.target.id ;       
     
        if(idOver.charAt(0)=== "h" || idOver.charAt(0)=== "f") {       
     
            nextImage = +idOver.slice(1);          
            selectHourAndImage(currentImage, nextImage);
      }    
    }
     
    function selectHourAndImage(current, next) {
     
        document.getElementById("h" + current).className = "";
        document.getElementById("f" + current).style.color = "";
        myimages[current].style.visibility = "hidden"; 
     
        document.getElementById("h" + next).className = "selected";
        document.getElementById("f" + next).style.color = "red";
        myimages[next].style.visibility = "visible";  
     
        //document.getElementById("msgDateCode").innerHTML = tabDateHoursImagesCode[+strNbrOver];
        document.getElementById("msgDateCode").innerHTML =  "URL : " + myimages[next].src ;
     
        nextImage = next ;     
        currentImage = nextImage ;     
    }
     
    function deSelecHour(){
     
        for(var i = 0; i< 31 ; i++) {
     
            document.getElementById("h" + i).className = "";
            document.getElementById("f" + i).style.color = "";        
        }    
    }
     
    function dateToString(date) {
     
        var tab_jour = new Array("Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi");
        var day = date.getDay();
        var ladate = date.getDate(); if (ladate<10) ladate = "0" + ladate ;
        var month = date.getMonth() + 1; if (month<10) month = "0" + month ;
        var year = date.getFullYear();
        var h = date.getHours(); if (h<10) h = "0" + h ;
        var m = date.getMinutes(); if (m<10) m = "0" + m ;
        var s = date.getSeconds(); if (s<10) s = "0" + s ;    
        var h2 = date.getUTCHours() ; if (h2<10) h2 = "0" + h2 ;
     
        var tabResultat = [];    
     
        tabResultat[0] = tab_jour[day]; 
        tabResultat[1] = ladate + "." + month + "." + year ;
        tabResultat[2] = h + ":" + m ;    
        tabResultat[3] = ":" + s ;
        tabResultat[4] = year + month + ladate + h2 + m ;
        tabResultat[5] = year + "-" + month + "-" + ladate ;
        tabResultat[6] = ladate + "_" + month + "_"+ year ;
     
        return tabResultat ;    
    }    
     
    var datePageOffLine = "" ;
     
    function checkOnOffLine() {
     
        if(datePageOffLine === "") {
            if(document.getElementById("offline").checked)        
                document.getElementById("msgI").innerHTML = "Travail hors connexion ! Note : pour afficher la page souhaitée, entrez sa date de sauvegarde puis cliquez sur 'Afficher'..."
                    else document.getElementById("msgI").innerHTML = "Travail inline ! (vous pouvez modifier la date)"
     
            initInput();
            return ;
        }
     
        if(document.getElementById("offline").checked) {
     
            document.getElementById("thedate").value = datePageOffLine ;
            document.getElementById("thedate").disabled = true;
            document.getElementById("msgI").innerHTML = "Travail hors connexion ! La date est celle à laquelle la page a été sauvegardée...";
            initInput();
        }
            else {
                var date = dateToString(new Date());  
     
                document.getElementById("thedate").value = date[5] ;
                document.getElementById("thedate").disabled = false ; 
                document.getElementById("msgI").innerHTML = "Travail inline ! (vous pouvez modifier la date)"
                initInput();
            }
    }
        </script> 
    </head>
     
    <body onload="initInputonload()">
     
     
     
        <div>        
     
            <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse">
    			<tbody><tr>
    				<td>
    				<div class="onoffswitch">
        <p style="margin-top: 0; margin-bottom: 0">
        <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="offline" checked="">
        <label class="onoffswitch-label" for="offline">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
     
     
        </p></div></td>
    				<td><p style="margin-top: 0; margin-bottom: 0"><b>
    				<font face="Arial" size="5" color="#333333">
    				<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    				<a target="_blank" href="http://www.meteorama.fr/pression-atmospherique/" style="text-decoration:none; vertical-align:middle">
    				Météorama Pression-atmospherique</a>&nbsp; </span></font></b>   
     
            <input type="date" id="thedate" style="display:none" onchange="initInput(event)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     
     
            <input type="button" name="RefreshButton" value="Afficher" class="styled-button-1" onclick="afficheImages()">    
            <input type="text" id="affichage" style="display:none" value="http://meteomaps.s3.amazonaws.com/eltiempo/datamaps/eur-pressure-rain-fr-*.gif" size="90"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Ctrl + S</b> pour enregistrer les données.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    				<a href="Meteorama%20météo%20marine%20FINAL.html"> 
    				Météo marine</a></p></td>
    			</tr>
    		</tbody></table>
            <p id="msg" style="display:none">La page a été mise à jour(rafraichie). Pour afficher d'autres images choisissez vos paramètres puis cliquez sur le bouton 'Afficher'...</p>
            <p id="msgI" style="color:red; font-weight: bold; display:none">Travail inline ! (vous pouvez modifier la date)</p>
        </div>  
        <hr> 
     
        <div>
            <div id="colDate" style="width: 233px; height: 544px">
                <b><font face="Verdana" color="#707070">
                <label id="d1">Vendredi 22.04.2016</label></font></b>
                <div class="heures">        
                    <label id="h0" class="selected">02:00<span id="f0" style="color: red; font-family:Arial">►</span></label><br>
                    <label id="h1" class="">05:00<span id="f1"style="font-family:Arial">►</span></label><br>
                    <label id="h2" class="">08:00<span id="f2"style="font-family:Arial">►</span></label><br>
                    <label id="h3" class="">11:00<span id="f3"style="font-family:Arial">►</span></label><br>
                    <label id="h4" class="">14:00<span id="f4"style="font-family:Arial">►</span></label><br>
                    <label id="h5" class="">17:00<span id="f5"style="font-family:Arial">►</span></label><br>
                    <label id="h6" class="">20:00<span id="f6"style="font-family:Arial">►</span></label><br>
                    <label id="h7" class="">23:00<span id="f7"style="font-family:Arial">►</span></label><br>
                </div>
                <b><font face="Verdana" color="#707070">
                <label id="d2">Samedi 23.04.2016</label></font></b>
                <div class="heures">        
                    <label id="h8" class="">02:00<span id="f8"style="font-family:Arial">►</span></label><br>
                    <label id="h9" class="">05:00<span id="f9"style="font-family:Arial">►</span></label><br>
                    <label id="h10" class="">08:00<span id="f10"style="font-family:Arial">►</span></label><br>
                    <label id="h11" class="">11:00<span id="f11"style="font-family:Arial">►</span></label><br>
                    <label id="h12" class="">14:00<span id="f12"style="font-family:Arial">►</span></label><br>
                    <label id="h13" class="">17:00<span id="f13"style="font-family:Arial">►</span></label><br>
                    <label id="h14" class="">20:00<span id="f14"style="font-family:Arial">►</span></label><br>
                    <label id="h15" class="">23:00<span id="f15"style="font-family:Arial">►</span></label><br>
                </div>
                <b><font face="Verdana" color="#707070">
                <label id="d3">Dimanche 24.04.2016</label></font></b>
                <div class="heures">        
                    <label id="h16" class="">02:00<span id="f16"style="font-family:Arial">►</span></label><br>
                    <label id="h17" class="">05:00<span id="f17"style="font-family:Arial">►</span></label><br>
                    <label id="h18" class="">08:00<span id="f18"style="font-family:Arial">►</span></label><br>
                    <label id="h19" class="">11:00<span id="f19"style="font-family:Arial">►</span></label><br>
                    <label id="h20" class="">14:00<span id="f20"style="font-family:Arial">►</span></label><br>
                    <label id="h21" class="">17:00<span id="f21"style="font-family:Arial">►</span></label><br>
                    <label id="h22" class="">20:00<span id="f22"style="font-family:Arial">►</span></label><br>
                    <label id="h23" class="">23:00<span id="f23"style="font-family:Arial">►</span></label><br>
                </div>
                <b><font face="Verdana" color="#707070">
                <label id="d4">Lundi 25.04.2016</label></font></b>
                <div class="heures">        
                    <label id="h24" class="">02:00<span id="f24"style="font-family:Arial">►</span></label><br>
                    <label id="h25" class="">05:00<span id="f25"style="font-family:Arial">►</span></label><br>
                    <label id="h26" class="">08:00<span id="f26"style="font-family:Arial">►</span></label><br>
                    <label id="h27" class="">11:00<span id="f27"style="font-family:Arial">►</span></label><br>
                    <label id="h28" class="">14:00<span id="f28"style="font-family:Arial">►</span></label><br>
                    <label id="h29" class="">17:00<span id="f29"style="font-family:Arial">►</span></label><br>
                    <label id="h30" class="">20:00<span id="f30"style="font-family:Arial">►</span></label><br>
     
    			</div>
            </div>
     		        <div id="fond" ><img src="file:///C:/Users/Philippe/Desktop/Dossier%20de%20travail/fond.gif" width="680" height="536"><div id="conteneur"></div></div>
    				<div id="legende" ><img src="file:///C:/Users/Philippe/Desktop/Dossier%20de%20travail/VP.gif"></div>
       		<div id="msgDateCode" style="color:#C0C0C0;"></div>
        </div>
     
     
     
     
     
    </body>
    </html>
    Et les images ,légende et fond (celle qui indique indisponible) :
    Nom : VP.gif
Affichages : 114
Taille : 4,7 KoNom : fond.gif
Affichages : 117
Taille : 4,0 Ko

  13. #33
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Citation Envoyé par plefever Voir le message
    ...Tout marche très bien sauf le survol du pointeur sur la colonne des heures...
    C'est parce que la colonne des heures est recouverte par la div contenant la légende... Ajoute float: left; au CSS... Et tu peux aussi utiliser padding pour mettre une marge à gauche et en haut :

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    div#legende {    
        float: left;
        padding-left: 7px;
        padding-top: 20px;
     
    }

    PS : Tu as supprimé beaucoup de choses (les messages en bleu et en rouge et la date et sa gestion...), le script qui gère tout cela ne sert plus du coup mais bon j’espère au moins que ça t'a servit à comprendre le fonctionnement, après la présentation et l'usage c'est toi qui voit selon ce qui te convient...

  14. #34
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2016
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2016
    Messages : 83
    Points : 11
    Points
    11
    Par défaut
    Haaaaaaa
    Evidemment, je cherchais à coté...
    Merci
    J'ai encore un peu du mal avec le positionnement css... Un peu fatigué aussi, cela m'obsède. je suis sur tout ça dès que j'ai la possibilité d'y "travailler". J'apprend beaucoup de chose et apprendre me plait beaucoup.
    J'ai supprimé des choses dans cette version, il me fallait faire des choix pour garder cette page simple, mais il y en a 3 autres sur lesquelles j'ai gardé d'autres éléments. J'ai volontairement "masqué" et non pas supprimer des éléments pour pouvoir m'adapter facilement à toute modification. Ton travail n'est pas inutile, bien au contraire, la porte reste ouverte vers d'autres choses.
    Je n'ai toujours pas décidé de la version d'enregistrement... nouvelle date ou écraser l'unique fichier. Je vais faire des chargement pendant une période donnée pour me décider.
    Maintenant, ce qui me préoccupe, c'est le "poids" des images de Consorzio Lamma. Un loader et un compteur d'octets me donneraient des infos utiles. J'ai ouvert un nouveau sujet là dessus.
    Merci de ton aide.
    Je repasse le sujet en "résolu"

  15. #35
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    J'y connaissais pas grand chose en positionnement mais j'ai cherché pour pouvoir faire cette page, comme quoi c'est formateur d'essayer de résoudre des problèmes...

    Citation Envoyé par plefever Voir le message
    ... J'apprends beaucoup de chose et apprendre me plait beaucoup.
    Justement à ce propos au cas où cela t’intéresserait de te former sous tutora il y a ceci : Mise en place d'une série d'exercices pour apprendre le JavaScript et Node.js.

    C'est en construction mais il y a déjà plusieurs exercices dans la sous-section Exercices ... Tu peux poster tes réponses pour te faire corriger...

  16. #36
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2016
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2016
    Messages : 83
    Points : 11
    Points
    11
    Par défaut
    Cool !!! Je vais essayer ça !

  17. #37
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2016
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2016
    Messages : 83
    Points : 11
    Points
    11
    Par défaut
    Et si la souris ne marche plus.... Il me reste le clavier, mais plus de roulette pour faire défiler les images. J'ai vaguement vu qu'il était possible en JS d'affecter les touches up et down...mais là je sèche

  18. #38
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    @plefever : je pense qu'il est temps de clôturer cette discussion.

    La dispersion dans les questions nuit au suivi de cette discussion, celle-ci devient ardue à suivre et il devient difficile de trouver des solutions pour ceux veulent bénéficier des réponses apportées.

  19. #39
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    Salut,

    Oui effectivement ce fil commence à devenir long comme l'autre dans lequel on avait traité plusieurs questions...

    Tu peux ouvrir un autre fil pour la question d'utiliser les flèches du clavier pour faire défiler les images...

  20. #40
    Membre à l'essai
    Homme Profil pro
    Étudiant
    Inscrit en
    Mars 2016
    Messages
    83
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2016
    Messages : 83
    Points : 11
    Points
    11
    Par défaut
    @Beginner.
    Je rouvre ce post car j'ai un sérieux problème. Je n'ai jamais tenu compte de la fin de l'url ("?"suivit d'un chiffre). Il se trouve que ce chiffre est important et que l'image diffère suivant sa valeur. Il semble qu'il n'y ai pas de logique...
    Il faudrait pouvoir récupérer chaque adresse et enregistrer l'image.
    Vois-tu une possibilité ?

+ Répondre à la discussion
Cette discussion est résolue.
Page 2 sur 3 PremièrePremière 123 DernièreDernière

Discussions similaires

  1. Générer une série de rapports
    Par chnink dans le forum iReport
    Réponses: 6
    Dernier message: 24/03/2017, 15h58
  2. Réponses: 17
    Dernier message: 03/05/2011, 12h35
  3. Générer une matrice de rotation à partir d'un axe et d'un angle
    Par IXaMaXI dans le forum Développement 2D, 3D et Jeux
    Réponses: 4
    Dernier message: 29/07/2009, 15h35
  4. Générer une page ASP.Net à partir d'un fichier XML/XSL
    Par Willthelegend dans le forum ASP.NET
    Réponses: 2
    Dernier message: 01/07/2008, 14h13
  5. Réponses: 2
    Dernier message: 27/05/2007, 23h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo