infobulles sur des cases différentes [Résolu]

infobulles sur des cases différentes [Résolu] - HTML/CSS - Programmation

Marsh Posté le 18-01-2018 à 12:23:16    

Bonjour,  
J'ai une image dans un fichier "Pluie.html".  
Voir sur le site :  
http://www.meteo-clopiniere-sicaudiere.fr  
1) Cliquer sur le bouton "Janvier"  
2) Cliquer en haut sur l'icône "Nuage-pluie"  
 

Code :
  1. <html>
  2. <head>
  3. <meta content="text/html; charset=ISO-8859-1"
  4. http-equiv="content-type">
  5. <title>Pluie</title>
  6. </head>
  7. <body style="background-color: rgb(30, 70, 130); color: rgb(0, 0, 0);"
  8. alink="#ee0000" link="#0000ee" vlink="#551a8b">
  9. <div style="text-align: center;">
  10. <!--Températures-->
  11. <a href="Tableau_Temperatures.html"><span
  12. style="color: white;"><img
  13. style="border: 0px solid ; width: 54px; height: 54px;" alt="Icone Vent"
  14. src="../../Icones/Thermometre.png"></span></a>&nbsp;&nbsp;&nbsp;
  15. <!--Vent-->
  16. <a href="Tableau_Vent.html"><img
  17. style="border: 0px solid ; width: 70px; height: 42px;" alt="Icone Vent"
  18. src="../../Icones/Vent.png"></a>&nbsp;&nbsp; &nbsp;
  19. <!--Humidité-->
  20. <a href="Tableau_Humidite.html"><img
  21. style="border: 0px solid ; width: 32px; height: 50px;" alt="Goutte"
  22. src="../../Icones/Humidite.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  23. <!--Soleil-->
  24. <a href="Tableau_Soleil.html"><img src="../../Icones/Soleil.png"
  25. alt="Icone Soleil"
  26. style="border: 0px solid ; width: 54px; height: 54px;"></a>&nbsp;
  27. &nbsp;&nbsp;
  28. <!--Pression--> <a href="Tableau_Pressions.html"><img
  29. style="border: 0px solid ; width: 54px; height: 54px;"
  30. alt="Icone Pression" src="../../Icones/Pression.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  31. <!--Accueil-->
  32. <a href="../../index.html"><span style="text-decoration: underline;"><img
  33. style="border: 0px solid ; width: 54px; height: 54px;"
  34. alt="Icone accueil" src="../../Icones/Accueil.png"></span></a><br>
  35. <img style="width: 737px; height: 1641px; color: white;"
  36. alt="Tableau Pluie" src="Tableau_Pluie.jpg">&nbsp;<br>
  37. </div>
  38. </body>
  39. </html>


 
Dans les cases ou il y a en haut à droite un petit triangle rouge (sur EXCEL, il y a un commentaire).  
comme je ne peux pas le faire apparaître sur le site (sinon cela cacherait les autres cases)  
 
Ma question est donc:  
Est-il possible de faire apparaître en survol au-dessus de chaque case un commentaire que je mettrais dans une infobulle ?  
 
Merci de votre aide  
Cordialement


Message édité par guy7285 le 22-01-2018 à 18:27:30

---------------
http://www.meteo-clopiniere-sicaudiere.fr
Reply

Marsh Posté le 18-01-2018 à 12:23:16   

Reply

Marsh Posté le 18-01-2018 à 16:29:46    

Je ne sais pas si c'est toujours d'actualité dans le HTML 5 (bien que supporté) mais vu le site présenté je pense qu'on peut se permettre.

 

Il existe la balise map en HTML : https://www.w3schools.com/tags/tag_map.asp
Un petit coup de JS et CSS en plus :

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5.     div.bubble {
  6.         height: 18px;
  7.         line-height: 18px;
  8.         padding: 0px 4px 4px 4px;
  9.         position: absolute;
  10.         top: 0px;
  11.         left: 0px;
  12.         background-color: #FFFFAA;
  13.         border-style: solid;
  14.         border-width: 1px 1px 1px 1px;
  15.         border-color: #000000;
  16.     }
  17. </style>
  18. <script type="text/javascript">
  19.     function bubblein(el) {
  20.         var div = document.createElement('div');
  21.         div.setAttribute('class', 'bubble');
  22.         div.setAttribute('id', el.id + '_bubble');
  23.         var txt = document.createTextNode(el.dataset.descr);
  24.         div.appendChild(txt);
  25.         document.body.appendChild(div);
  26.     }
  27.     function bubbleout(el) {
  28.         document.body.removeChild(document.getElementById(el.id + '_bubble'));
  29.     }
  30.     function bubblepos(posi) {
  31.         var el = document.getElementsByClassName('bubble')[0];
  32.         var posX = posi.clientX + 10;
  33.         var posY = posi.clientY - 10;
  34.         el.style.top = posY +"px";
  35.         el.style.left = posX +"px";
  36.     }
  37. </script>
  38. </head>
  39. <body>
  41. <p>Click on the sun or on one of the planets to watch it closer:</p>
  43. <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
  45. <map name="planetmap" onMousemove="bubblepos(event)">
  46.   <area shape="rect" coords="0,0,82,126" data-descr="sun" id="sun" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  47.   <area shape="circle" coords="90,58,3" data-descr="mercury" id="mercury" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  48.   <area shape="circle" coords="124,58,8" data-descr="venus" id="venus" onMouseover="bubblein(this)" onMouseout="bubbleout(this)">
  49. </map>
  51. </body>
  52. </html>
 

Exemple à tester dans le Try It Yourself du lien pour la balise map : https://www.w3schools.com/tags/tryi [...] ml_areamap

 

C'est juste un exemple, il y a surement moyen de faire mieux en JS.

Message cité 1 fois
Message édité par MaybeEijOrNot le 18-01-2018 à 16:33:04

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 20-01-2018 à 18:20:11    

Bonjour,
Je vais expliquer en plus simple, pour moi, c'est tellement compliqué, que je ne sais pas comment m'expliquer  :??:  
 
Voici mon image principale:
https://www.aht.li/3171324/Tableau_Pluie.jpg
Voici l'image pour l'infobulle)
https://www.aht.li/3171977/info.png
Voici mon code simplifié:

Code :
  1. <html>
  2. <head>
  3. <meta content="text/html; charset=ISO-8859-1"
  4. http-equiv="content-type">
  5. <title>Pluie</title>
  6. <style></style>
  7. </head>
  8. <body style="background-color: rgb(30, 70, 130); color: rgb(0, 0, 0);"
  9. alink="#ee0000" link="#0000ee" vlink="#551a8b">
  10. <div style="text-align: center;">&nbsp; <img
  11. style="width: 734px; height: 1612px; color: white;"
  12. alt="Tableau Pressions" src="Tableau_Pluie.jpg"><br>
  13. </div>
  14. <br>
  15. <br>
  16. </body>
  17. </html>


Est-il possible d'avoir, l'image (info.png) dans l'angle haut droit de chaque case et avoir une info en passant dessus (ou en cliquant) avec la souris
Au moins 2 ou 3 modèles (sans modèle, je ne serais pas capable de le faire.

Reply

Marsh Posté le 20-01-2018 à 18:56:42    

Cf. ma réponse ? https://forum.hardware.fr/hfr/Progr [...] m#t2310110


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 20-01-2018 à 19:00:02    

J'ai essayé, mais je ne vois qu'un carré

Reply

Marsh Posté le 20-01-2018 à 19:20:12    

Tu as fait quoi ?


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 20-01-2018 à 19:32:47    

J'ai copier le code dans une nouvelle page et sur mon site, j'ai ça:
http://meteo-clopiniere-sicaudiere [...] Pluie.html
 
Click on the sun or on one of the planets to watch it closer:
 
Planets

Reply

Marsh Posté le 20-01-2018 à 19:37:36    

MaybeEijOrNot a écrit :

Exemple à tester dans le Try It Yourself du lien pour la balise map : https://www.w3schools.com/tags/tryi [...] ml_areamap

 

C'est juste un exemple, il y a surement moyen de faire mieux en JS.

 

Mais de toute façon ce n'est qu'un exemple, tu as compris le fonctionnement de la balise map ?


Message édité par MaybeEijOrNot le 20-01-2018 à 19:38:09

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 20-01-2018 à 20:27:03    

Voici ce que je souhaiterais (voir image ci-dessous)
https://www.aht.li/3172184/info_bulle.jpg
Une information quand je survol chaque case
1) Cela peut-être sans image  
ou
2) En survolant les images (?)


Message édité par guy7285 le 21-01-2018 à 09:45:22
Reply

Marsh Posté le 21-01-2018 à 14:55:57    

Je suis dans un jour de grande bonté (jour du Seigneur ?) alors voilà un code quasi-complet, bon pour l'ajout d'une image j'ai un peu la flemme mais c'est faisable :

 
Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>Page d'essai</title>
  6.    <style type="text/css">
  7.       div.bubble {
  8.          height: 18px;
  9.          line-height: 18px;
  10.          padding: 0px 4px 4px 4px;
  11.          position: absolute;
  12.          top: 0px;
  13.          left: 0px;
  14.          background-color: #FFFFAA;
  15.          border-style: solid;
  16.          border-width: 1px 1px 1px 1px;
  17.          border-color: #000000;
  18.       }
  19.    </style>
  20.    <script type="text/javascript">
  21.       function coords() { //cette fonction définit les coordonnées des cellules à annoter ainsi que le dontenu de leur annotation
  22.          var datas = { //on définit le texte à afficher pour chaque cellule
  23.             'cell_R01C03': 'test1',
  24.             'cell_R01C04': 'test2',
  25.             'cell_R01C05': 'test3'
  26.          };
  27.          var areas = document.getElementsByTagName('area'); //on récupère toutes les cellules annotées
  28.          var width = 90; //largeur d'une cellule
  29.          var height = 36; //hauteur d'une cellule
  30.          var paddingX = 7; //écart horizontal entre deux cellules
  31.          var paddingY = 7; //écart vertical entre deux cellules
  32.          for (var el of areas) { //pour chaque cellule
  33.             var elid = el.id; //on récupère son id qui contient ses coordonnées sous la forme Ligne puis Colonne
  34.             el.setAttribute('data-descr', datas[elid]); //on ajoute le texte à afficher en faisant la correspondance entre le tableau de données et l'id de la cellule
  35.             var regex = /\d+/g; //expression régulière pour extraire les nombres contenus dans l'id de notre cellule
  36.             var arr = elid.match(regex); //on parse l'id selon notre expression régulière
  37.             if (arr.length > 1) { //si deux nombres sont bien trouvés (i.e. les coordonnées) car sait-on jamais peut-être que la personne n'est pas capable d'écrire correctement l'id dans le DOM HTML...
  38.                var row = parseInt(arr[0], 10); //on convertit la chaîne de caractères correspondants au numéro de ligne en type entier naturel
  39.                var col = parseInt(arr[1], 10); //on convertit la chaîne de caractères correspondants au numéro de colonne en type entier naturel
  40.                var offsetX = 146; //on définit le décélage horizontale de la première cellule par rapport à gauche de l'image
  41.                if (row < 8) { //on définit les décalages verticaux entre les semaines par rapport au haut de l'image, ici S1
  42.                   var offsetY = 152;
  43.                } else if (row < 15) { //ici S2
  44.                   var offsetY = 181;
  45.                } else if (row < 22) { //ici S3
  46.                   var offsetY = 210;
  47.                } else if (row < 29) { //ici S4
  48.                   var offsetY = 239;
  49.                } else if (row < 32) { //ici S5, pas envie de gérer les cas avec des mois contenant moins de 31 jours mais ça ne devrait pas poser de problème si le document est écrit correctement...
  50.                   var offsetY = 268;
  51.                } else { //sait-on jamais que la personne n'est pas capable d'écrire correctement l'id dans le DOM HTML ou ne sait pas qu'il ne peut y avoir plus de 31 jours dans un mois...
  52.                   return null;
  53.                }
  54.                var x0 = offsetX + (col - 1) * (width + paddingX); //coordonnées horizontales du coin supérieur gauche de la cellule
  55.                var x1 = x0 + width; //coordonnées horizontales du coin inférieur droit de la cellule
  56.                var y0 = offsetY + (row - 1) * (height + paddingY); //coordonnées varticales du coin supérieur gauche de la cellule
  57.                var y1 = y0 + height; //coordonnées varticales du coin inférieur droit de la cellule
  58.                el.setAttribute("coords", x0 + "," + y0 + "," + x1 + "," + y1); //zou on ajoute les coordonnées à la cellule
  59.             }
  60.          }
  61.       }
  62.       function bubblein(el) { //cette fonction crée une bulle d'annotation avec son annotation à partir de l'élément déclenchant l'évènement (i.e. "mouseOver" )
  63.          var div = document.createElement('div'); //création d'une div pour contenir l'annotation
  64.          div.setAttribute('class', 'bubble'); //on lui ajoute la classe CSS "bubble"
  65.          div.setAttribute('id', el.id + '_bubble'); //on lui ajoute une id pour pouvoir y accèder
  66.          var txt = document.createTextNode(el.dataset.descr); //on récupère le texte d'annotation à partir de l'attribut "data-set" de l'élément déclenchant l'évènement
  67.          div.appendChild(txt); //on ajoute le texte d'annotation à la div
  68.          document.body.appendChild(div); //on ajoute la div au document
  69.       }
  70.       function bubbleout(el) { //cette fonction supprime la bulle d'annotation créée lorsque la souris ne survole plus la cellule en question
  71.          document.body.removeChild(document.getElementById(el.id + '_bubble')); //on retire la div du document grâce à son id préalablement définie dans la fonction "bubblein()"
  72.       }
  73.       function bubblepos(posi) { //cette fonction gère la position de la bulle d'annotation
  74.          var el = document.getElementsByClassName('bubble')[0]; //on récupère toutes les bulles d'annotation et on ne garde que la première (normalement il n'y en a qu'une simultanément...)
  75.          var posX = posi.clientX + 10 + window.scrollX; //on calcule la position horizontale de la bulle au niveau du curseur de la souris + un décalage de 10px vers la droite + l'éventuel décalage causé par le scroll du document
  76.          var posY = posi.clientY - 10 + window.scrollY; //on calcule la position verticale de la bulle au niveau du curseur de la souris - un décalage de 10px vers le haut + l'éventuel décalage causé par le scroll du document
  77.          el.style.left = posX +"px"; //on modifie la position horizontale en conséquence
  78.          el.style.top = posY +"px"; //on modifie la position verticale en conséquence
  79.       }
  80.    </script>
  81. </head>
  82. <body onLoad="coords()">
  83.    <p>Autres éléments de la page.</p>
  84.    <img src="http://meteo-clopiniere-sicaudiere.fr/2018/Janvier/Tableau_Pluie.jpg" alt="Pluviométrie" usemap="#pluviomap">
  85.    <map name="pluviomap" onMousemove="bubblepos(event)">
  86.       <area shape="rect" coords="0,0,0,0" id="cell_R01C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  87.       <area shape="rect" coords="0,0,0,0" id="cell_R01C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  88.       <area shape="rect" coords="0,0,0,0" id="cell_R01C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  89.    </map>
  90.    <p>Autres éléments de la page.</p>
  91. </body>
  92. </html>
 

