Bonjour,
Sur mon site (voir la signature), 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.

upload/41027-TerreStati.png upload/41027-PluieStati.png upload/41027-SoleilStat.png upload/41027-HorlogeSta.png upload/41027-Temperatur.png upload/41027-HumiditeSt.png upload/41027-VentStatio.png upload/41027-GraphiqueS.png

Voici l'arborescence de mon site sur mon PC :
upload/41027-Arborescen.JPG

Voici les fichiers qui constituent ma page d'accueil :
upload/41027-DossierMC.JPG

Voici le code actuel de ma page d'accueil :
<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
Modifié par PoppyGuy (27 Sep 2016 - 07:13)
Salut,

Si j'ai bien compris ce que tu cherches à faire, il faut utiliser une image map et des balises <area>. Le principe est assez simple : tu définis des zones dans ton image, et tu associes un lien à chacune des zones.

Je pense que tu devrais t'en sortir avec la description de la balise <area>. Tu n'as pas défini ton DOCTYPE ou il n'est pas visible dans le code que tu nous mets, je suppose que tu es en HTML5 (pas regardé le code en détail...).

Il te faudra d'abord créer une nouvelle image avec tes balises colorées (apparemment, tu en as déjà fait une), puis tu appliques le code de l'image map avec les balises area sur ton image.
Bonjour,
Je travail avec"Kompozer".
Le DOCTYPE, c'est la première ligne du code, je ne peux pas la sélectionner, la voici :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN "http://.w3.org/TR/html4/srtict.dtd">
Je ne sais pas à quoi ça sert ?
Les images que j'ai, je peux les déplacer, sur une ligne entourée d'un rectangle rouge (sans doute ça <div></div>).
Mais pourquoi, je ne peux pas les bouger verticalement par dessus l'image et en faire plusieurs ??
Salut,

Connais pas Kompozer...

Si je peux me permettre un conseil : savoir coder (au moins en HTML/CSS) est à peu près aussi important aujourd'hui que savoir écrire l'était à la renaissance ! Les solutions de facilité proposées par ceux qui font un maximum de profit en exploitant la paresse et la crédulité des gens ne font qu'entretenir ces mauvaises tendances et n'aident pas ceux qui s'y laissent aller.

Peut-être que quelqu'un connaissant Kompozer pourrait te donner quelques conseils, mais ce n'est pas certain que ce que tu cherches à faire soit possible : je fuis ce genre d'outil, parce qu'on ne peut rien faire de bien avec !

Je te conseillerais plutôt de faire ça "à la main", en essayant de comprendre le code et d'ajouter celui qui est indiqué dans les exemples d'utilisation de la balise <area> : ce n'est compliqué que parce que tu n'oses pas le faire, si tu veux t'y mettre tu verras que finalement c'est assez simple et logique ! Tu pourras trouver fun et intéressant de lire les tutos d'Alsacréations ou d'autres, par exemple sur Open Classrooms.

Le Web a été inventé au CERN pour que physiciens, techniciens et personnel divers puissent avoir accès facilement à la documentation, et HTML a été fait pour que n'importe qui, sans connaissances informatiques, puisse créer ces documents. Il s'est bien complété (et donc un peu complexifié) depuis, mais il reste un langage accessible à tous (contrairement à ce que veulent te faire croire les vendeurs de Kompozer et autres outils du même type).

Pour faire ça "à la main", il faut d'abord avoir une seule image, celle de ta station météo avec les boutons en couleurs. Tu peux la créer avec n'importe quel logiciel de traitement d'images, par exemple GIMP (libre et gratuit) ou Photoshop. Ensuite, dans ton code HTML en utilisant la balise <area>, tu définis des zones dans l'image qui correspondent à tes boutons, en indiquant les coordonnées de ces zones. C'est presque comme à la bataille navale !

Pour le DOCTYPE, ça définit la "norme" utilisée pour coder le document. Kompozer t'a fait ça en HTML 4.01, norme qui date du 24 décembre 1999 et qui n'apportait que quelques corrections mineures à la version 4.00 du 18 Décembre 1997 ! Tu comprends ma réticence à utiliser les générateurs automatiques comme Kompozer ! Bon, c'est le résultat qui compte et ton site est fonctionnel, mais pouvoir profiter des évolutions est parfois utile, voire nécessaire Smiley cligne