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

HTML Discussion :

Mettre des images pardessus une autre image dans mon site


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    72
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 72
    Par défaut Mettre des images pardessus une autre image dans mon site
    Bonjour,
    Sur mon site :
    http://st-florent-meteo-clopiniere.akeonet.com/
    il y a trois images représentant une station météo.
    Je souhaiterais mettre à la place des petites images grises (dans les carrés), les images cliquables de couleur qui sont en dessous.
    Et la même chose sur les images grises en ligne au bas de la station.
    Mais je ne sais pas comment faire.

    Pour l'instant, j'ai mis les petites images cliquables entre les deux images de la station dans une ligne à part.
    Je ne mis connais pas trop en informatique, mais avec un modèle et des explications, je dois pouvoir m'en sortir.

    Voici les petites images :
    Nom : Terre_Station.png
Affichages : 164
Taille : 2,0 Ko Nom : Pluie_Station.png
Affichages : 164
Taille : 1,9 Ko Nom : Soleil_Station.png
Affichages : 171
Taille : 2,1 Ko Nom : Horloge_Station.png
Affichages : 158
Taille : 2,1 Ko Nom : Temperature_Station.png
Affichages : 159
Taille : 833 octets Nom : Humidite_Station.png
Affichages : 161
Taille : 1,2 Ko Nom : Vent_Station.png
Affichages : 165
Taille : 1,5 Ko Nom : Graphique_Station.png
Affichages : 159
Taille : 1,7 Ko

    Voici l'arborescence de mon site sur mon PC :
    Nom : Arborescence PC.JPG
Affichages : 173
Taille : 13,8 Ko

    Voici les fichiers qui constituent ma page d'accueil :
    Nom : Dossier M_C.JPG