Donc suffit juste d'ajouter dans le HTML les area avec l'id correspondant aux coordonnées des cellules en fonction de leur ligne et leur colonne, ainsi que le contenu des annotations à ajouter dans la partie Javascript, toujours en fonction des coordonnées (Ligne, Colonne) de la cellule en question.
Je ne vois pas de solution plus simple, bien qu'on puisse se passer de la map et faire tout le découpage en JS ce serait bien plus galère.
Si je devais ajouter une image alors je calculerai toujours sa position en fonction des cellules (area) déjà créées.


Message édité par MaybeEijOrNot le 21-01-2018 à 14:57:08

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 21-01-2018 à 14:55:57   

Reply

Marsh Posté le 21-01-2018 à 17:55:08    

Ouah !!! Merci, c'est TOP. :jap:  
 
C'est tout à fait ça, je suis désolé de peut-être avoir un peu gâché ton dimanche.   :(  
 
Maintenant, il j'ai un modèle, il faut que j'arrive à ajouter au moins un "test4" à la case suivante et un "test5" à la case sous le "test1"....????
J'avoue que ça me plaît beaucoup d’essayer, (et d'y arriver).
J'espère que tu veux bien que je pourrais te déranger (un peu, surtout au début).  ;)
 
Une fois les tests 4 et 5 réussis, ça devrait aller.
 
Encore merci

Reply

Marsh Posté le 21-01-2018 à 20:01:43    

Et si tu veux ajouter des sauts de ligne il vaut mieux utiliser cela :
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>Page d'essai</title>
  6.    <style type="text/css">
  7.       div.bubble {
  8.          padding: 0px 4px 4px 4px;
  9.          position: absolute;
  10.          top: 0px;
  11.          left: 0px;
  12.          background-color: #FFFFAA;
  13.          border-style: solid;
  14.          border-width: 1px 1px 1px 1px;
  15.          border-color: #000000;
  16.       }
  17.    </style>
  18.    <script type="text/javascript">
  19.       function coords() { //cette fonction définit les coordonnées des cellules à annoter ainsi que le dontenu de leur annotation
  20.          var datas = { //on définit le texte à afficher pour chaque cellule
  21.             'cell_R01C03': 'test1 <br>saut de ligne',
  22.             'cell_R01C04': 'test2',
  23.             'cell_R01C05': 'test3'
  24.          };
  25.          var areas = document.getElementsByTagName('area'); //on récupère toutes les cellules annotées
  26.          var width = 90; //largeur d'une cellule
  27.          var height = 36; //hauteur d'une cellule
  28.          var paddingX = 7; //écart horizontal entre deux cellules
  29.          var paddingY = 7; //écart vertical entre deux cellules
  30.          for (var el of areas) { //pour chaque cellule
  31.             var elid = el.id; //on récupère son id qui contient ses coordonnées sous la forme Ligne puis Colonne
  32.             el.setAttribute('data-descr', datas[elid]); //on ajoute le texte à afficher en faisant la correspondance entre le tableau de données et l'id de la cellule
  33.             var regex = /\d+/g; //expression régulière pour extraire les nombres contenus dans l'id de notre cellule
  34.             var arr = elid.match(regex); //on parse l'id selon notre expression régulière
  35.             if (arr.length > 1) { //si deux nombres sont bien trouvés (i.e. les coordonnées) car sait-on jamais peut-être que la personne n'est pas capable d'écrire correctement l'id dans le DOM HTML...
  36.                var row = parseInt(arr[0], 10); //on convertit la chaîne de caractères correspondants au numéro de ligne en type entier naturel
  37.                var col = parseInt(arr[1], 10); //on convertit la chaîne de caractères correspondants au numéro de colonne en type entier naturel
  38.                var offsetX = 146; //on définit le décélage horizontale de la première cellule par rapport à gauche de l'image
  39.                if (row < 8) { //on définit les décalages verticaux entre les semaines par rapport au haut de l'image, ici S1
  40.                   var offsetY = 152;
  41.                } else if (row < 15) { //ici S2
  42.                   var offsetY = 152 + 29;
  43.                } else if (row < 22) { //ici S3
  44.                   var offsetY = 152 + 29 * 2;
  45.                } else if (row < 29) { //ici S4
  46.                   var offsetY = 152 + 29 * 3;
  47.                } else if (row < 32) { //ici S5, pas envie de gérer les cas avec des mois contenant moins de 31 jours mais ça ne devrait pas poser de problème si le document est écrit correctement...
  48.                   var offsetY = 152 + 29 * 4;
  49.                } else { //sait-on jamais que la personne n'est pas capable d'écrire correctement l'id dans le DOM HTML ou ne sait pas qu'il ne peut y avoir plus de 31 jours dans un mois...
  50.                   return null;
  51.                }
  52.                var x0 = offsetX + (col - 1) * (width + paddingX); //coordonnées horizontales du coin supérieur gauche de la cellule
  53.                var x1 = x0 + width; //coordonnées horizontales du coin inférieur droit de la cellule
  54.                var y0 = offsetY + (row - 1) * (height + paddingY); //coordonnées varticales du coin supérieur gauche de la cellule
  55.                var y1 = y0 + height; //coordonnées varticales du coin inférieur droit de la cellule
  56.                el.setAttribute("coords", x0 + "," + y0 + "," + x1 + "," + y1); //zou on ajoute les coordonnées à la cellule
  57.             }
  58.          }
  59.       }
  60.       function bubblein(el) { //cette fonction crée une bulle d'annotation avec son annotation à partir de l'élément déclenchant l'évènement (i.e. "mouseOver" )
  61.          var div = document.createElement('div'); //création d'une div pour contenir l'annotation
  62.          div.setAttribute('class', 'bubble'); //on lui ajoute la classe CSS "bubble"
  63.          div.setAttribute('id', el.id + '_bubble'); //on lui ajoute une id pour pouvoir y accèder
  64.          var txt = el.dataset.descr; //on récupère le texte d'annotation à partir de l'attribut "data-set" de l'élément déclenchant l'évènement
  65.          div.innerHTML = txt; //on ajoute le texte d'annotation à la div
  66.          document.body.appendChild(div); //on ajoute la div au document
  67.       }
  68.       function bubbleout(el) { //cette fonction supprime la bulle d'annotation créée lorsque la souris ne survole plus la cellule en question
  69.          document.body.removeChild(document.getElementById(el.id + '_bubble')); //on retire la div du document grâce à son id préalablement définie dans la fonction "bubblein()"
  70.       }
  71.       function bubblepos(posi) { //cette fonction gère la position de la bulle d'annotation
  72.          var el = document.getElementsByClassName('bubble')[0]; //on récupère toutes les bulles d'annotation et on ne garde que la première (normalement il n'y en a qu'une simultanément...)
  73.          var posX = posi.clientX + 8 + window.scrollX; //on calcule la position horizontale de la bulle au niveau du curseur de la souris + un décalage de 8px vers la droite + l'éventuel décalage causé par le scroll du document
  74.          var posY = posi.clientY - el.offsetHeight + window.scrollY; //on calcule la position verticale de la bulle au niveau du curseur de la souris - la hauteur de notre div vers le haut + l'éventuel décalage causé par le scroll du document
  75.          el.style.left = posX +"px"; //on modifie la position horizontale en conséquence
  76.          el.style.top = posY +"px"; //on modifie la position verticale en conséquence
  77.       }
  78.    </script>
  79. </head>
  80. <body onLoad="coords()">
  81.    <p>Autres éléments de la page.</p>
  82.    <img src="http://meteo-clopiniere-sicaudiere.fr/2018/Janvier/Tableau_Pluie.jpg" alt="Pluviométrie" usemap="#pluviomap">
  83.    <map name="pluviomap" onMousemove="bubblepos(event)">
  84.       <area shape="rect" coords="0,0,0,0" id="cell_R01C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  85.       <area shape="rect" coords="0,0,0,0" id="cell_R01C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  86.       <area shape="rect" coords="0,0,0,0" id="cell_R01C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  87.    </map>
  88.    <p>Autres éléments de la page.</p>
  89. </body>
  90. </html>


 
Comme ça tu peux ajouter carrément du HTML au lieu d'uniquement du texte et donc des sauts de ligne avec la balise br.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 21-01-2018 à 20:59:14    

Avec les sauts de ligne, c'est parfait.
 
1) J'ai réussi à mettre le texte dans les bulles (simplement jusqu'à la 4ème case (R01C06).
Par contre, je ne sais pas comment faire pour la 1ère cellule de la 2ème rangée  
 
2) Pour mettre ma couleur de fond.
a) J'ai changé #FFFFAA par #1E4682, mais rien n'a changé
b) J'ai mis le code de ma couleur d'origine

Code :
  1. <body style="background-color: rgb(30, 70, 130); color: rgb(0, 0, 0);"
  2. alink="#ee0000" link="#0000ee" vlink="#551a8b">

 
Juste après </head>, J'ai bien ma couleur, mais les infos-bulles ne fonctionne pas (pourquoi)?


Message édité par guy7285 le 22-01-2018 à 09:53:37
Reply

Marsh Posté le 22-01-2018 à 11:39:47    

Je n'ai pas tout compris mais voici un deuxième exemple avec une cellule de deuxième ligne et les changements de couleur :
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>Page d'essai</title>
  6.    <style type="text/css">
  7.       body {
  8.          margin: 0px 0px 0px 0px;
  9.          color: #000000;
  10.          background-color: #1E4682;
  11.       }
  12.       a {
  13.          color: #0000ee;
  14.          text-decoration: underline;
  15.       }
  16.       a:link {
  17.          color: #0000ee;
  18.       }
  19.       a:visited {
  20.          color: #551a8b;
  21.       }
  22.       a:hover {
  23.          color: #eeee00;
  24.          cursor: pointer;
  25.       }
  26.       a:active {
  27.          color: #ee0000;
  28.       }
  29.       div.bubble {
  30.          padding: 0px 4px 4px 4px;
  31.          position: absolute;
  32.          top: 0px;
  33.          left: 0px;
  34.          background-color: #FFFFAA;
  35.          border-style: solid;
  36.          border-width: 1px 1px 1px 1px;
  37.          border-color: #000000;
  38.       }
  39.    </style>
  40.    <script type="text/javascript">
  41.       function coords() { //cette fonction définit les coordonnées des cellules à annoter ainsi que le dontenu de leur annotation
  42.          var datas = { //on définit le texte à afficher pour chaque cellule
  43.             'cell_R01C03': 'test1 <br>saut de ligne',
  44.             'cell_R01C04': 'test2',
  45.             'cell_R01C05': 'test3',
  46.             'cell_R02C02': 'test4'
  47.          };
  48.          var areas = document.getElementsByTagName('area'); //on récupère toutes les cellules annotées
  49.          var width = 90; //largeur d'une cellule
  50.          var height = 36; //hauteur d'une cellule
  51.          var paddingX = 7; //écart horizontal entre deux cellules
  52.          var paddingY = 7; //écart vertical entre deux cellules
  53.          for (var el of areas) { //pour chaque cellule
  54.             var elid = el.id; //on récupère son id qui contient ses coordonnées sous la forme Ligne puis Colonne
  55.             el.setAttribute('data-descr', datas[elid]); //on ajoute le texte à afficher en faisant la correspondance entre le tableau de données et l'id de la cellule
  56.             var regex = /\d+/g; //expression régulière pour extraire les nombres contenus dans l'id de notre cellule
  57.             var arr = elid.match(regex); //on parse l'id selon notre expression régulière
  58.             if (arr.length > 1) { //si deux nombres sont bien trouvés (i.e. les coordonnées) car sait-on jamais peut-être que la personne n'est pas capable d'écrire correctement l'id dans le DOM HTML...
  59.                var row = parseInt(arr[0], 10); //on convertit la chaîne de caractères correspondants au numéro de ligne en type entier naturel
  60.                var col = parseInt(arr[1], 10); //on convertit la chaîne de caractères correspondants au numéro de colonne en type entier naturel
  61.                var offsetX = 146; //on définit le décélage horizontale de la première cellule par rapport à gauche de l'image
  62.                if (row < 8) { //on définit les décalages verticaux entre les semaines par rapport au haut de l'image, ici S1
  63.                   var offsetY = 152;
  64.                } else if (row < 15) { //ici S2
  65.                   var offsetY = 152 + 29;
  66.                } else if (row < 22) { //ici S3
  67.                   var offsetY = 152 + 29 * 2;
  68.                } else if (row < 29) { //ici S4
  69.                   var offsetY = 152 + 29 * 3;
  70.                } else if (row < 32) { //ici S5, pas envie de gérer les cas avec des mois contenant moins de 31 jours mais ça ne devrait pas poser de problème si le document est écrit correctement...
  71.                   var offsetY = 152 + 29 * 4;
  72.                } else { //sait-on jamais que la personne n'est pas capable d'écrire correctement l'id dans le DOM HTML ou ne sait pas qu'il ne peut y avoir plus de 31 jours dans un mois...
  73.                   return null;
  74.                }
  75.                var x0 = offsetX + (col - 1) * (width + paddingX); //coordonnées horizontales du coin supérieur gauche de la cellule
  76.                var x1 = x0 + width; //coordonnées horizontales du coin inférieur droit de la cellule
  77.                var y0 = offsetY + (row - 1) * (height + paddingY); //coordonnées varticales du coin supérieur gauche de la cellule
  78.                var y1 = y0 + height; //coordonnées varticales du coin inférieur droit de la cellule
  79.                el.setAttribute("coords", x0 + "," + y0 + "," + x1 + "," + y1); //zou on ajoute les coordonnées à la cellule
  80.             }
  81.          }
  82.       }
  83.       function bubblein(el) { //cette fonction crée une bulle d'annotation avec son annotation à partir de l'élément déclenchant l'évènement (i.e. "mouseOver" )
  84.          var div = document.createElement('div'); //création d'une div pour contenir l'annotation
  85.          div.setAttribute('class', 'bubble'); //on lui ajoute la classe CSS "bubble"
  86.          div.setAttribute('id', el.id + '_bubble'); //on lui ajoute une id pour pouvoir y accèder
  87.          var txt = el.dataset.descr; //on récupère le texte d'annotation à partir de l'attribut "data-set" de l'élément déclenchant l'évènement
  88.          div.innerHTML = txt; //on ajoute le texte d'annotation à la div
  89.          document.body.appendChild(div); //on ajoute la div au document
  90.       }
  91.       function bubbleout(el) { //cette fonction supprime la bulle d'annotation créée lorsque la souris ne survole plus la cellule en question
  92.          document.body.removeChild(document.getElementById(el.id + '_bubble')); //on retire la div du document grâce à son id préalablement définie dans la fonction "bubblein()"
  93.       }
  94.       function bubblepos(posi) { //cette fonction gère la position de la bulle d'annotation
  95.          var el = document.getElementsByClassName('bubble')[0]; //on récupère toutes les bulles d'annotation et on ne garde que la première (normalement il n'y en a qu'une simultanément...)
  96.          var posX = posi.clientX + 8 + window.scrollX; //on calcule la position horizontale de la bulle au niveau du curseur de la souris + un décalage de 8px vers la droite + l'éventuel décalage causé par le scroll du document
  97.          var posY = posi.clientY - el.offsetHeight + window.scrollY; //on calcule la position verticale de la bulle au niveau du curseur de la souris - la hauteur de notre div vers le haut + l'éventuel décalage causé par le scroll du document
  98.          el.style.left = posX +"px"; //on modifie la position horizontale en conséquence
  99.          el.style.top = posY +"px"; //on modifie la position verticale en conséquence
  100.       }
  101.    </script>
  102. </head>
  103. <body onLoad="coords()">
  104.    <p><a>Autres</a> éléments de la page.</p>
  105.    <img src="http://meteo-clopiniere-sicaudiere.fr/2018/Janvier/Tableau_Pluie.jpg" alt="Pluviométrie" usemap="#pluviomap">
  106.    <map name="pluviomap" onMousemove="bubblepos(event)">
  107.       <area shape="rect" coords="0,0,0,0" id="cell_R01C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  108.       <area shape="rect" coords="0,0,0,0" id="cell_R01C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  109.       <area shape="rect" coords="0,0,0,0" id="cell_R01C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  110.       <area shape="rect" coords="0,0,0,0" id="cell_R02C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  111.    </map>
  112.    <p>Autres éléments de la page.</p>
  113. </body>
  114. </html>


 
Mais bon apprendre les bases du HTML et du CSS ne te ferait pas de mal...


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 22-01-2018 à 15:14:17    

Citation :

Je n'ai pas tout compris


Je souhaite avoir une bulle sur toutes les cellules dans les colonnes (Temps de précipitations par quart de journée)
Pour ne pas avoir ç faire ça:
 
https://www.aht.li/3171573/Image_commentaires.jpg
Ce que tu as fait est impeccable !!! (je t'en remercie encore).
 
Dans le code d'hier, j'arrivais à mettre une bulle dans la 4ème cellule de la ligne (chose que je n'arrive plus à faire avec le code d’aujourd’hui ?)
Ce que je n'arrivais pas à faire hier, c'est passé au cellules en dessous.
 
Si j'arrive à mettre une bulle dans les cellules de la ligne en dessous (au moins une ligne), je pourrais le faire pour toutes les autres, jusqu'au 31 janvier dernière cellule.
 

Citation :

Mais bon apprendre les bases du HTML et du CSS ne te ferait pas de mal...


Tu as raison, mais, en toute franchise je ne le ferais pas
1) J'avoue que je n'y comprends rien en informatique.
2) Je suis trop vieux pour m'y mettre.
3) Je ne connais aucun mot d'Anglais.
4) Ce que j'ai sur mon site, ce ne sont que des image EXCEL ou venant tout seul du logiciel "GraphWeather"
5) Et si j'arrive (ou pas) à faire toutes ces bulles dans mon image, après, je n'aurais plus l'occasion de m'y remettre.
 
Déjà pour faire ce message, j'ai mis 2h   :sarcastic:
 
Edit:
J'ai repris le code d'hier en récupérant ce qu'il fallait pour la couleur...ça fonctionne ( sauf changer de ligne)


Message édité par guy7285 le 22-01-2018 à 15:46:24

---------------
http://www.meteo-clopiniere-sicaudiere.fr
Reply

Marsh Posté le 22-01-2018 à 15:58:07    

La syntaxe est la suivante :
 
RxxCxx
 
R = Row = ligne, entre 01 et 31
C = Column = colonne, entre 01 et 06
 
Première cellule de la deuxième ligne = R02C01.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 22-01-2018 à 18:26:08    

Impeccable !!!, ça fonctionne  :jap:  
J'avoue que j'aurais du y penser  :sarcastic:
Merci encore de ton aide et de ta patience ;)
Cordialement


---------------
http://www.meteo-clopiniere-sicaudiere.fr
Reply

Marsh Posté le 22-01-2018 à 19:20:03    

Au passage il n'y a pas d'âge pour commencer, tu ne serais pas le premier à commencer après 50-60 ans. D'ailleurs il y a un paquet de retraités qui ont un projet et qui s'y mette pour arriver à leur fin.
 
Puis quel est le sens de monter un site web non commercial si au final on y comprend rien ?
 
Le HTML et le CSS sont accessibles à 99,999 % de la population je dirai au doigt mouillé. Et l'epsilon restant de la population n'est pas capable d'arriver jusqu'où tu es allé. Quand je parle d'accessibilité c'est comprendre les bases, arriver à faire des choses par soi-même et mener à bien des recherches pour débloquer des problèmes simples. Maîtriser la technologie dans son ensemble c'est en effet autre chose.
 
Mais typiquement changer la couleur de fond ça fait partie des bases qui peuvent être acquises en quelques heures (2 ou 3 heures) de tuto sur le HTML/CSS. Les ressources sur le sujet, en français, sont disponibles en quantité sur le net.


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 10-02-2018 à 09:46:32    

Bonjour,
J'ai bien réussi à faire pour le mois, mais il y a un Hic ! pour le 7 Février, impossible d'avoir une infobulle pour cette journée ??
Pourtant, je n'ai rien oublié ?
Voi-tu quelque chose qui ne colle pas ??
Merci de ton aide
Cordialement
http://meteo-clopiniere-sicaudiere [...] Pluie.html