Affichages : 171
Taille : 43,8 Ko

    Voici le code actuel de ma page d'accueil :
    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
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">
    <title>Météo St Florent des Bois - La Clopinière - La Sicaudiere</title>
    <meta content="Guy" name="author">
    <script type="text/javascript">
    function affichePage()
    {
    // récupération des données : annee / mois / pages
    var annee = document.getElementById('annee').value;
    var mois = document.getElementById('mois').value
    var pages = document.getElementById('pages').value
     
    if( annee != '' && mois != '' && pages != '' )
    {
    var url = '/'+ annee + '/' + mois + '/' + pages +'.html';
    document.location.href = url; // on affiche la page
    }
    }
    </script>
    </head>
    <body
    style="color: white; background-color: rgb(0, 51, 153); width: 1450px;"
    alink="#33ff33" link="#dcd296" vlink="#dcd296">
    <h1 style="text-align: center; width: 1450px;"><span style="color: red;">M</span><span
    style="color: rgb(51, 255, 51);">é</span><span
    style="color: rgb(255, 255, 51);">t</span><span
    style="color: rgb(102, 255, 255);">é</span><span
    style="color: rgb(204, 51, 204);">o</span> "St Florent des bois"
    -&nbsp; "La Clopinière" - "La Sicaudière"</h1>
    <h2 style="text-align: center; width: 1450px;">Commune des "Rives de
    L'Yon"</h2>
    <div style="text-align: center;"><a
    href="mailto:st-florent-meteo-clopiniere@akeonet.com"><img
    style="border: 0px solid ; width: 50px; height: 39px;" alt="Messagerie"
    src="Icones/Messagerie.gif"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br>
    </div>
    <br>
    <div style="text-align: center; width: 1450px;">Relevés météo avec une
    station
    amateur "Oregon WMR200" placée à "La Clopinière"<br>
    <big><span style="color: yellow;">Il y a la possibilité de voir les
    relevés effectués depuis&nbsp; 2011
    </span></big><br>
    <span style="color: rgb(51, 255, 51);">Pressions - Températures -
    Hauteur de pluie - Vitesse de Vent - Heures de Soleil</span><br>
    <span style="color: white;"></span><br>
    <span style="color: yellow;">La date et l'heure de la station
    ci-dessous indique la dernière mise à jour</span><br
    style="color: yellow;">
    </div>
    <br>
    <div style="text-align: center; width: 1450px;">
    <!-- liste déroulante pour les années -->
    <select id="annee" name="annee" size="1" onchange="affichePage();">
    <option value="">Choisir une Année</option>
    <option value="2015">2015</option>
    <option value="2014">2014</option>
    <option value="2013">2013</option>
    <option value="2012">2012</option>
    <option value="2011">2011</option>
    </select>
    <!-- liste déroulantes pour les mois -->
    <select id="mois" name="mois" size="1" onchange="affichePage();">
    <option value="">Choisir un mois</option>
    <option value="Janvier">Janvier</option>
    <option value="Fevrier">Fevrier</option>
    <option value="Mars">Mars</option>
    <option value="Avril">Avril</option>
    <option value="Mai">Mai</option>
    <option value="Juin">Juin</option>
    <option value="Juillet">Juillet</option>
    <option value="Aout">Aout</option>
    <option value="Septembre">Septembre</option>
    <option value="Octobre">Octobre</option>
    <option value="Novembre">Novembre</option>
    <option value="Decembre">Decembre</option>
    </select>
    <!-- liste déroulante pour les pages -->
    <select id="pages" name="pages" size="1" onchange="affichePage();">
    <option value="">Choisir une page</option>
    <option value="Pluie">Pluie</option>
    <option value="Pressions">Pressions</option>
    <option value="Soleil">Soleil</option>
    <option value="Temperatures">Temperatures</option>
    <option value="Vent">Vent</option>
    </select>
    </div>
    <br>
    <div style="text-align: center; width: 1450px;"><img
    style="width: 800px; height: 200px;" alt="Septembre"
    src="Septembre.jpg"><br>
    <br>
    <div style="text-align: center;">
    <div style="font-weight: bold;"><a href="2016/Janvier/Pluie_Soleil.html"><span
    style="text-decoration: underline;"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Janvier"
    src="Icones/Bouton_Janvier.png"></span></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Fevrier/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Fevrier"
    src="Icones/Bouton_Fevrier.png"></a>&nbsp;&nbsp;&nbsp;
    <a href="2016/Mars/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Mars"
    src="Icones/Bouton_Mars.png"></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Avril/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Avril"
    src="Icones/Bouton_Avril.png"></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Mai/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Mai"
    src="Icones/Bouton_Mai.png"></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Juin/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Juin"
    src="Icones/Bouton_Juin.png"></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Juillet/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Juillet"
    src="Icones/Bouton_Juillet.png"></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Aout/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="BT_Août"
    src="Icones/Bouton_Aout.png"></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Septembre/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 90px; height: 29px;" alt="Septembre"
    src="Icones/Bouton_Septembre.png"></a><br>
    </div>
    <div style="width: 1450px;"><br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img
    style="width: 650px; height: 350px;"
    alt="Précipitations et Statistiques" src="Precipitations.jpg"><br>
    <br>
    <img src="WMR200-2.jpg" alt="Station GW"
    style="width: 791px; height: 557px;"><br>
    <h2>Ensoleillement du jour en cours</h2>
    <img style="width: 901px; height: 564px;" alt="Soleil"
    src="Ensoleillement.JPG"><br>
    <h2><br>
    </h2>
    <h2>Température - Pression - Humidité - Vent et Statistiques du jour en
    cours</h2>
    <img src="GraphWeather.jpg" alt="GW"
    style="width: 800px; height: 700px;"><br>
    <h2><br>
    </h2>
    <img style="width: 792px; height: 548px;" alt="Station mois"
    src="WMR200_Mois_Excel.png"><br>
    <div style="text-align: left;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; Cliquer
    --&gt;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; <a
    href="2016/Septembre/Pressions.html"><img
    style="border: 0px solid ; width: 30px; height: 30px;"
    alt="Icone Terre" src="Icones/Terre_Station.png"></a>
    &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <a
    href="2016/Septembre/Pluie.html"><img
    style="border: 0px solid ; width: 30px; height: 30px;"
    alt="Icone Pluie" src="Icones/Pluie_Station_Blanc.png"></a>
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a
    href="2016/Septembre/Soleil.html"><img
    style="border: 0px solid ; width: 30px; height: 29px;"
    alt="Icone Soleil" src="Icones/Soleil_Station.png"></a>&nbsp;&nbsp;
    &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<img
    style="width: 26px; height: 26px;" alt="Horloge"
    src="Icones/Horloge_Station.png">&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;<a
    href="2016/Septembre/Temperatures.html"><img
    style="border: 0px solid ; width: 13px; height: 30px;"
    alt="Icone Thermomètre" src="Icones/Temperature_Station.png"></a>&nbsp;&nbsp;
    &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; <a
    href="2016/Septembre/Humidite.html"><img
    style="border: 0px solid ; width: 19px; height: 30px;"
    alt="Icone Humidité" src="Icones/Humidite_Station.png"></a>
    &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; <a
    href="2016/Septembre/Vent.html"><img
    style="border: 0px solid ; width: 42px; height: 30px;" alt="Icone Vent"
    src="Icones/Vent_Station.png"></a>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;
    &nbsp;&nbsp; &nbsp;&nbsp; <img style="width: 21px; height: 25px;"
    alt="Graphique" src="Icones/Graphique_Station.png"><br>
    </div>
    <img style="width: 794px; height: 553px;" alt="Station Année"
    src="WMR200_Annee_Excel.png"><br>
    <br>
    <br>
    <h2>Graphique des précipitations du mois en cours</h2>
    <img style="width: 910px; height: 451px;" alt="Graphique Pluie"
    src="Pluie.png"><br>
    <br>
    <br>
    <br>
    <h2>Graphique des heures de Soleil du mois en cours</h2>
    <img src="Soleil.png" alt="Graphique Soleil"
    style="width: 910px; height: 451px;"><br>
    <br>
    <br>
    <h2>Graphique de la Vitesse du Vent du mois en cours</h2>
    <img style="width: 910px; height: 451px;" alt="Graphique Vent"
    src="Vitesse_Vent.png"><br>
    <br>
    <br>
    <br>
    <h4><big><big>Nombre de jours et d'heures
    de <span style="color: rgb(51, 204, 0);">Pluie</span>, de <span
    style="color: yellow;">Soleil</span>, et de <span
    style="color: rgb(255, 204, 153);">Vent</span> du mois en cours<br>
    </big></big></h4>
    <big><big>
    <span style="text-decoration: underline;"></span><img
    style="width: 910px; height: 554px;" alt="Mois" src="Mois.png"><br>
    </big></big>
    <big><big><br>
    </big>
    </big>
    <h4><big><big>Mini et Maxi du mois en cours<br>
    </big></big></h4>
    <big><big>
    <img style="width: 910px; height: 454px;" alt="Mini Maxi"
    src="Mini_Maxi.png"><br>
    </big></big>
    <br>
    <br>
    <br>
    <big><big>
    </big></big></div>
    </div>
    </div>
    </body>
    </html>
    Merci de votre aide
    Cordialement

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    1 solution :
    • mettre l'image principale + les icones dans un <div> en position:relative; ;
    • positionner sur l'image chaque icone avec position:absolute; top:....px; left:....px; ;



    Pour BIEN faire, il est préférable de :
    • mettre TOUT les styles CSS dans un fichier externe, OU dans la partie <head>, entre balises <style>
    • ajouter des id (unique) et/ou des class (multiples) sur les éléments HTML


    Si on suppose que toutes les grandes images sont les mêmes* (et donc que les icônes seront placées exactement aux mêmes positions)
    • on met une class "Bloc-Stats" sur le <div> englobant chaque série "grande image + icones associées"
    • chaque icone a une classe générique "ico" (pour les styles communs), et une class spécifique : "ico-Terre", "ico-Pluie", "ico-Soleil",... (class, car il peut y avoir plusieurs séries d'icone sur la page)
    • on positionne chaque icone à la place voulue par top:...px; left:...px; (coordonnées relatives au coin haut gauche de la grande image)


    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div class="Bloc-Stats">
    	<img id="Station-Mois-image" alt="Station mois" src="WMR200_Mois_Excel.png">
     
    	<a href="2016/Septembre/Pressions.html"><img class="ico ico-Terre" alt="Icone Terre" src="Icones/Terre_Station.png"></a>
    	<a href="2016/Septembre/Pluie.html"><img class="ico ico-Pluie" alt="Icone Pluie" src="Icones/Pluie_Station_Blanc.png"></a>
    	<a href="2016/Septembre/Soleil.html"><img class="ico ico-Soleil" alt="Icone Soleil" src="Icones/Soleil_Station.png"></a>
    	<img class="ico ico-Horloge" alt="Horloge" src="Icones/Horloge_Station.png">
    	<a href="2016/Septembre/Temperatures.html"><img class="ico ico-Thermometre" alt="Icone Thermomètre" src="Icones/Temperature_Station.png"></a>
    	<a href="2016/Septembre/Humidite.html"><img class="ico ico-Humidite" alt="Icone Humidité" src="Icones/Humidite_Station.png"></a>
    	<a href="2016/Septembre/Vent.html"><img class="ico ico-Vent" alt="Icone Vent" src="Icones/Vent_Station.png"></a>
    	<img class="ico ico-Graphique" alt="Graphique" src="Icones/Graphique_Station.png">
     
    </div>
    CSS dans la partie <head>, entre balises <style>...</style> :
    Code css : 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
    .Bloc-Stats {
      position: relative;
      display: inline-block;
    }
     
    /* la grande image */
    .Bloc-Stats #Station-Mois-image {
      position: relative;
      display: block;
      border: 0;
      width: 792px;
      height: 548px;
    }
    /* icones */
    .Bloc-Stats img.ico {
      position: absolute;
      display: block;
      border: 0;
      width: 30px;
      height: 30px;
    }
     
    .Bloc-Stats img.ico-Terre {
      top: 94px;
      left: 90px;
    }
     
    .Bloc-Stats img.ico-Pluie {
      top: 210px;
      left: 90px;
    }
     
    .Bloc-Stats img.ico-Soleil {
      top: 328px;
      left: 90px;
    }
     
    /* ... (et ainsi de suite) ... */

    * sinon, il faut identifier chaque bloc, et positionner chaque icone sur chaque image.
    Dernière modification par Invité ; 27/09/2016 à 08h31.

  3. #3
    Membre confirmé Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    72
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 72
    Par défaut
    Bonjour,
    Merci de ta réponse rapide, je regarde ça dans la journée (avec mes connaissances, ça risque d'être un peu long), et te tiens au courant.

    Les 3 images de la station sont de la même taille, mais viennent de dossier différents.
    1) La 1ère "WMR200-2.jpg" vient du dossier "F:/GraphWeather/Stylesheets/Wmr200"
    2) La 2ème "WMR200_Mois_Excel.png" vient du dossier" Meteo_Clopiniere"
    3) La 3ème "WMR200_Année_Excel.png" vient du dossier "Meteo_Clopiniere"

    L'éditeur de mon site est "Kompozer"

    Cordialement

  4. #4
    Membre confirmé Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    72
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 72
    Par défaut
    Bonsoir,
    1) J'ai Choisi une nouvelle feuille.
    2) J'ai copier le code
    3) J'ai inséré le css
    4) J'ai réussi à déplacer une image dans un carré.
    5) J'ai changé le nom de la 2ème grande image (c'est bon)

    Mais....
    1) Mes 2 grandes images sont placées complètement à gauche, je ne sais pas comment les bouger, elles ont l'air d'être centrées (d'après l'icône centré), mais elles ne le sont pas.
    2) J'ai un texte qui apparaît sur la page avant les boutons : style="text-decoration: underline;">

  5. #5
    Invité
    Invité(e)
    Par défaut
    Bonjour,

    Le code (CSS+ HTML) ?
    Une page en ligne ?

    Remarque : les codes que j'ai donné fonctionnent tel quel.
    Il suffisait de les copier-coller, et de compléter les coordonnées des autres icones.
    Dernière modification par Invité ; 28/09/2016 à 07h18.

  6. #6
    Membre confirmé Avatar de PoppyGuy
    Homme Profil pro
    Retraité
    Inscrit en
    Novembre 2011
    Messages
    72
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vendée (Pays de la Loire)

    Informations professionnelles :
    Activité : Retraité
    Secteur : Bâtiment

    Informations forums :
    Inscription : Novembre 2011
    Messages : 72
    Par défaut
    Bonjour,
    C'est ce que j'ai fait, j'ai juste ajouté une icône dans css, et je l'ai déplacé.
    Voici le code de la page:
    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
    <html>
    <head>
    <meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">
    <title>Essais Guy</title>
    <style>
    .Bloc-Stats {
    position: relative;
    display: inline-block;
    }
     
    /* la grande image */
    .Bloc-Stats #Station-Mois-image {
    position: relative;
    display: block;
    border: 0;
    width: 792px;
    height: 548px;
    }
    /* icones */
    .Bloc-Stats img.ico {
    position: absolute;
    display: block;
    border: 0;
    width: 30px;
    height: 30px;
    }
     
    .Bloc-Stats img.ico-Terre {
    top: 94px;
    left: 90px;
    }
     
    .Bloc-Stats img.ico-Pluie {
    top: 210px;
    left: 90px;
    }
     
    .Bloc-Stats img.ico-Soleil {
    top: 328px;
    left: 90px;
    }
     
    .Bloc-Stats img.ico-Graphique {
    top: 298px;
    right: 905px;
     
    }
    /* ... (et ainsi de suite) ... */
    </style>
    <meta content="text/html; charset=ISO-8859-1"
    http-equiv="content-type">
    <meta content="Guy" name="author">
    </head>
    <body style="color: white; background-color: rgb(0, 51, 153);"
    alink="#33cc00" link="yellow" vlink="#ff0000">
    <br>
    <br>
    <script type="text/javascript">
    function affichePage()
    {
    // récupération des données : annee / mois / pages
    var annee = document.getElementById('annee').value;
    var mois = document.getElementById('mois').value
    var pages = document.getElementById('pages').value
     
    if( annee != '' && mois != '' && pages != '' )
    {
    var url = '/'+ annee + '/' + mois + '/' + pages +'.html';
    document.location.href = url; // on affiche la page
    }
    }
    </script>
    <h1 style="text-align: center; width: 1450px;"><span style="color: red;">M</span><span
    style="color: rgb(51, 255, 51);">é</span><span
    style="color: rgb(255, 255, 51);">t</span><span
    style="color: rgb(102, 255, 255);">é</span><span
    style="color: rgb(204, 51, 204);">o</span> "St Florent des bois"
    -&nbsp; "La Clopinière" - "La Sicaudière"</h1>
    <h2 style="text-align: center; width: 1450px;">Commune des "Rives de
    L'Yon"</h2>
    <div style="text-align: center; width: 1450px;"><a
    href="mailto:st-florent-meteo-clopiniere@akeonet.com"><img
    style="border: 0px solid ; width: 50px; height: 39px;" alt="Messagerie"
    src="Icones/Messagerie.gif"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br>
    </div>
    <br>
    <div style="text-align: center; width: 1450px;">Relevés météo avec une
    station
    amateur "Oregon WMR200" placée à "La Clopinière"<br>
    <big><span style="color: yellow;">Il y a la possibilité de voir les
    relevés effectués depuis&nbsp; 2011
    </span></big><br>
    <span style="color: rgb(51, 255, 51);">Pressions - Températures -
    Hauteur de pluie - Vitesse de Vent - Heures de Soleil</span><br>
    <span style="color: white;"></span><br>
    <span style="color: yellow;">La date et l'heure de la station
    ci-dessous indique la dernière mise à jour</span><br
    style="color: yellow;">
    </div>
    <br>
    <div style="text-align: center; width: 1450px;">
    <!-- liste déroulante pour les années -->
    <select id="annee" name="annee" size="1" onchange="affichePage();">
    <option value="">Choisir une Année</option>
    <option value="2015">2015</option>
    <option value="2014">2014</option>
    <option value="2013">2013</option>
    <option value="2012">2012</option>
    <option value="2011">2011</option>
    </select>
    <!-- liste déroulantes pour les mois -->
    <select id="mois" name="mois" size="1" onchange="affichePage();">
    <option value="">Choisir un mois</option>
    <option value="Janvier">Janvier</option>
    <option value="Fevrier">Fevrier</option>
    <option value="Mars">Mars</option>
    <option value="Avril">Avril</option>
    <option value="Mai">Mai</option>
    <option value="Juin">Juin</option>
    <option value="Juillet">Juillet</option>
    <option value="Aout">Aout</option>
    <option value="Septembre">Septembre</option>
    <option value="Octobre">Octobre</option>
    <option value="Novembre">Novembre</option>
    <option value="Decembre">Decembre</option>
    </select>
    <!-- liste déroulante pour les pages -->
    <select id="pages" name="pages" size="1" onchange="affichePage();">
    <option value="">Choisir une page</option>
    <option value="Pluie">Pluie</option>
    <option value="Pressions">Pressions</option>
    <option value="Soleil">Soleil</option>
    <option value="Temperatures">Temperatures</option>
    <option value="Vent">Vent</option>
    </select>
    </div>
    <br>
    <div style="text-align: center; width: 1450px;"><img
    style="width: 800px; height: 200px;" alt="Septembre"
    src="Septembre.jpg"><br>
    <br>
    <div style="text-align: center;">
    <div style="font-weight: bold;">
    <div style="text-align: right;"><a href="2016/Janvier/Pluie_Soleil.html"><span>
    <div class="Bloc-Stats"> <img id="Station-Mois-image"
    alt="Station mois" src="WMR200_Mois_Excel.png"> <a
    href="2016/Septembre/Pressions.html"><img class="ico ico-Terre"
    alt="Icone Terre" src="Icones/Terre_Station.png"></a> <a
    href="2016/Septembre/Pluie.html"><img class="ico ico-Pluie"
    alt="Icone Pluie" src="Icones/Pluie_Station_Blanc.png"></a> <a
    href="2016/Septembre/Soleil.html"><img class="ico ico-Soleil"
    alt="Icone Soleil" src="Icones/Soleil_Station.png"></a> <img
    class="ico ico-Horloge" alt="Horloge" src="Icones/Horloge_Station.png"><a
    href="2016/Septembre/Temperatures.html"><img
    class="ico ico-Thermometre" alt="Icone Thermomètre"
    src="Icones/Temperature_Station.png"></a> <a
    href="2016/Septembre/Humidite.html"><img class="ico ico-Humidite"
    alt="Icone Humidité" src="Icones/Humidite_Station.png"></a> <a
    href="2016/Septembre/Vent.html"><img class="ico ico-Vent"
    alt="Icone Vent" src="Icones/Vent_Station.png"></a> <img
    style="border: 0px solid ; width: 24px; height: 29px;"
    src="Icones/Graphique_Station.png" alt="Graphique"
    class="ico ico-Graphique"> </div>
    </span></a></div>
    <br>
    <br>
    <a href="2016/Janvier/Pluie_Soleil.html"><span>style="text-decoration:
    underline;"&gt;<img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Janvier"
    src="Icones/Bouton_Janvier.png"></span></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Fevrier/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Fevrier"
    src="Icones/Bouton_Fevrier.png"></a>&nbsp;&nbsp;&nbsp;
    <a href="2016/Mars/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Mars"
    src="Icones/Bouton_Mars.png"></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Avril/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Avril"
    src="Icones/Bouton_Avril.png"></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Mai/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Mai"
    src="Icones/Bouton_Mai.png"></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Juin/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Juin"
    src="Icones/Bouton_Juin.png"></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Juillet/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="Bt_Juillet"
    src="Icones/Bouton_Juillet.png"></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Aout/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 71px; height: 29px;" alt="BT_Août"
    src="Icones/Bouton_Aout.png"></a>&nbsp;&nbsp;&nbsp; <a
    href="2016/Septembre/Pluie_Soleil.html"><img
    style="border: 0px solid ; width: 90px; height: 29px;" alt="Septembre"
    src="Icones/Bouton_Septembre.png"></a><br>
    <br>
    </div>
    <div style="text-align: left;" class="Bloc-Stats"> <img
    id="Station-Mois-image" alt="Station mois" src="WMR200_Annee_Excel.png">
    <a href="2016/Septembre/Pressions.html"><img class="ico ico-Terre"
    alt="Icone Terre" src="Icones/Terre_Station.png"></a> <a
    href="2016/Septembre/Pluie.html"><img class="ico ico-Pluie"
    alt="Icone Pluie" src="Icones/Pluie_Station_Blanc.png"></a> <a
    href="2016/Septembre/Soleil.html"><img class="ico ico-Soleil"
    alt="Icone Soleil" src="Icones/Soleil_Station.png"></a> <img
    class="ico ico-Horloge" alt="Horloge" src="Icones/Horloge_Station.png"><a
    href="2016/Septembre/Temperatures.html"><img
    class="ico ico-Thermometre" alt="Icone Thermomètre"
    src="Icones/Temperature_Station.png"></a> <a
    href="2016/Septembre/Humidite.html"><img class="ico ico-Humidite"
    alt="Icone Humidité" src="Icones/Humidite_Station.png"></a> <a
    href="2016/Septembre/Vent.html"><img class="ico ico-Vent"
    alt="Icone Vent" src="Icones/Vent_Station.png"></a> <img
    class="ico ico-Graphique" alt="Graphique"
    src="Icones/Graphique_Station.png"> </div>
    </div>
    </div>
    </body>
    </html>
    Le problème, c'est que je n'ai pas la même chose entre la page dans mon éditeur et la page quand je clic dans l'explorateur sur le fichier.

    1) Quand j'ouvre avec "Kompozer", mes images sont à gauches.
    2) Quand je clic dans l'explorateur sur le fichier "Devoppez.html" les images sont à gauche

    Ouuppsss !!!, je viens de m'apercevoir que si je clic sur les petites images couleurs, j'ai bien la liaison avec les tableaux.
    Si je mets juste tes codes, ça fonctionne sauf que la station, n'est pas au milieu de la page

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. remplacer une image par une autre image
    Par artichaudd dans le forum Langage
    Réponses: 10
    Dernier message: 22/12/2010, 15h00
  2. [Liens] Image vers une autre image
    Par Arn°oO dans le forum Flash
    Réponses: 3
    Dernier message: 26/02/2008, 09h30
  3. Comment savoir si une image touche à une autre image ?
    Par Daniel_P dans le forum VB 6 et antérieur
    Réponses: 79
    Dernier message: 30/11/2007, 18h48
  4. Réponses: 3
    Dernier message: 06/02/2007, 11h04
  5. Mettre une image sur une autre image et tableau
    Par Michaël dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 19/06/2005, 18h31

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