Code :
  1. <html>
  2. <head>
  3. <meta charset="UTF-8">
  4. <title>Tableau Pluie</title>
  5. <style type="text/css">
  6. body {
  7. margin: 0px 0px 0px 0px;
  8. color: #000000;
  9. background-color: #003399;
  10. }
  11. a {
  12. color: #0000ee;
  13. text-decoration: underline;
  14. }
  15. a:link {
  16. color: #0000ee;
  17. }
  18. a:visited {
  19. color: #551a8b;
  20. }
  21. a:hover {
  22. color: #eeee00;
  23. cursor: pointer;
  24. }
  25. a:active {
  26. color: #ee0000;
  27. }
  28. div.bubble {
  29. padding: 0px 4px 4px 4px;
  30. position: absolute;
  31. top: 0px;
  32. left: 0px;
  33. background-color: #FFFFAA;
  34. border-style: solid;
  35. border-width: 1px 1px 1px 1px;
  36. border-color: #000000;
  37. }
  38. </style>
  39. <script type="text/javascript">
  40. function coords() { //cette fonction définit les coordonnées des cellules à annoter ainsi que le dontenu de leur annotation
  41. var datas = { //on définit le texte à afficher pour chaque cellule
  42. //---1er jour---//
  43. 'cell_R01C03': 'Pas de pluie',
  44. 'cell_R01C04': 'Pas de pluie',
  45. 'cell_R01C05': 'Pas de pluie',
  46. 'cell_R01C06': 'Pas de pluie',
  47. //---2ème jour---//
  48. 'cell_R02C03': 'Pas de pluie',
  49. 'cell_R02C04': 'Pas de pluie',
  50. 'cell_R02C05': 'il a plu: <br>de 17h33 à 17h34',
  51. 'cell_R02C06': 'Pas de pluie',
  52. //---3ème jour---//
  53. 'cell_R03C03': 'Pas de pluie',
  54. 'cell_R03C04': 'il a plu: <br>de 11h44 à 11h59',
  55. 'cell_R03C05': 'il a plu: <br>de 12h00 à 12h43 <br>de 13h56 à 14h43 <br>de 15h27 à 15h43',
  56. 'cell_R03C06': 'Pas de pluie',
  57. //---4ème jour---//
  58. 'cell_R04C03': 'il a plu: <br>de 6h45 à 6h59',
  59. 'cell_R04C04': 'il a plu: <br>de 7h à 7h43',
  60. 'cell_R04C05': 'Pas de pluie',
  61. 'cell_R04C06': 'Pas de pluie',
  62. //---5ème jour---//
  63. 'cell_R05C03': 'Pas de pluie',
  64. 'cell_R05C04': 'Pas de pluie',
  65. 'cell_R05C05': 'Pas de pluie',
  66. 'cell_R05C06': 'Pas de pluie',
  67. //---6ème jour---//
  68. 'cell_R06C03': 'Pas de pluie',
  69. 'cell_R06C04': 'Pas de pluie',
  70. 'cell_R06C05': 'Pas de pluie',
  71. 'cell_R06C06': 'Pas de pluie',
  72. //---7ème jour---//
  73. 'cell_R07C03': 'Pas de pluie',
  74. 'cell_R07C04': 'Pas de pluie',
  75. 'cell_R07C05': 'Pas de pluie',
  76. 'cell_R07C06': 'Pas de pluie',
  77. //---8ème jour---//
  78. 'cell_R08C03': 'Pas de pluie',
  79. 'cell_R08C04': 'Pas de pluie',
  80. 'cell_R08C05': 'Pas de pluie',
  81. 'cell_R08C06': 'Pas de pluie',
  82. //---9ème jour---//
  83. 'cell_R09C03': 'Pas de pluie',
  84. 'cell_R09C04': 'il a plu: <br>de 8h53 à 9h43<br>de 11h19 à 11h42',
  85. 'cell_R09C05': 'Pas de pluie',
  86. 'cell_R09C06': 'Pas de pluie',
  87. //---10ème jour---//
  88. 'cell_R010C03': 'Pas de pluie',
  89. 'cell_R010C04': 'Pas de pluie',
  90. 'cell_R010C05': 'Pas de pluie',
  91. 'cell_R010C06': 'Pas de pluie',
  92. //---11ème jour---//
  93. 'cell_R011C03': 'Pas de pluie',
  94. 'cell_R011C04': 'Pas de pluie',
  95. 'cell_R011C05': 'Pas de pluie',
  96. 'cell_R011C06': 'Pas de pluie',
  97. //---12ème jour---//
  98. 'cell_R012C03': 'Pas de pluie',
  99. 'cell_R012C04': 'Pas de pluie',
  100. 'cell_R012C05': 'Pas de pluie',
  101. 'cell_R012C06': 'Pas de pluie',
  102. //---13ème jour---//
  103. 'cell_R013C03': 'Pas de pluie',
  104. 'cell_R013C04': 'Pas de pluie',
  105. 'cell_R013C05': 'Pas de pluie',
  106. 'cell_R013C06': 'Pas de pluie',
  107. //---14ème jour---//
  108. 'cell_R014C03': 'Pas de pluie',
  109. 'cell_R014C04': 'Pas de pluie',
  110. 'cell_R014C05': 'Pas de pluie',
  111. 'cell_R014C06': 'Pas de pluie',
  112. //---15ème jour---//
  113. 'cell_R015C03': 'Pas de pluie',
  114. 'cell_R015C04': 'Pas de pluie',
  115. 'cell_R015C05': 'Pas de pluie',
  116. 'cell_R015C06': 'Pas de pluie',
  117. //---16ème jour---//
  118. 'cell_R016C03': 'Pas de pluie',
  119. 'cell_R016C04': 'Pas de pluie',
  120. 'cell_R016C05': 'Pas de pluie',
  121. 'cell_R016C06': 'Pas de pluie',
  122. //---17ème jour---//
  123. 'cell_R017C03': 'Pas de pluie',
  124. 'cell_R017C04': 'Pas de pluie',
  125. 'cell_R017C05': 'Pas de pluie',
  126. 'cell_R017C06': 'Pas de pluie',
  127. //---18ème jour---//
  128. 'cell_R018C03': 'Pas de pluie',
  129. 'cell_R018C04': 'Pas de pluie',
  130. 'cell_R018C05': 'Pas de pluie',
  131. 'cell_R018C06': 'Pas de pluie',
  132. //---19ème jour---//
  133. 'cell_R019C03': 'Pas de pluie',
  134. 'cell_R019C04': 'Pas de pluie',
  135. 'cell_R019C05': 'Pas de pluie',
  136. 'cell_R019C06': 'Pas de pluie',
  137. //---20ème jour---//
  138. 'cell_R020C03': 'Pas de pluie',
  139. 'cell_R020C04': 'Pas de pluie',
  140. 'cell_R020C05': 'Pas de pluie',
  141. 'cell_R020C06': 'Pas de pluie',
  142. //---21ème jour---//
  143. 'cell_R021C03': 'Pas de pluie',
  144. 'cell_R021C04': 'Pas de pluie',
  145. 'cell_R021C05': 'Pas de pluie',
  146. 'cell_R021C06': 'Pas de pluie',
  147. //---22ème jour---//
  148. 'cell_R022C03': 'Pas de pluie',
  149. 'cell_R022C04': 'Pas de pluie',
  150. 'cell_R022C05': 'Pas de pluie',
  151. 'cell_R022C06': 'Pas de pluie',
  152. //---23ème jour---//
  153. 'cell_R023C03': 'Pas de pluie',
  154. 'cell_R023C04': 'Pas de pluie',
  155. 'cell_R023C05': 'Pas de pluie',
  156. 'cell_R023C06': 'Pas de pluie',
  157. //---24ème jour---//
  158. 'cell_R024C03': 'Pas de pluie',
  159. 'cell_R024C04': 'Pas de pluie',
  160. 'cell_R024C05': 'Pas de pluie',
  161. 'cell_R024C06': 'Pas de pluie',
  162. //---20ème jour---//
  163. 'cell_R025C03': 'Pas de pluie',
  164. 'cell_R025C04': 'Pas de pluie',
  165. 'cell_R025C05': 'Pas de pluie',
  166. 'cell_R025C06': 'Pas de pluie',
  167. //---26ème jour---//
  168. 'cell_R026C03': 'Pas de pluie',
  169. 'cell_R026C04': 'Pas de pluie',
  170. 'cell_R026C05': 'Pas de pluie',
  171. 'cell_R026C06': 'Pas de pluie',
  172. //---27ème jour---//
  173. 'cell_R027C03': 'Pas de pluie',
  174. 'cell_R027C04': 'Pas de pluie',
  175. 'cell_R027C05': 'Pas de pluie',
  176. 'cell_R027C06': 'Pas de pluie',
  177. //---28ème jour---//
  178. 'cell_R028C03': 'Pas de pluie',
  179. 'cell_R028C04': 'Pas de pluie',
  180. 'cell_R028C05': 'Pas de pluie',
  181. 'cell_R028C06': 'Pas de pluie',
  182. //---29ème jour---//
  183. 'cell_R029C03': 'Pas de pluie',
  184. 'cell_R029C04': 'Pas de pluie',
  185. 'cell_R029C05': 'Pas de pluie',
  186. 'cell_R029C06': 'Pas de pluie',
  187. //---30ème jour---//
  188. 'cell_R030C03': 'Pas de pluie',
  189. 'cell_R030C04': 'Pas de pluie',
  190. 'cell_R030C05': 'Pas de pluie',
  191. 'cell_R030C06': 'Pas de pluie',
  192. //---31ème jour---//
  193. 'cell_R031C03': 'Pas de pluie',
  194. 'cell_R031C04': 'Pas de pluie',
  195. 'cell_R031C05': 'Pas de pluie',
  196. 'cell_R031C06': 'Pas de pluie',
  198. };
  199. var areas = document.getElementsByTagName('area'); //on récupère toutes les cellules annotées
  200. var width = 90; //largeur d'une cellule
  201. var height = 36; //hauteur d'une cellule
  202. var paddingX = 7; //écart horizontal entre deux cellules
  203. var paddingY = 7; //écart vertical entre deux cellules
  204. for (var el of areas) { //pour chaque cellule
  205. var elid = el.id; //on récupère son id qui contient ses coordonnées sous la forme Ligne puis Colonne
  206. el.setAttribute('data-descr', datas[elid]); //on ajoute le texte à afficher en faisant la correspondance entre le tableau de données et l'id de la cellule
  207. var regex = /\d+/g; //expression régulière pour extraire les nombres contenus dans l'id de notre cellule
  208. var arr = elid.match(regex); //on parse l'id selon notre expression régulière
  209. if (arr.length > 1) { //si deux nombres sont bien trouvés (i.e. les coordonnées) car sait-on jamais peut-être que la personne n'est pas capable d'écrire correctement l'id dans le DOM HTML...
  210. var row = parseInt(arr[0], 10); //on convertit la chaîne de caractères correspondants au numéro de ligne en type entier naturel
  211. var col = parseInt(arr[1], 10); //on convertit la chaîne de caractères correspondants au numéro de colonne en type entier naturel
  212. var offsetX = 146; //on définit le décélage horizontale de la première cellule par rapport à gauche de l'image
  213. if (row < 8) { //ici S1 //on définit les décalages verticaux entre les semaines par rapport au haut de l'image
  214. var offsetY = 152;
  215. } else if (row < 15) { //ici S2
  216. var offsetY = 152 + 29;
  217. } else if (row < 22) { //ici S3
  218. var offsetY = 152 + 29 * 2;
  219. } else if (row < 29) { //ici S4
  220. var offsetY = 152 + 29 * 3;
  221. } else if (row < 32) { //ici S5 //pas envie de gérer les cas avec des mois contenant moins de 31 jours mais ça ne devrait pas poser de problème si le document est écrit correctement...
  222. var offsetY = 152 + 29 * 4;
  223. } else { //sait-on jamais que la personne n'est pas capable d'écrire correctement l'id dans le DOM HTML ou ne sait pas qu'il ne peut y avoir plus de 31 jours dans un mois...
  224. return null;
  225. }
  226. var x0 = offsetX + (col - 1) * (width + paddingX); //coordonnées horizontales du coin supérieur gauche de la cellule
  227. var x1 = x0 + width; //coordonnées horizontales du coin inférieur droit de la cellule
  228. var y0 = offsetY + (row - 1) * (height + paddingY); //coordonnées varticales du coin supérieur gauche de la cellule
  229. var y1 = y0 + height; //coordonnées varticales du coin inférieur droit de la cellule
  230. el.setAttribute("coords", x0 + "," + y0 + "," + x1 + "," + y1); //zou on ajoute les coordonnées à la cellule
  231. }
  232. }
  233. }
  234. function bubblein(el) { //cette fonction crée une bulle d'annotation avec son annotation à partir de l'élément déclenchant l'évènement (i.e. "mouseOver" )
  235. var div = document.createElement('div'); //création d'une div pour contenir l'annotation
  236. div.setAttribute('class', 'bubble'); //on lui ajoute la classe CSS "bubble"
  237. div.setAttribute('id', el.id + '_bubble'); //on lui ajoute une id pour pouvoir y accèder
  238. var txt = el.dataset.descr; //on récupère le texte d'annotation à partir de l'attribut "data-set" de l'élément déclenchant l'évènement
  239. div.innerHTML = txt; //on ajoute le texte d'annotation à la div
  240. document.body.appendChild(div); //on ajoute la div au document
  241. }
  242. function bubbleout(el) { //cette fonction supprime la bulle d'annotation créée lorsque la souris ne survole plus la cellule en question
  243. document.body.removeChild(document.getElementById(el.id + '_bubble')); //on retire la div du document grâce à son id préalablement définie dans la fonction "bubblein()"
  244. }
  245. function bubblepos(posi) { //cette fonction gère la position de la bulle d'annotation
  246. var el = document.getElementsByClassName('bubble')[0]; //on récupère toutes les bulles d'annotation et on ne garde que la première (normalement il n'y en a qu'une simultanément...)
  247. var posX = posi.clientX + 8 + window.scrollX; //on calcule la position horizontale de la bulle au niveau du curseur de la souris + un décalage de 8px vers la droite + l'éventuel décalage causé par le scroll du document
  248. var posY = posi.clientY - el.offsetHeight + window.scrollY; //on calcule la position verticale de la bulle au niveau du curseur de la souris - la hauteur de notre div vers le haut + l'éventuel décalage causé par le scroll du document
  249. el.style.left = posX +"px"; //on modifie la position horizontale en conséquence
  250. el.style.top = posY +"px"; //on modifie la position verticale en conséquence
  251. }
  252. </script>
  253. </head>
  254. <body onload="coords()">
  255. <p style="text-align: center;"><a href="Tableau_Temperatures.html"><span
  256. style="color: white;"><img
  257. style="border: 0px solid ; width: 54px; height: 54px;" alt="Icone Vent"
  258. src="../../Icones/Thermometre.png"></span></a>&nbsp;&nbsp;&nbsp;<a
  259. href="Tableau_Vent.html"><img
  260. style="border: 0px solid ; width: 70px; height: 42px;" alt="Icone Vent"
  261. src="../../Icones/Vent.png"></a>&nbsp;&nbsp; &nbsp; <a
  262. href="Tableau_Humidite.html"><img
  263. style="border: 0px solid ; width: 32px; height: 50px;" alt="Goutte"
  264. src="../../Icones/Humidite.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  265. <a href="Tableau_Soleil.html"><img src="../../Icones/Soleil.png"
  266. alt="Icone Soleil"
  267. style="border: 0px solid ; width: 54px; height: 54px;"></a>&nbsp;
  268. &nbsp;&nbsp; <a href="Tableau_Pressions.html"><img
  269. style="border: 0px solid ; width: 54px; height: 54px;"
  270. alt="Icone Pression" src="../../Icones/Pression.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  271. <a href="../../index.html"><span style="text-decoration: underline;"><img
  272. style="border: 0px solid ; width: 54px; height: 54px;"
  273. alt="Icone accueil" src="../../Icones/Accueil.png"></span></a>.</p>
  274. <p style="text-align: center;"><span style="color: white;">Pour voir
  275. les différents tableaux, cliquez sur les icônes ci-dessus</span><br>
  276. </p>
  277. <p style="text-align: center;"><span style="color: white;">Pour voir
  278. les heures de pluie, passez la souris au dessus des cases avec un peit
  279. triangle rouge</span><br>
  280. </p>
  281. <div style="text-align: center;">
  282. <div style="text-align: center;">
  283. <div style="text-align: center;"><img
  284. style="width: 728px; height: 1615px;" src="Tableau_Pluie.jpg"
  285. alt="Pluviométrie" usemap="#pluviomap"> <map name="pluviomap"
  286. onmousemove="bubblepos(event)">
  287. <!-- 1er jour --><area shape="rect" coords="0,0,0,0" id="cell_R01C03"
  288. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  289. onmouseout="bubbleout(this)">
  290. <area shape="rect" coords="0,0,0,0" id="cell_R01C04"
  291. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  292. onmouseout="bubbleout(this)">
  293. <area shape="rect" coords="0,0,0,0" id="cell_R01C05"
  294. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  295. onmouseout="bubbleout(this)">
  296. <area shape="rect" coords="0,0,0,0" id="cell_R01C06"
  297. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  298. onmouseout="bubbleout(this)">
  299. <!-- 2ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R02C03"
  300. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  301. onmouseout="bubbleout(this)">
  302. <area shape="rect" coords="0,0,0,0" id="cell_R02C04"
  303. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  304. onmouseout="bubbleout(this)">
  305. <area shape="rect" coords="0,0,0,0" id="cell_R02C05"
  306. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  307. onmouseout="bubbleout(this)">
  308. <area shape="rect" coords="0,0,0,0" id="cell_R02C06"
  309. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  310. onmouseout="bubbleout(this)">
  311. <!-- 3ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R03C03"
  312. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  313. onmouseout="bubbleout(this)">
  314. <area shape="rect" coords="0,0,0,0" id="cell_R03C04"
  315. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  316. onmouseout="bubbleout(this)">
  317. <area shape="rect" coords="0,0,0,0" id="cell_R03C05"
  318. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  319. onmouseout="bubbleout(this)">
  320. <area shape="rect" coords="0,0,0,0" id="cell_R03C06"
  321. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  322. onmouseout="bubbleout(this)">
  323. <!-- 4ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R04C03"
  324. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  325. onmouseout="bubbleout(this)">
  326. <area shape="rect" coords="0,0,0,0" id="cell_R04C04"
  327. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  328. onmouseout="bubbleout(this)">
  329. <area shape="rect" coords="0,0,0,0" id="cell_R04C05"
  330. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  331. onmouseout="bubbleout(this)">
  332. <area shape="rect" coords="0,0,0,0" id="cell_R04C06"
  333. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  334. onmouseout="bubbleout(this)">
  335. <!-- 5ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R05C03"
  336. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  337. onmouseout="bubbleout(this)">
  338. <area shape="rect" coords="0,0,0,0" id="cell_R05C04"
  339. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  340. onmouseout="bubbleout(this)">
  341. <area shape="rect" coords="0,0,0,0" id="cell_R05C05"
  342. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  343. onmouseout="bubbleout(this)">
  344. <area shape="rect" coords="0,0,0,0" id="cell_R05C06"
  345. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  346. onmouseout="bubbleout(this)">
  347. <!-- 6ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R06C03"
  348. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  349. onmouseout="bubbleout(this)">
  350. <area shape="rect" coords="0,0,0,0" id="cell_R06C04"
  351. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  352. onmouseout="bubbleout(this)">
  353. <area shape="rect" coords="0,0,0,0" id="cell_R06C05"
  354. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  355. onmouseout="bubbleout(this)">
  356. <area shape="rect" coords="0,0,0,0" id="cell_R06C06"
  357. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  358. onmouseout="bubbleout(this)">
  359. <!-- 7ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R07C03"
  360. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  361. onmouseout="bubbleout(this)">
  362. <area shape="rect" coords="0,0,0,0" id="cell_R07C04"
  363. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  364. onmouseout="bubbleout(this)">
  365. <area shape="rect" coords="0,0,0,0" id="cell_R07C05"
  366. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  367. onmouseout="bubbleout(this)">
  368. <area shape="rect" coords="0,0,0,0" id="cell_R07C06"
  369. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  370. onmouseout="bubbleout(this)">
  371. <!-- 8ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R08C03"
  372. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  373. onmouseout="bubbleout(this)">
  374. <area shape="rect" coords="0,0,0,0" id="cell_R08C04"
  375. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  376. onmouseout="bubbleout(this)">
  377. <area shape="rect" coords="0,0,0,0" id="cell_R08C05"
  378. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  379. onmouseout="bubbleout(this)">
  380. <area shape="rect" coords="0,0,0,0" id="cell_R08C06"
  381. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  382. onmouseout="bubbleout(this)">
  383. <!-- 9ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R09C03"
  384. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  385. onmouseout="bubbleout(this)">
  386. <area shape="rect" coords="0,0,0,0" id="cell_R09C04"
  387. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  388. onmouseout="bubbleout(this)">
  389. <area shape="rect" coords="0,0,0,0" id="cell_R09C05"
  390. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  391. onmouseout="bubbleout(this)">
  392. <area shape="rect" coords="0,0,0,0" id="cell_R09C06"
  393. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  394. onmouseout="bubbleout(this)">
  395. <!-- 10ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R010C03"
  396. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  397. onmouseout="bubbleout(this)">
  398. <area shape="rect" coords="0,0,0,0" id="cell_R010C04"
  399. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  400. onmouseout="bubbleout(this)">
  401. <area shape="rect" coords="0,0,0,0" id="cell_R010C05"
  402. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  403. onmouseout="bubbleout(this)">
  404. <area shape="rect" coords="0,0,0,0" id="cell_R010C06"
  405. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  406. onmouseout="bubbleout(this)">
  407. <!-- 11ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R011C03"
  408. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  409. onmouseout="bubbleout(this)">
  410. <area shape="rect" coords="0,0,0,0" id="cell_R011C04"
  411. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  412. onmouseout="bubbleout(this)">
  413. <area shape="rect" coords="0,0,0,0" id="cell_R011C05"
  414. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  415. onmouseout="bubbleout(this)">
  416. <area shape="rect" coords="0,0,0,0" id="cell_R011C06"
  417. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  418. onmouseout="bubbleout(this)">
  419. <!-- 12ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R012C03"
  420. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  421. onmouseout="bubbleout(this)">
  422. <area shape="rect" coords="0,0,0,0" id="cell_R012C04"
  423. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  424. onmouseout="bubbleout(this)">
  425. <area shape="rect" coords="0,0,0,0" id="cell_R012C05"
  426. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  427. onmouseout="bubbleout(this)">
  428. <area shape="rect" coords="0,0,0,0" id="cell_R012C06"
  429. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  430. onmouseout="bubbleout(this)">
  431. <!-- 13ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R013C03"
  432. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  433. onmouseout="bubbleout(this)">
  434. <area shape="rect" coords="0,0,0,0" id="cell_R013C04"
  435. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  436. onmouseout="bubbleout(this)">
  437. <area shape="rect" coords="0,0,0,0" id="cell_R013C05"
  438. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  439. onmouseout="bubbleout(this)">
  440. <area shape="rect" coords="0,0,0,0" id="cell_R013C06"
  441. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  442. onmouseout="bubbleout(this)">
  443. <!-- 14ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R014C03"
  444. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  445. onmouseout="bubbleout(this)">
  446. <area shape="rect" coords="0,0,0,0" id="cell_R014C04"
  447. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  448. onmouseout="bubbleout(this)">
  449. <area shape="rect" coords="0,0,0,0" id="cell_R014C05"
  450. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  451. onmouseout="bubbleout(this)">
  452. <area shape="rect" coords="0,0,0,0" id="cell_R014C06"
  453. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  454. onmouseout="bubbleout(this)">
  455. <!-- 15ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R015C03"
  456. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  457. onmouseout="bubbleout(this)">
  458. <area shape="rect" coords="0,0,0,0" id="cell_R015C04"
  459. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  460. onmouseout="bubbleout(this)">
  461. <area shape="rect" coords="0,0,0,0" id="cell_R015C05"
  462. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  463. onmouseout="bubbleout(this)">
  464. <area shape="rect" coords="0,0,0,0" id="cell_R015C06"
  465. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  466. onmouseout="bubbleout(this)">
  467. <!-- 16ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R016C03"
  468. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  469. onmouseout="bubbleout(this)">
  470. <area shape="rect" coords="0,0,0,0" id="cell_R016C04"
  471. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  472. onmouseout="bubbleout(this)">
  473. <area shape="rect" coords="0,0,0,0" id="cell_R016C05"
  474. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  475. onmouseout="bubbleout(this)">
  476. <area shape="rect" coords="0,0,0,0" id="cell_R016C06"
  477. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  478. onmouseout="bubbleout(this)">
  479. <!-- 17ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R017C03"
  480. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  481. onmouseout="bubbleout(this)">
  482. <area shape="rect" coords="0,0,0,0" id="cell_R017C04"
  483. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  484. onmouseout="bubbleout(this)">
  485. <area shape="rect" coords="0,0,0,0" id="cell_R017C05"
  486. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  487. onmouseout="bubbleout(this)">
  488. <area shape="rect" coords="0,0,0,0" id="cell_R017C06"
  489. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  490. onmouseout="bubbleout(this)">
  491. <!-- 18ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R018C03"
  492. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  493. onmouseout="bubbleout(this)">
  494. <area shape="rect" coords="0,0,0,0" id="cell_R018C04"
  495. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  496. onmouseout="bubbleout(this)">
  497. <area shape="rect" coords="0,0,0,0" id="cell_R018C05"
  498. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  499. onmouseout="bubbleout(this)">
  500. <area shape="rect" coords="0,0,0,0" id="cell_R018C06"
  501. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  502. onmouseout="bubbleout(this)">
  503. <!-- 19ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R019C03"
  504. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  505. onmouseout="bubbleout(this)">
  506. <area shape="rect" coords="0,0,0,0" id="cell_R019C04"
  507. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  508. onmouseout="bubbleout(this)">
  509. <area shape="rect" coords="0,0,0,0" id="cell_R019C05"
  510. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  511. onmouseout="bubbleout(this)">
  512. <area shape="rect" coords="0,0,0,0" id="cell_R019C06"
  513. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  514. onmouseout="bubbleout(this)">
  515. <!-- 20ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R020C03"
  516. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  517. onmouseout="bubbleout(this)">
  518. <area shape="rect" coords="0,0,0,0" id="cell_R020C04"
  519. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  520. onmouseout="bubbleout(this)">
  521. <area shape="rect" coords="0,0,0,0" id="cell_R020C05"
  522. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  523. onmouseout="bubbleout(this)">
  524. <area shape="rect" coords="0,0,0,0" id="cell_R020C06"
  525. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  526. onmouseout="bubbleout(this)">
  527. <!-- 21ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R021C03"
  528. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  529. onmouseout="bubbleout(this)">
  530. <area shape="rect" coords="0,0,0,0" id="cell_R021C04"
  531. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  532. onmouseout="bubbleout(this)">
  533. <area shape="rect" coords="0,0,0,0" id="cell_R021C05"
  534. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  535. onmouseout="bubbleout(this)">
  536. <area shape="rect" coords="0,0,0,0" id="cell_R021C06"
  537. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  538. onmouseout="bubbleout(this)">
  539. <!-- 22ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R022C03"
  540. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  541. onmouseout="bubbleout(this)">
  542. <area shape="rect" coords="0,0,0,0" id="cell_R022C04"
  543. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  544. onmouseout="bubbleout(this)">
  545. <area shape="rect" coords="0,0,0,0" id="cell_R022C05"
  546. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  547. onmouseout="bubbleout(this)">
  548. <area shape="rect" coords="0,0,0,0" id="cell_R022C06"
  549. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  550. onmouseout="bubbleout(this)">
  551. <!-- 23ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R023C03"
  552. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  553. onmouseout="bubbleout(this)">
  554. <area shape="rect" coords="0,0,0,0" id="cell_R023C04"
  555. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  556. onmouseout="bubbleout(this)">
  557. <area shape="rect" coords="0,0,0,0" id="cell_R023C05"
  558. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  559. onmouseout="bubbleout(this)">
  560. <area shape="rect" coords="0,0,0,0" id="cell_R023C06"
  561. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  562. onmouseout="bubbleout(this)">
  563. <!-- 24ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R024C03"
  564. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  565. onmouseout="bubbleout(this)">
  566. <area shape="rect" coords="0,0,0,0" id="cell_R024C04"
  567. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  568. onmouseout="bubbleout(this)">
  569. <area shape="rect" coords="0,0,0,0" id="cell_R024C05"
  570. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  571. onmouseout="bubbleout(this)">
  572. <area shape="rect" coords="0,0,0,0" id="cell_R024C06"
  573. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  574. onmouseout="bubbleout(this)">
  575. <!-- 25ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R025C03"
  576. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  577. onmouseout="bubbleout(this)">
  578. <area shape="rect" coords="0,0,0,0" id="cell_R025C04"
  579. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  580. onmouseout="bubbleout(this)">
  581. <area shape="rect" coords="0,0,0,0" id="cell_R025C05"
  582. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  583. onmouseout="bubbleout(this)">
  584. <area shape="rect" coords="0,0,0,0" id="cell_R025C06"
  585. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  586. onmouseout="bubbleout(this)">
  587. <!-- 26ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R026C03"
  588. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  589. onmouseout="bubbleout(this)">
  590. <area shape="rect" coords="0,0,0,0" id="cell_R026C04"
  591. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  592. onmouseout="bubbleout(this)">
  593. <area shape="rect" coords="0,0,0,0" id="cell_R026C05"
  594. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  595. onmouseout="bubbleout(this)">
  596. <area shape="rect" coords="0,0,0,0" id="cell_R026C06"
  597. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  598. onmouseout="bubbleout(this)">
  599. <!-- 27ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R027C03"
  600. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  601. onmouseout="bubbleout(this)">
  602. <area shape="rect" coords="0,0,0,0" id="cell_R027C04"
  603. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  604. onmouseout="bubbleout(this)">
  605. <area shape="rect" coords="0,0,0,0" id="cell_R027C05"
  606. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  607. onmouseout="bubbleout(this)">
  608. <area shape="rect" coords="0,0,0,0" id="cell_R027C06"
  609. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  610. onmouseout="bubbleout(this)">
  611. <!-- 28ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R028C03"
  612. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  613. onmouseout="bubbleout(this)">
  614. <area shape="rect" coords="0,0,0,0" id="cell_R028C04"
  615. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  616. onmouseout="bubbleout(this)">
  617. <area shape="rect" coords="0,0,0,0" id="cell_R028C05"
  618. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  619. onmouseout="bubbleout(this)">
  620. <area shape="rect" coords="0,0,0,0" id="cell_R028C06"
  621. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  622. onmouseout="bubbleout(this)">
  623. <!-- 29ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R029C03"
  624. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  625. onmouseout="bubbleout(this)">
  626. <area shape="rect" coords="0,0,0,0" id="cell_R029C04"
  627. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  628. onmouseout="bubbleout(this)">
  629. <area shape="rect" coords="0,0,0,0" id="cell_R029C05"
  630. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  631. onmouseout="bubbleout(this)">
  632. <area shape="rect" coords="0,0,0,0" id="cell_R029C06"
  633. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  634. onmouseout="bubbleout(this)">
  635. <!-- 30ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R030C03"
  636. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  637. onmouseout="bubbleout(this)">
  638. <area shape="rect" coords="0,0,0,0" id="cell_R030C04"
  639. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  640. onmouseout="bubbleout(this)">
  641. <area shape="rect" coords="0,0,0,0" id="cell_R030C05"
  642. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  643. onmouseout="bubbleout(this)">
  644. <area shape="rect" coords="0,0,0,0" id="cell_R030C06"
  645. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  646. onmouseout="bubbleout(this)">
  647. <!-- 31ème jour --><area shape="rect" coords="0,0,0,0" id="cell_R031C03"
  648. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  649. onmouseout="bubbleout(this)">
  650. <area shape="rect" coords="0,0,0,0" id="cell_R031C04"
  651. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  652. onmouseout="bubbleout(this)">
  653. <area shape="rect" coords="0,0,0,0" id="cell_R031C05"
  654. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  655. onmouseout="bubbleout(this)">
  656. <area shape="rect" coords="0,0,0,0" id="cell_R031C06"
  657. onmouseover="bubblein(this)" onmousemove="bubblepos(event)"
  658. onmouseout="bubbleout(this)">
  659. </map>
  660. </div>
  661. </div>
  662. </div>
  663. </body>
  664. </html>


---------------
http://www.meteo-clopiniere-sicaudiere.fr
Reply

Marsh Posté le 10-02-2018 à 13:12:59    

Bonjour,
 
Oui je n'avais pas pris en compte que la première semaine ne faisait pas tout le temps sept jours, j'ai rajouté en début du javascript une variable à modifier indiquant le nombre de jours que contient la première semaine du mois.
Tu feras attention je suis reparti de mon code qui était plus propre au niveau de sa mise en page, j'ai corrigé quelques erreurs en plus. En effet, dans la partie javascript, il faut faire attention dans la variable "datas" qui te permet d'ajouter les annotations, il n'y a pas de virgule après le dernier élément puisque c'est le dernier... De plus dans la syntaxe "RxxCxx" tu écris des choses comme "R031C05", non c'est "R31C05".
 
Voici le code corrigé :
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title>Page d'essai</title>
  6.    <style type="text/css">
  7.       body {
  8.          margin: 0px 0px 0px 0px;
  9.          color: #000000;
  10.          background-color: #003399;
  11.       }
  12.       img {
  13.          border-style: none;
  14.          border-width: 0px 0px 0px 0px;
  15.       }
  16.       a {
  17.          color: #0000ee;
  18.          text-decoration: underline;
  19.       }
  20.       a:link {
  21.          color: #0000ee;
  22.       }
  23.       a:visited {
  24.          color: #551a8b;
  25.       }
  26.       a:hover {
  27.          color: #eeee00;
  28.          cursor: pointer;
  29.       }
  30.       a:active {
  31.          color: #ee0000;
  32.       }
  33.       div.bubble {
  34.          padding: 0px 4px 4px 4px;
  35.          position: absolute;
  36.          top: 0px;
  37.          left: 0px;
  38.          background-color: #FFFFAA;
  39.          border-style: solid;
  40.          border-width: 1px 1px 1px 1px;
  41.          border-color: #000000;
  42.       }
  43.    </style>
  44.    <script type="text/javascript">
  45.       function coords() { //cette fonction définit les coordonnées des cellules à annoter ainsi que le contenu de leur annotation
  46.          var firstWeekLength = 4; //on définit le nombre de jours dans la première semaine du mois
  47.          var datas = { //on définit le texte à afficher pour chaque cellule
  48.             /* ---1er jour--- */
  49.             'cell_R01C01': 'Pas de pluie',
  50.             'cell_R01C02': 'Pas de pluie',
  51.             'cell_R01C03': 'Pas de pluie',
  52.             'cell_R01C04': 'Pas de pluie',
  53.             'cell_R01C05': 'Pas de pluie',
  54.             'cell_R01C06': 'Pas de pluie',
  55.             /* ---2ème jour--- */
  56.             'cell_R02C01': 'Pas de pluie',
  57.             'cell_R02C02': 'Pas de pluie',
  58.             'cell_R02C03': 'Pas de pluie',
  59.             'cell_R02C04': 'Pas de pluie',
  60.             'cell_R02C05': 'Pas de pluie',
  61.             'cell_R02C06': 'Pas de pluie',
  62.             /* ---3ème jour--- */
  63.             'cell_R03C01': 'Pas de pluie',
  64.             'cell_R03C02': 'Pas de pluie',
  65.             'cell_R03C03': 'Pas de pluie',
  66.             'cell_R03C04': 'Pas de pluie',
  67.             'cell_R03C05': 'Pas de pluie',
  68.             'cell_R03C06': 'Pas de pluie',
  69.             /* ---4ème jour--- */
  70.             'cell_R04C01': 'Pas de pluie',
  71.             'cell_R04C02': 'Pas de pluie',
  72.             'cell_R04C03': 'Pas de pluie',
  73.             'cell_R04C04': 'Pas de pluie',
  74.             'cell_R04C05': 'Pas de pluie',
  75.             'cell_R04C06': 'Pas de pluie',
  76.             /* ---5ème jour--- */
  77.             'cell_R05C01': 'Pas de pluie',
  78.             'cell_R05C02': 'Pas de pluie',
  79.             'cell_R05C03': 'Pas de pluie',
  80.             'cell_R05C04': 'Pas de pluie',
  81.             'cell_R05C05': 'Pas de pluie',
  82.             'cell_R05C06': 'Pas de pluie',
  83.             /* ---6ème jour--- */
  84.             'cell_R06C01': 'Pas de pluie',
  85.             'cell_R06C02': 'Pas de pluie',
  86.             'cell_R06C03': 'Pas de pluie',
  87.             'cell_R06C04': 'Pas de pluie',
  88.             'cell_R06C05': 'Pas de pluie',
  89.             'cell_R06C06': 'Pas de pluie',
  90.             /* ---7ème jour--- */
  91.             'cell_R07C01': 'Pas de pluie',
  92.             'cell_R07C02': 'Pas de pluie',
  93.             'cell_R07C03': 'Pas de pluie',
  94.             'cell_R07C04': 'Pas de pluie',
  95.             'cell_R07C05': 'Pas de pluie',
  96.             'cell_R07C06': 'Pas de pluie',
  97.             /* ---8ème jour--- */
  98.             'cell_R08C01': 'Pas de pluie',
  99.             'cell_R08C02': 'Pas de pluie',
  100.             'cell_R08C03': 'Pas de pluie',
  101.             'cell_R08C04': 'Pas de pluie',
  102.             'cell_R08C05': 'Pas de pluie',
  103.             'cell_R08C06': 'Pas de pluie',
  104.             /* ---9ème jour--- */
  105.             'cell_R09C01': 'Pas de pluie',
  106.             'cell_R09C02': 'Pas de pluie',
  107.             'cell_R09C03': 'Pas de pluie',
  108.             'cell_R09C04': 'Pas de pluie',
  109.             'cell_R09C05': 'Pas de pluie',
  110.             'cell_R09C06': 'Pas de pluie',
  111.             /* ---10ème jour--- */
  112.             'cell_R10C01': 'Pas de pluie',
  113.             'cell_R10C02': 'Pas de pluie',
  114.             'cell_R10C03': 'Pas de pluie',
  115.             'cell_R10C04': 'Pas de pluie',
  116.             'cell_R10C05': 'Pas de pluie',
  117.             'cell_R10C06': 'Pas de pluie',
  118.             /* ---11ème jour--- */
  119.             'cell_R11C01': 'Pas de pluie',
  120.             'cell_R11C02': 'Pas de pluie',
  121.             'cell_R11C03': 'Pas de pluie',
  122.             'cell_R11C04': 'Pas de pluie',
  123.             'cell_R11C05': 'Pas de pluie',
  124.             'cell_R11C06': 'Pas de pluie',
  125.             /* ---12ème jour--- */
  126.             'cell_R12C01': 'Pas de pluie',
  127.             'cell_R12C02': 'Pas de pluie',
  128.             'cell_R12C03': 'Pas de pluie',
  129.             'cell_R12C04': 'Pas de pluie',
  130.             'cell_R12C05': 'Pas de pluie',
  131.             'cell_R12C06': 'Pas de pluie',
  132.             /* ---13ème jour--- */
  133.             'cell_R13C01': 'Pas de pluie',
  134.             'cell_R13C02': 'Pas de pluie',
  135.             'cell_R13C03': 'Pas de pluie',
  136.             'cell_R13C04': 'Pas de pluie',
  137.             'cell_R13C05': 'Pas de pluie',
  138.             'cell_R13C06': 'Pas de pluie',
  139.             /* ---14ème jour--- */
  140.             'cell_R14C01': 'Pas de pluie',
  141.             'cell_R14C02': 'Pas de pluie',
  142.             'cell_R14C03': 'Pas de pluie',
  143.             'cell_R14C04': 'Pas de pluie',
  144.             'cell_R14C05': 'Pas de pluie',
  145.             'cell_R14C06': 'Pas de pluie',
  146.             /* ---15ème jour--- */
  147.             'cell_R15C01': 'Pas de pluie',
  148.             'cell_R15C02': 'Pas de pluie',
  149.             'cell_R15C03': 'Pas de pluie',
  150.             'cell_R15C04': 'Pas de pluie',
  151.             'cell_R15C05': 'Pas de pluie',
  152.             'cell_R15C06': 'Pas de pluie',
  153.             /* ---16ème jour--- */
  154.             'cell_R16C01': 'Pas de pluie',
  155.             'cell_R16C02': 'Pas de pluie',
  156.             'cell_R16C03': 'Pas de pluie',
  157.             'cell_R16C04': 'Pas de pluie',
  158.             'cell_R16C05': 'Pas de pluie',
  159.             'cell_R16C06': 'Pas de pluie',
  160.             /* ---17ème jour--- */
  161.             'cell_R17C01': 'Pas de pluie',
  162.             'cell_R17C02': 'Pas de pluie',
  163.             'cell_R17C03': 'Pas de pluie',
  164.             'cell_R17C04': 'Pas de pluie',
  165.             'cell_R17C05': 'Pas de pluie',
  166.             'cell_R17C06': 'Pas de pluie',
  167.             /* ---18ème jour--- */
  168.             'cell_R18C01': 'Pas de pluie',
  169.             'cell_R18C02': 'Pas de pluie',
  170.             'cell_R18C03': 'Pas de pluie',
  171.             'cell_R18C04': 'Pas de pluie',
  172.             'cell_R18C05': 'Pas de pluie',
  173.             'cell_R18C06': 'Pas de pluie',
  174.             /* ---19ème jour--- */
  175.             'cell_R19C01': 'Pas de pluie',
  176.             'cell_R19C02': 'Pas de pluie',
  177.             'cell_R19C03': 'Pas de pluie',
  178.             'cell_R19C04': 'Pas de pluie',
  179.             'cell_R19C05': 'Pas de pluie',
  180.             'cell_R19C06': 'Pas de pluie',
  181.             /* ---20ème jour--- */
  182.             'cell_R20C01': 'Pas de pluie',
  183.             'cell_R20C02': 'Pas de pluie',
  184.             'cell_R20C03': 'Pas de pluie',
  185.             'cell_R20C04': 'Pas de pluie',
  186.             'cell_R20C05': 'Pas de pluie',
  187.             'cell_R20C06': 'Pas de pluie',
  188.             /* ---21ème jour--- */
  189.             'cell_R21C01': 'Pas de pluie',
  190.             'cell_R21C02': 'Pas de pluie',
  191.             'cell_R21C03': 'Pas de pluie',
  192.             'cell_R21C04': 'Pas de pluie',
  193.             'cell_R21C05': 'Pas de pluie',
  194.             'cell_R21C06': 'Pas de pluie',
  195.             /* ---22ème jour--- */
  196.             'cell_R22C01': 'Pas de pluie',
  197.             'cell_R22C02': 'Pas de pluie',
  198.             'cell_R22C03': 'Pas de pluie',
  199.             'cell_R22C04': 'Pas de pluie',
  200.             'cell_R22C05': 'Pas de pluie',
  201.             'cell_R22C06': 'Pas de pluie',
  202.             /* ---23ème jour--- */
  203.             'cell_R23C01': 'Pas de pluie',
  204.             'cell_R23C02': 'Pas de pluie',
  205.             'cell_R23C03': 'Pas de pluie',
  206.             'cell_R23C04': 'Pas de pluie',
  207.             'cell_R23C05': 'Pas de pluie',
  208.             'cell_R23C06': 'Pas de pluie',
  209.             /* ---24ème jour--- */
  210.             'cell_R24C01': 'Pas de pluie',
  211.             'cell_R24C02': 'Pas de pluie',
  212.             'cell_R24C03': 'Pas de pluie',
  213.             'cell_R24C04': 'Pas de pluie',
  214.             'cell_R24C05': 'Pas de pluie',
  215.             'cell_R24C06': 'Pas de pluie',
  216.             /* ---25ème jour--- */
  217.             'cell_R25C01': 'Pas de pluie',
  218.             'cell_R25C02': 'Pas de pluie',
  219.             'cell_R25C03': 'Pas de pluie',
  220.             'cell_R25C04': 'Pas de pluie',
  221.             'cell_R25C05': 'Pas de pluie',
  222.             'cell_R25C06': 'Pas de pluie',
  223.             /* ---26ème jour--- */
  224.             'cell_R26C01': 'Pas de pluie',
  225.             'cell_R26C02': 'Pas de pluie',
  226.             'cell_R26C03': 'Pas de pluie',
  227.             'cell_R26C04': 'Pas de pluie',
  228.             'cell_R26C05': 'Pas de pluie',
  229.             'cell_R26C06': 'Pas de pluie',
  230.             /* ---27ème jour--- */
  231.             'cell_R27C01': 'Pas de pluie',
  232.             'cell_R27C02': 'Pas de pluie',
  233.             'cell_R27C03': 'Pas de pluie',
  234.             'cell_R27C04': 'Pas de pluie',
  235.             'cell_R27C05': 'Pas de pluie',
  236.             'cell_R27C06': 'Pas de pluie',
  237.             /* ---28ème jour--- */
  238.             'cell_R28C01': 'Pas de pluie',
  239.             'cell_R28C02': 'Pas de pluie',
  240.             'cell_R28C03': 'Pas de pluie',
  241.             'cell_R28C04': 'Pas de pluie',
  242.             'cell_R28C05': 'Pas de pluie',
  243.             'cell_R28C06': 'Pas de pluie',
  244.             /* ---29ème jour--- */
  245.             'cell_R29C01': 'Pas de pluie',
  246.             'cell_R29C02': 'Pas de pluie',
  247.             'cell_R29C03': 'Pas de pluie',
  248.             'cell_R29C04': 'Pas de pluie',
  249.             'cell_R29C05': 'Pas de pluie',
  250.             'cell_R29C06': 'Pas de pluie',
  251.             /* ---30ème jour--- */
  252.             'cell_R30C01': 'Pas de pluie',
  253.             'cell_R30C02': 'Pas de pluie',
  254.             'cell_R30C03': 'Pas de pluie',
  255.             'cell_R30C04': 'Pas de pluie',
  256.             'cell_R30C05': 'Pas de pluie',
  257.             'cell_R30C06': 'Pas de pluie',
  258.             /* ---31ème jour--- */
  259.             'cell_R31C01': 'Pas de pluie',
  260.             'cell_R31C02': 'Pas de pluie',
  261.             'cell_R31C03': 'Pas de pluie',
  262.             'cell_R31C04': 'Pas de pluie',
  263.             'cell_R31C05': 'Pas de pluie',
  264.             'cell_R31C06': 'Pas de pluie'
  265.          };
  266.          var areas = document.getElementsByTagName('area'); //on récupère toutes les cellules annotées
  267.          var width = 90; //largeur d'une cellule
  268.          var height = 36; //hauteur d'une cellule
  269.          var paddingX = 7; //écart horizontal entre deux cellules
  270.          var paddingY = 7; //écart vertical entre deux cellules
  271.          for (var el of areas) { //pour chaque cellule
  272.             var elid = el.id; //on récupère son id qui contient ses coordonnées sous la forme Ligne puis Colonne
  273.             el.setAttribute('data-descr', datas[elid]); //on ajoute le texte à afficher en faisant la correspondance entre le tableau de données et l'id de la cellule
  274.             var regex = /\d+/g; //expression régulière pour extraire les nombres contenus dans l'id de notre cellule
  275.             var arr = elid.match(regex); //on parse l'id selon notre expression régulière
  276.             if (arr.length > 1) { //si deux nombres sont bien trouvés (i.e. les coordonnées) car sait-on jamais peut-être que la personne n'est pas capable d'écrire correctement l'id dans le DOM HTML...
  277.                var row = parseInt(arr[0], 10); //on convertit la chaîne de caractères correspondants au numéro de ligne en type entier naturel
  278.                var col = parseInt(arr[1], 10); //on convertit la chaîne de caractères correspondants au numéro de colonne en type entier naturel
  279.                var offsetX = 146; //on définit le décélage horizontale de la première cellule par rapport à gauche de l'image
  280.                if (row < (firstWeekLength + 1)) { //on définit les décalages verticaux entre les semaines par rapport au haut de l'image, ici S1
  281.                   var offsetY = 152;
  282.                } else if (row < ( 7 * 1 + firstWeekLength + 1)) { //ici S2
  283.                   var offsetY = 152 + 29;
  284.                } else if (row < ( 7 * 2 + firstWeekLength + 1)) { //ici S3
  285.                   var offsetY = 152 + 29 * 2;
  286.                } else if (row < ( 7 * 3 + firstWeekLength + 1)) { //ici S4
  287.                   var offsetY = 152 + 29 * 3;
  288.                } else if (row < ( 7 * 4 + firstWeekLength + 1)) { //ici S5, pas envie de gérer les cas avec des mois contenant moins de 31 jours mais ça ne devrait pas poser de problème si le document est écrit correctement...
  289.                   var offsetY = 152 + 29 * 4;
  290.                } else { //sait-on jamais que la personne n'est pas capable d'écrire correctement l'id dans le DOM HTML ou ne sait pas qu'il ne peut y avoir plus de 31 jours dans un mois...
  291.                   return null;
  292.                }
  293.                var x0 = offsetX + (col - 1) * (width + paddingX); //coordonnées horizontales du coin supérieur gauche de la cellule
  294.                var x1 = x0 + width; //coordonnées horizontales du coin inférieur droit de la cellule
  295.                var y0 = offsetY + (row - 1) * (height + paddingY); //coordonnées varticales du coin supérieur gauche de la cellule
  296.                var y1 = y0 + height; //coordonnées varticales du coin inférieur droit de la cellule
  297.                el.setAttribute("coords", x0 + "," + y0 + "," + x1 + "," + y1); //zou on ajoute les coordonnées à la cellule
  298.             }
  299.          }
  300.       }
  301.       function bubblein(el) { //cette fonction crée une bulle d'annotation avec son annotation à partir de l'élément déclenchant l'évènement (i.e. "mouseOver" )
  302.          var div = document.createElement('div'); //création d'une div pour contenir l'annotation
  303.          div.setAttribute('class', 'bubble'); //on lui ajoute la classe CSS "bubble"
  304.          div.setAttribute('id', el.id + '_bubble'); //on lui ajoute une id pour pouvoir y accèder
  305.          var txt = el.dataset.descr; //on récupère le texte d'annotation à partir de l'attribut "data-set" de l'élément déclenchant l'évènement
  306.          div.innerHTML = txt; //on ajoute le texte d'annotation à la div
  307.          document.body.appendChild(div); //on ajoute la div au document
  308.       }
  309.       function bubbleout(el) { //cette fonction supprime la bulle d'annotation créée lorsque la souris ne survole plus la cellule en question
  310.          document.body.removeChild(document.getElementById(el.id + '_bubble')); //on retire la div du document grâce à son id préalablement définie dans la fonction "bubblein()"
  311.       }
  312.       function bubblepos(posi) { //cette fonction gère la position de la bulle d'annotation
  313.          var el = document.getElementsByClassName('bubble')[0]; //on récupère toutes les bulles d'annotation et on ne garde que la première (normalement il n'y en a qu'une simultanément...)
  314.          var posX = posi.clientX + 8 + window.scrollX; //on calcule la position horizontale de la bulle au niveau du curseur de la souris + un décalage de 8px vers la droite + l'éventuel décalage causé par le scroll du document
  315.          var posY = posi.clientY - el.offsetHeight + window.scrollY; //on calcule la position verticale de la bulle au niveau du curseur de la souris - la hauteur de notre div vers le haut + l'éventuel décalage causé par le scroll du document
  316.          el.style.left = posX +"px"; //on modifie la position horizontale en conséquence
  317.          el.style.top = posY +"px"; //on modifie la position verticale en conséquence
  318.       }
  319.    </script>
  320. </head>
  321. <body onLoad="coords()">
  322.    <p style="text-align: center;">
  323.       <a href="Tableau_Temperatures.html"><span style="color: white;"><img style="width: 54px; height: 54px;" alt="Icone Vent" src="../../Icones/Thermometre.png"></span></a>&nbsp;&nbsp;&nbsp;
  324.       <a href="Tableau_Vent.html"><img style="width: 70px; height: 42px;" alt="Icone Vent" src="../../Icones/Vent.png"></a>&nbsp;&nbsp; &nbsp;
  325.       <a href="Tableau_Humidite.html"><img style="width: 32px; height: 50px;" alt="Goutte" src="../../Icones/Humidite.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  326.       <a href="Tableau_Soleil.html"><img style="width: 54px; height: 54px;" src="../../Icones/Soleil.png" alt="Icone Soleil"></a>&nbsp; &nbsp;&nbsp;
  327.       <a href="Tableau_Pressions.html"><img style="width: 54px; height: 54px;" alt="Icone Pression" src="../../Icones/Pression.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  328.       <a href="../../index.html"><span style="text-decoration: underline;"><img style="width: 54px; height: 54px;" alt="Icone accueil" src="../../Icones/Accueil.png"></span></a>
  329.    </p>
  330.    <p style="text-align: center;"><span style="color: white;">Pour voir les différents tableaux, cliquez sur les icônes ci-dessus.</span><br></p>
  331.    <p style="text-align: center;"><span style="color: white;">Pour voir les heures de pluie, passez la souris au dessus des cases avec un petit triangle rouge.</span><br></p>
  332.    <div style="text-align: center;">
  333.       <img src="Tableau_Pluie.jpg" alt="Pluviométrie" usemap="#pluviomap">
  334.       <map name="pluviomap" onMousemove="bubblepos(event)">
  335.          <!-- 1er jour -->
  336.          <area shape="rect" coords="0,0,0,0" id="cell_R01C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  337.          <area shape="rect" coords="0,0,0,0" id="cell_R01C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  338.          <area shape="rect" coords="0,0,0,0" id="cell_R01C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  339.          <area shape="rect" coords="0,0,0,0" id="cell_R01C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  340.          <area shape="rect" coords="0,0,0,0" id="cell_R01C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  341.          <area shape="rect" coords="0,0,0,0" id="cell_R01C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  342.          <!-- 2ème jour -->
  343.          <area shape="rect" coords="0,0,0,0" id="cell_R02C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  344.          <area shape="rect" coords="0,0,0,0" id="cell_R02C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  345.          <area shape="rect" coords="0,0,0,0" id="cell_R02C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  346.          <area shape="rect" coords="0,0,0,0" id="cell_R02C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  347.          <area shape="rect" coords="0,0,0,0" id="cell_R02C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  348.          <area shape="rect" coords="0,0,0,0" id="cell_R02C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  349.          <!-- 3ème jour -->
  350.          <area shape="rect" coords="0,0,0,0" id="cell_R03C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  351.          <area shape="rect" coords="0,0,0,0" id="cell_R03C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  352.          <area shape="rect" coords="0,0,0,0" id="cell_R03C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  353.          <area shape="rect" coords="0,0,0,0" id="cell_R03C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  354.          <area shape="rect" coords="0,0,0,0" id="cell_R03C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  355.          <area shape="rect" coords="0,0,0,0" id="cell_R03C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  356.          <!-- 4ème jour -->
  357.          <area shape="rect" coords="0,0,0,0" id="cell_R04C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  358.          <area shape="rect" coords="0,0,0,0" id="cell_R04C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  359.          <area shape="rect" coords="0,0,0,0" id="cell_R04C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  360.          <area shape="rect" coords="0,0,0,0" id="cell_R04C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  361.          <area shape="rect" coords="0,0,0,0" id="cell_R04C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  362.          <area shape="rect" coords="0,0,0,0" id="cell_R04C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  363.          <!-- 5ème jour -->
  364.          <area shape="rect" coords="0,0,0,0" id="cell_R05C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  365.          <area shape="rect" coords="0,0,0,0" id="cell_R05C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  366.          <area shape="rect" coords="0,0,0,0" id="cell_R05C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  367.          <area shape="rect" coords="0,0,0,0" id="cell_R05C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  368.          <area shape="rect" coords="0,0,0,0" id="cell_R05C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  369.          <area shape="rect" coords="0,0,0,0" id="cell_R05C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  370.          <!-- 6ème jour -->
  371.          <area shape="rect" coords="0,0,0,0" id="cell_R06C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  372.          <area shape="rect" coords="0,0,0,0" id="cell_R06C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  373.          <area shape="rect" coords="0,0,0,0" id="cell_R06C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  374.          <area shape="rect" coords="0,0,0,0" id="cell_R06C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  375.          <area shape="rect" coords="0,0,0,0" id="cell_R06C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  376.          <area shape="rect" coords="0,0,0,0" id="cell_R06C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  377.          <!-- 7ème jour -->
  378.          <area shape="rect" coords="0,0,0,0" id="cell_R07C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  379.          <area shape="rect" coords="0,0,0,0" id="cell_R07C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  380.          <area shape="rect" coords="0,0,0,0" id="cell_R07C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  381.          <area shape="rect" coords="0,0,0,0" id="cell_R07C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  382.          <area shape="rect" coords="0,0,0,0" id="cell_R07C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  383.          <area shape="rect" coords="0,0,0,0" id="cell_R07C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  384.          <!-- 8ème jour -->
  385.          <area shape="rect" coords="0,0,0,0" id="cell_R08C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  386.          <area shape="rect" coords="0,0,0,0" id="cell_R08C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  387.          <area shape="rect" coords="0,0,0,0" id="cell_R08C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  388.          <area shape="rect" coords="0,0,0,0" id="cell_R08C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  389.          <area shape="rect" coords="0,0,0,0" id="cell_R08C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  390.          <area shape="rect" coords="0,0,0,0" id="cell_R08C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  391.          <!-- 9ème jour -->
  392.          <area shape="rect" coords="0,0,0,0" id="cell_R09C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  393.          <area shape="rect" coords="0,0,0,0" id="cell_R09C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  394.          <area shape="rect" coords="0,0,0,0" id="cell_R09C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  395.          <area shape="rect" coords="0,0,0,0" id="cell_R09C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  396.          <area shape="rect" coords="0,0,0,0" id="cell_R09C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  397.          <area shape="rect" coords="0,0,0,0" id="cell_R09C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  398.          <!-- 10ème jour -->
  399.          <area shape="rect" coords="0,0,0,0" id="cell_R10C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  400.          <area shape="rect" coords="0,0,0,0" id="cell_R10C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  401.          <area shape="rect" coords="0,0,0,0" id="cell_R10C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  402.          <area shape="rect" coords="0,0,0,0" id="cell_R10C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  403.          <area shape="rect" coords="0,0,0,0" id="cell_R10C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  404.          <area shape="rect" coords="0,0,0,0" id="cell_R10C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  405.          <!-- 11ème jour -->
  406.          <area shape="rect" coords="0,0,0,0" id="cell_R11C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  407.          <area shape="rect" coords="0,0,0,0" id="cell_R11C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  408.          <area shape="rect" coords="0,0,0,0" id="cell_R11C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  409.          <area shape="rect" coords="0,0,0,0" id="cell_R11C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  410.          <area shape="rect" coords="0,0,0,0" id="cell_R11C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  411.          <area shape="rect" coords="0,0,0,0" id="cell_R11C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  412.          <!-- 12ème jour -->
  413.          <area shape="rect" coords="0,0,0,0" id="cell_R12C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  414.          <area shape="rect" coords="0,0,0,0" id="cell_R12C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  415.          <area shape="rect" coords="0,0,0,0" id="cell_R12C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  416.          <area shape="rect" coords="0,0,0,0" id="cell_R12C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  417.          <area shape="rect" coords="0,0,0,0" id="cell_R12C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  418.          <area shape="rect" coords="0,0,0,0" id="cell_R12C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  419.          <!-- 13ème jour -->
  420.          <area shape="rect" coords="0,0,0,0" id="cell_R13C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  421.          <area shape="rect" coords="0,0,0,0" id="cell_R13C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  422.          <area shape="rect" coords="0,0,0,0" id="cell_R13C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  423.          <area shape="rect" coords="0,0,0,0" id="cell_R13C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  424.          <area shape="rect" coords="0,0,0,0" id="cell_R13C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  425.          <area shape="rect" coords="0,0,0,0" id="cell_R13C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  426.          <!-- 14ème jour -->
  427.          <area shape="rect" coords="0,0,0,0" id="cell_R14C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  428.          <area shape="rect" coords="0,0,0,0" id="cell_R14C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  429.          <area shape="rect" coords="0,0,0,0" id="cell_R14C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  430.          <area shape="rect" coords="0,0,0,0" id="cell_R14C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  431.          <area shape="rect" coords="0,0,0,0" id="cell_R14C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  432.          <area shape="rect" coords="0,0,0,0" id="cell_R14C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  433.          <!-- 15ème jour -->
  434.          <area shape="rect" coords="0,0,0,0" id="cell_R15C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  435.          <area shape="rect" coords="0,0,0,0" id="cell_R15C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  436.          <area shape="rect" coords="0,0,0,0" id="cell_R15C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  437.          <area shape="rect" coords="0,0,0,0" id="cell_R15C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  438.          <area shape="rect" coords="0,0,0,0" id="cell_R15C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  439.          <area shape="rect" coords="0,0,0,0" id="cell_R15C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  440.          <!-- 16ème jour -->
  441.          <area shape="rect" coords="0,0,0,0" id="cell_R16C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  442.          <area shape="rect" coords="0,0,0,0" id="cell_R16C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  443.          <area shape="rect" coords="0,0,0,0" id="cell_R16C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  444.          <area shape="rect" coords="0,0,0,0" id="cell_R16C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  445.          <area shape="rect" coords="0,0,0,0" id="cell_R16C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  446.          <area shape="rect" coords="0,0,0,0" id="cell_R16C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  447.          <!-- 17ème jour -->
  448.          <area shape="rect" coords="0,0,0,0" id="cell_R17C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  449.          <area shape="rect" coords="0,0,0,0" id="cell_R17C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  450.          <area shape="rect" coords="0,0,0,0" id="cell_R17C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  451.          <area shape="rect" coords="0,0,0,0" id="cell_R17C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  452.          <area shape="rect" coords="0,0,0,0" id="cell_R17C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  453.          <area shape="rect" coords="0,0,0,0" id="cell_R17C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  454.          <!-- 18ème jour -->
  455.          <area shape="rect" coords="0,0,0,0" id="cell_R18C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  456.          <area shape="rect" coords="0,0,0,0" id="cell_R18C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  457.          <area shape="rect" coords="0,0,0,0" id="cell_R18C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  458.          <area shape="rect" coords="0,0,0,0" id="cell_R18C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  459.          <area shape="rect" coords="0,0,0,0" id="cell_R18C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  460.          <area shape="rect" coords="0,0,0,0" id="cell_R18C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  461.          <!-- 19ème jour -->
  462.          <area shape="rect" coords="0,0,0,0" id="cell_R19C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  463.          <area shape="rect" coords="0,0,0,0" id="cell_R19C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  464.          <area shape="rect" coords="0,0,0,0" id="cell_R19C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  465.          <area shape="rect" coords="0,0,0,0" id="cell_R19C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  466.          <area shape="rect" coords="0,0,0,0" id="cell_R19C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  467.          <area shape="rect" coords="0,0,0,0" id="cell_R19C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  468.          <!-- 20ème jour -->
  469.          <area shape="rect" coords="0,0,0,0" id="cell_R20C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  470.          <area shape="rect" coords="0,0,0,0" id="cell_R20C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  471.          <area shape="rect" coords="0,0,0,0" id="cell_R20C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  472.          <area shape="rect" coords="0,0,0,0" id="cell_R20C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  473.          <area shape="rect" coords="0,0,0,0" id="cell_R20C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  474.          <area shape="rect" coords="0,0,0,0" id="cell_R20C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  475.          <!-- 21ème jour -->
  476.          <area shape="rect" coords="0,0,0,0" id="cell_R21C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  477.          <area shape="rect" coords="0,0,0,0" id="cell_R21C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  478.          <area shape="rect" coords="0,0,0,0" id="cell_R21C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  479.          <area shape="rect" coords="0,0,0,0" id="cell_R21C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  480.          <area shape="rect" coords="0,0,0,0" id="cell_R21C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  481.          <area shape="rect" coords="0,0,0,0" id="cell_R21C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  482.          <!-- 22ème jour -->
  483.          <area shape="rect" coords="0,0,0,0" id="cell_R22C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  484.          <area shape="rect" coords="0,0,0,0" id="cell_R22C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  485.          <area shape="rect" coords="0,0,0,0" id="cell_R22C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  486.          <area shape="rect" coords="0,0,0,0" id="cell_R22C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  487.          <area shape="rect" coords="0,0,0,0" id="cell_R22C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  488.          <area shape="rect" coords="0,0,0,0" id="cell_R22C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  489.          <!-- 23ème jour -->
  490.          <area shape="rect" coords="0,0,0,0" id="cell_R23C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  491.          <area shape="rect" coords="0,0,0,0" id="cell_R23C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  492.          <area shape="rect" coords="0,0,0,0" id="cell_R23C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  493.          <area shape="rect" coords="0,0,0,0" id="cell_R23C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  494.          <area shape="rect" coords="0,0,0,0" id="cell_R23C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  495.          <area shape="rect" coords="0,0,0,0" id="cell_R23C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  496.          <!-- 24ème jour -->
  497.          <area shape="rect" coords="0,0,0,0" id="cell_R24C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  498.          <area shape="rect" coords="0,0,0,0" id="cell_R24C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  499.          <area shape="rect" coords="0,0,0,0" id="cell_R24C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  500.          <area shape="rect" coords="0,0,0,0" id="cell_R24C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  501.          <area shape="rect" coords="0,0,0,0" id="cell_R24C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  502.          <area shape="rect" coords="0,0,0,0" id="cell_R24C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  503.          <!-- 25ème jour -->
  504.          <area shape="rect" coords="0,0,0,0" id="cell_R25C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  505.          <area shape="rect" coords="0,0,0,0" id="cell_R25C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  506.          <area shape="rect" coords="0,0,0,0" id="cell_R25C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  507.          <area shape="rect" coords="0,0,0,0" id="cell_R25C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  508.          <area shape="rect" coords="0,0,0,0" id="cell_R25C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  509.          <area shape="rect" coords="0,0,0,0" id="cell_R25C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  510.          <!-- 26ème jour -->
  511.          <area shape="rect" coords="0,0,0,0" id="cell_R26C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  512.          <area shape="rect" coords="0,0,0,0" id="cell_R26C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  513.          <area shape="rect" coords="0,0,0,0" id="cell_R26C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  514.          <area shape="rect" coords="0,0,0,0" id="cell_R26C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  515.          <area shape="rect" coords="0,0,0,0" id="cell_R26C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  516.          <area shape="rect" coords="0,0,0,0" id="cell_R26C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  517.          <!-- 27ème jour -->
  518.          <area shape="rect" coords="0,0,0,0" id="cell_R27C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  519.          <area shape="rect" coords="0,0,0,0" id="cell_R27C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  520.          <area shape="rect" coords="0,0,0,0" id="cell_R27C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  521.          <area shape="rect" coords="0,0,0,0" id="cell_R27C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  522.          <area shape="rect" coords="0,0,0,0" id="cell_R27C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  523.          <area shape="rect" coords="0,0,0,0" id="cell_R27C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  524.          <!-- 28ème jour -->
  525.          <area shape="rect" coords="0,0,0,0" id="cell_R28C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  526.          <area shape="rect" coords="0,0,0,0" id="cell_R28C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  527.          <area shape="rect" coords="0,0,0,0" id="cell_R28C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  528.          <area shape="rect" coords="0,0,0,0" id="cell_R28C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  529.          <area shape="rect" coords="0,0,0,0" id="cell_R28C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  530.          <area shape="rect" coords="0,0,0,0" id="cell_R28C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  531.          <!-- 29ème jour -->
  532.          <area shape="rect" coords="0,0,0,0" id="cell_R29C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  533.          <area shape="rect" coords="0,0,0,0" id="cell_R29C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  534.          <area shape="rect" coords="0,0,0,0" id="cell_R29C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  535.          <area shape="rect" coords="0,0,0,0" id="cell_R29C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  536.          <area shape="rect" coords="0,0,0,0" id="cell_R29C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  537.          <area shape="rect" coords="0,0,0,0" id="cell_R29C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  538.          <!-- 30ème jour -->
  539.          <area shape="rect" coords="0,0,0,0" id="cell_R30C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  540.          <area shape="rect" coords="0,0,0,0" id="cell_R30C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  541.          <area shape="rect" coords="0,0,0,0" id="cell_R30C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  542.          <area shape="rect" coords="0,0,0,0" id="cell_R30C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  543.          <area shape="rect" coords="0,0,0,0" id="cell_R30C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  544.          <area shape="rect" coords="0,0,0,0" id="cell_R30C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  545.          <!-- 31ème jour -->
  546.          <area shape="rect" coords="0,0,0,0" id="cell_R31C01" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  547.          <area shape="rect" coords="0,0,0,0" id="cell_R31C02" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  548.          <area shape="rect" coords="0,0,0,0" id="cell_R31C03" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  549.          <area shape="rect" coords="0,0,0,0" id="cell_R31C04" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  550.          <area shape="rect" coords="0,0,0,0" id="cell_R31C05" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  551.          <area shape="rect" coords="0,0,0,0" id="cell_R31C06" onMouseover="bubblein(this)" onMousemove="bubblepos(event)" onMouseout="bubbleout(this)">
  552.       </map>
  553.    </div>
  554. </body>
  555. </html>


 
Comme dis, tu feras attention, je suis reparti de mon code pour y ajouter les modifs. Au passage j'ai viré la gestion des bordures des images qui était dans chaque élément img pour la mettre en en-tête dans la partie css qui sert à ça. Normalement tu dois utiliser le moins possible l'attribut style et mettre le maximum dans l'en-tête ou même dans une feuille css à part.
Il faut évidemment remettre tes textes d'annotation.
La nouvelle ligne à modifier chaque mois est :

Code :
  1. var firstWeekLength = 4; //on définit le nombre de jours dans la première semaine du mois


 
PS : pour tes modifications, qu'utilises-tu comme logiciel ? Tu devrais utiliser un éditeur qui permet de mettre en forme le code parce que là c'était illisible... C'est quand même plus facile à lire avec des indentations et des retours à la ligne qui ne sont pas faits en plein milieu d'éléments. Perso j'utilise Notepad++ mais il en existe plein.
 
 :hello:

Message cité 1 fois
Message édité par MaybeEijOrNot le 10-02-2018 à 13:16:04

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 10-02-2018 à 15:47:18    

Merci encore,
 
Pour la virgule de fin, j'ai vu effectivement que tu n'en avait pas mis, et comme j'ai fais des copier/coller, j'ai pris la virgule avec.
Je m'en suis aperçu, comme ça ne posait pas de problème, je l'ai laissé.
 
Quant à l'éditeur de texte, j'utilise aussi "Notepad++" dans mon logiciel "GraphWearther".
 
J'utilise "Kompozer" pour faire mon site, si je copie un texte dans un autre éditeur de texte, quand je le colle dans "Kompozer", il se remet comme tu as vu.
J'ai beau modifier, dès que je fais enregistrer, il ne tient pas en compte ma mise en page.
Et encore,là, la notation est seule dans la ligne, il y des fois ou elle se met n'importe ou dans une ligne


Message édité par guy7285 le 10-02-2018 à 15:50:07

---------------
http://www.meteo-clopiniere-sicaudiere.fr
Reply

Marsh Posté le 05-04-2018 à 13:38:52    

Bonjour,
Excuse- moi de te déranger, mais que faut-il changer pour le mois d'avril ?
Comme les semaines n'ont pas le même nombre de jours, ça fosse tout pour avril.
Je ne m'en suis pas aperçu en mars car le 1er jour était le même (jeudi) alors que en avril, c'est un dimanche.
 
Ce doit être l'espace (il n'est pas le même) ?
 
http://meteo-clopiniere-sicaudiere [...] Pluie.html
Merci de ton aide
Cordialement


Message édité par guy7285 le 05-04-2018 à 13:45:15

---------------
http://www.meteo-clopiniere-sicaudiere.fr
Reply

Marsh Posté le 05-04-2018 à 14:11:04    

MaybeEijOrNot a écrit :

La nouvelle ligne à modifier chaque mois est :

Code :
  1. var firstWeekLength = 4; //on définit le nombre de jours dans la première semaine du mois



 
En avril le mois commence par une semaine de 1 jour, on remplace-donc par :

Code :
  1. var firstWeekLength = 1; //on définit le nombre de jours dans la première semaine du mois


---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 05-04-2018 à 17:59:14    

Ok, d'accord !!!
Je ne pensais pas que cela était si simple. je n'ai pas osé changé
Merci encore


---------------
http://www.meteo-clopiniere-sicaudiere.fr
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed