stefane26 | Bonjour
totalement novice dans la programmation d'un site internet, j'ai réussi quelques "prouesses" afin de créer mon site en feuilletant divers forums
Mon site est un site amateur météo, sur la page d'accueil, un tableau avec les principales données. En passant la souris sur une celulle du tableau apparait le graphique correspondant. Mon soucis est quece graphique s'affiche sous ma page et devient donc invisible. Lorsqu'on déplace la souris vers une celulle à doite du tableau on voit apparaitre un morceau du graphique (par dessous ma page principale et par dessus mon fond de page en pourtour)
J'utilise poue cela une feuille CSS, un script JAVASCRIPT pour créer la fonction "showtrail"
l'adresse du site est : www.meteo-montelo.fr
je vous joins mes codes :
la feuille CSS :
ma page en PHP :
Code :
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
- <head>
- <title>Météo de Montélimar (Drôme)</title>
- <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
- <meta HTTP-EQUIV="Refresh" CONTENT="60" />
- <meta name="author" content="stephane bec" />
- <meta name="language" content="fr" />
- <meta name="description" content="station meteo amateur en direct de montélimar" />
- <meta name="keywords" content="meteo, montelimar, montelo, stephane, bec, davis, vantage" />
- <link type="text/css" rel="stylesheet" href="css/style.css" />
- </head>
- <script language='javascript' src='filesearchhover.js' type='text/javascript'>
- </script>
- <body>
- <?php include("menu.php" ); ?>
- <div id="right">
- <h1>Bienvenue sur le site météo amateur de Montélimar</h1>
- <p align="justify">Ne vous est-il jamais arrivé de dire :</br>
- <i>"Oh ! cette année qu'est ce qu'il a fait comme pluie !</i> ou bien :<i>"On a eu un été pourri !"</i></br>
- <b>Et bien, grâce à ce site, vous pourrez avoir la certitude de vos propos.</b></br></br>
- Situé sur la commune de <b>Montélimar</b> dans le département de la Drôme, ce site retransmet en temps réel les relevés météorologiques issus d'une
- station météo automatique <b>Vantage Pro 2</b> sans fil de <i>Davis Instruments</i>, relevés qui sont ensuite traités par le logiciel <b>WsWIN</b> de <i>Werner KRENN</i>.</br></br>
- Ce site n'a donc pas la prétention de faire des prévisions (pour cela, vous trouverez sur la toile des sites de vrais professionnels), son but est en premier lieu de connaitre les
- conditions météo à l'instant "T" mais aussi et surtout de garder trace des conditions passées, et ce, depuis le <b><i>26 août 2007</i></b>, date de la mise en service de la station.</br></br>
- Les données sont mises à jour toutes les minutes, sauf problèmes éventuels de transmission.</br>
- Cette page se rafraichit automatiquement</p></br>
- <h1>Le temps en ce moment à Montélimar (Drôme - 26) en quelques chiffres</h1>
- </br><table border="1" width="780" height="120" align="center">
- <tr>
- <td width="156" valign="top">
- <center><font size="3px" color="#2e5a92"><b>Mise à jour</b></font></center>
- <span class="tableau_valeur">
- <?php
- echo "<center>$heure_releve:$minute_releve</br></center>"
- ?>
- </span>
- <font color="black" size="1px"><center>
- </br>
- <font color="black" size ="2px">
- <b>
- <?php
- echo "<center>$jour_texte_releve</br>";
- echo "$numero_jour_releve $mois_texte_releve $annee</center>"
- ?>
- </b>
- </font>
- </td>
- <td width="156" valign="top" onmouseover="showtrail('./wswin/mini_currentt.gif','','',1,0,0);" onmouseout="hidetrail();">
- <center><font size="3px" color="#2e5a92"><b>Température Ext.</b></font></center>
- <span class="tableau_valeur">
- <?php
- echo "<center>$tempE</br></center>";
- ?>
- </span>
- <font color="black" size="1px"><center>
- Variation en 15 min :
- <b>
- <?php
- echo "$tempEchangement15mn"
- ?>
- </b>
- </br>
- <font size="2px"><b>min</b>(
- <?php
- echo "$tempEmin0h_heure"
- ?>
- ) :
- <font color="blue"><b>
- <?php
- echo "$tempEmin0h"
- ?>
- </b></font>
- </br>
- <b>max</b>(
- <?php
- echo "$tempEmax0h_heure"
- ?>
- ) :
- <font color="red"><b>
- <?php
- echo "$tempEmax0h"
- ?>
- </b></font>
- </center></font></font>
- </td>
- <td width="156" valign="top" onmouseover="showtrail('./wswin/mini_currentf.gif','','',1,0,0);" onmouseout="hidetrail();">
- <center><font size="3px" color="#2e5a92"><b>Humidité Ext.</b></font></center>
- <span class="tableau_valeur">
- <?php
- echo "<center>$humE</br></center>";
- ?>
- </span>
- <font color="black" size="1px"><center>
- </br>
- <font size="2px"><b>min</b>(
- <?php
- echo "$humEmin0h_heure"
- ?>
- ) :
- <font color="blue"><b>
- <?php
- echo "$humEmin0h"
- ?>
- </b></font>
- </br>
- <b>max</b>(
- <?php
- echo "$humEmax0h_heure"
- ?>
- ) :
- <font color="red"><b>
- <?php
- echo "$humEmax0h"
- ?>
- </b></font>
- </center></font></font>
- </td>
- <td width="156" valign="top" onmouseover="showtrail('./wswin/mini_currentv.gif','','',1,0,0);" onmouseout="hidetrail();">
- <center><font size="3px" color="#2e5a92"><b>Vent</b></font></center>
- <span class="tableau_valeur">
- <?php
- echo "<center>$vitesse_vent</br>";
- ?>
- <font size="2px" color="#000000">
- <?php
- echo "$vitesse_vent_bft</center>";
- ?>
- </font>
- </span>
- <font color="black" size="1px"><center>
- <font size="2px">
- <?php
- echo"$dir_vent_texte";
- echo "($dir_vent)</br>";
- echo "$force_vent"
- ?>
- </td>
- <td width="156" valign="top" onmouseover="showtrail('./wswin/mini_currentp.gif','','',1,0,0);" onmouseout="hidetrail();">
- <center><font size="3px" color="#2e5a92"><b>Pluie</b></font></center>
- <span class="tableau_valeur">
- <?php
- echo "<center>$intensite_pluie</br>";
- ?>
- <font color="black" size="1px"><center>
- </br>
- <font size="2px"><b>Cette heure :</b>
- <?php
- echo "$quantite_pluie1h"
- ?>
- </br>
- <b>Ce jour :</b>
- <?php
- echo "$quantite_pluie_jour"
- ?>
- </center></font></font>
- </td>
- </tr>
- <tr>
- <td width="156" valign="top">
- <center><font size="3px" color="#2e5a92"><b>Tendance</b></font></center>
- <span class="tableau_valeur">
- <?php
- echo "<center>$previ</br>";
- echo '<img src="../wswin/'.$icone_meteo.'" width=80 height=63></center></span>'
- ?>
- </td>
- <td width="156" valign="top" onmouseover="showtrail('./wswin/mini_currentd.gif','','',1,0,0);" onmouseout="hidetrail();">
- <center><font size="3px" color="#2e5a92"><b>Pression</b></font></center>
- <span class="tableau_valeur">
- <?php
- echo "<center>$barE</br></center>";
- ?>
- </span>
- <font color="black" size="1px"><center>
- <font size="2px"><b>Tendance :</b></br>
- <?php
- echo "$barE_var1h</br>$barE_var6h</br>$bar_tendance"
- ?>
- </td>
- <td width="156">
-
- </td>
- <td width="156">
- <p align="center"> </p>
- </td>
- <td width="156">
- <p align="center"> </p>
- </td>
- </tr>
- <tr>
- <td colspan="5" valign="top">
- <center><font size="3px" color="#2e5a92"><b>Prévision de la station Vantage</b></br></font></center>
- <center><font size="4px" color="#F25F2A"><b>
- <span class="tableau_valeur">
- <?php
- echo "$previVP2"
- ?>
- </b></font>
- </center>
- </span>
- </td>
- </tr>
- </table></br></br>
- <h1>Le temps en france et dans le monde en continu...</h1>
- <table border="0" width="780" height="120" align="center">
- <td width="534" valign="center" align="left">
- <p><script type="text/javascript" src="http://www.meteo-world.com/rss/javascript1.php"></script></p>
- </td>
- <td width="82" valign="top" align="center"></br></br>
- <font size="1px">Prévisions
- <a href="http://www.meteociel.com/prevision/genprev1.php" title="Prévision de Météociel" target="_blank"></br>
- <IMG src="http://www.meteociel.fr/prevision/mini/prev1_t.png" width=80 height=81> </a>
- <a href="http://www.sat24.com/frame.php?html=view&country=fr&sat=ir" title="Couverture nuageuse" target="_blank">
- <IMG src="http://www.buienradar.nl/images.aspx?jaar=-3&bliksem=0&voor=&soort=satmeteox&tijdid=20085201927" width=80 height=81></br></a>
- Nuages
- </font>
- </td>
- <td width="82" valign="top" align="center"></br></br>
- <font size="1px">Vigi-crues
- <a href="http://www.vigicrues.ecologie.gouv.fr/" title="Carte de vigilance des crues" target="_blank">
- <IMG src="http://www.vigicrues.ecologie.gouv.fr/ftp/cruemax.png" width=80 height=81> </a>
- <a href="http://www.meteox.fr/gmap.aspx?zoom=5&lat=47.9605023889151&lon=2.900390625" title="Carte des pluies" target="_blank">
- <IMG src="http://www.meteox.nl/meteox-ani120phone.gif" width=80 height=81> </a>
- Pluie
- </font>
- </td>
- <td width="82" valign="top" align="center"></br></br>
- <font size="1px">Vigilance
- <a href="http://www.meteofrance.com/vigilance/index.html" title="Carte de vigilance Météo-France" target="_blank"></br>
- <IMG src="http://www.meteofrance.com/vigilance/cartes/derniers/mn.gif" width=80 height=81> </a>
- <a href="http://www.blitzortung.org/DF/Webpages/index.php?station=2&mode=0&map=7&lang=f" title="Carte des orages" target="_blank">
- <IMG src="http://www.keraunos.org/accueil-suivi-orages-france.png" width=80 height=81></br></a>
- Orages
- </font></td>
- </table></br></br>
- <p><font size="1px" color="red"><center><b><i><u>AVERTISSEMENT</u> :</br>Les données météo publiées sur ce site sont issues d'une station météo amateur et personnelle.
- Elles ne sont données qu'à titre indicatif</br>et ne peuvent en aucun cas être utilisées pour garantir la protection ni des personnes, ni de biens ou à toutes autres fins.</i></b></center></font> </p>
- <table border="0" width="780" align="center">
- <td width="780" align="right">
- <p align="right"><a href="http://www.xiti.com/xiti.asp?s=387316" title="WebAnalytics" target="_blank">
- <script type="text/javascript">
- <!--
- Xt_param = 's=387316&p=';
- try {Xt_r = top.document.referrer;}
- catch(e) {Xt_r = document.referrer; }
- Xt_h = new Date();
- Xt_i = '<img width="39" height="25" border="0" alt="" ';
- Xt_i += 'src="http://logv9.xiti.com/hit.xiti?'+Xt_param;
- Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
- if(parseFloat(navigator.appVersion)>=4)
- {Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
- document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
- //-->
- </script>
- <noscript>
- Mesure d'audience ROI statistique webanalytics par <img width="39" height="25" src="http://logv9.xiti.com/hit.xiti?s=387316&p=" alt="WebAnalytics" />
- </noscript></a></p>
- </td>
- </table>
- </div>
- <span class="spacer">-</span>
- </div>
- <?php include("footer.php" ); ?>
- </body>
- </html>
|
et le code JAVASCRIPT :
Code :
- /*
- Simple Image Trail script- By JavaScriptKit.com
- Visit http://www.javascriptkit.com for this script and more
- This notice must stay intact
- */
- var itemWidth = 450;
- var offsetfrommouse=[15,15]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
- var displayduration=0; //duration in seconds image should remain visible. 0 for always.
- var currentimageheight = 201; // maximum image size.
- if (document.getElementById || document.all){
- document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:0px;width:1px;height:1px">');
- document.write('<img src="http://lacombe.dyndns.org/meteo/hourglass.jpg"> </div>');
- }
- function gettrailobj(){
- if (document.getElementById)
- return document.getElementById("trailimageid" ).style
- else if (document.all)
- return document.all.trailimagid.style
- }
- function gettrailobjnostyle(){
- if (document.getElementById)
- return document.getElementById("trailimageid" )
- else if (document.all)
- return document.all.trailimagid
- }
- function truebody(){
- return (!window.opera && document.compatMode && document.compatMode!="BackCompat" )? document.documentElement : document.body
- }
- function showtrail(imagename,title,description,showthumb,height, newItemWidth){
- if (newItemWidth != false) {
- itemWidth = newItemWidth;
- }
- if (height > 0){
- currentimageheight = height;
- }
- document.onmousemove=followmouse;
- cameraHTML = '';
- newHTML = '<div>';
- newHTML = newHTML + '<span>' + title + '</span><div class="borderbot"></div>';
- if (showthumb > 0){
- newHTML = newHTML + '<div style="border: 1px solid #000000;" align="center"><img src="' + imagename + '" border="0"></div>';
- }
- //newHTML = newHTML + '</div>';
- gettrailobjnostyle().innerHTML = newHTML;
- gettrailobj().visibility="visible";
- }
- function showhtml(newHtml,height) {
- document.onmousemove=followmouse;
- newHtml = '<div style="border: 1px solid #000000;background-color:#FFFFFF;padding:5px" align="left">' + newHtml + '<div>';
- gettrailobjnostyle().innerHTML = newHtml;
- gettrailobj().visibility="visible";
- }
- function hidetrail(){
- gettrailobj().visibility="hidden"
- document.onmousemove=""
- gettrailobj().left="-500px"
- }
- function followmouse(e){
- var xcoord=offsetfrommouse[0]
- var ycoord=offsetfrommouse[1]
- var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
- var docheight=document.all? Math.min(truebody().scrollHeight, truebody().clientHeight) : Math.min(document.body.offsetHeight, window.innerHeight)
- if (typeof e != "undefined" ){
- if (docwidth - e.pageX < itemWidth + 50){
- if (noPicture == "yes" ) {
- xcoord = e.pageX - xcoord - itemWidth; // Move to the left side of the cursor
- } else {
- xcoord = e.pageX - xcoord - itemWidth; // Move to the left side of the cursor
- }
- } else {
- xcoord += e.pageX;
- }
- if ((docheight - e.pageY) < (currentimageheight + 220)){
- ycoord += e.pageY - Math.max(0,(220 + currentimageheight + e.pageY - docheight - truebody().scrollTop));
- } else {
- ycoord += e.pageY;
- }
- } else if (typeof window.event != "undefined" ){
- if (docwidth - event.clientX < itemWidth + 50){
- if (noPicture == "yes" ) {
- xcoord = event.clientX + truebody().scrollLeft - xcoord - itemWidth; // Move to the left side of the cursor
- } else {
- xcoord = event.clientX + truebody().scrollLeft - xcoord - itemWidth; // Move to the left side of the cursor
- }
- } else {
- xcoord += truebody().scrollLeft+event.clientX
- }
- if (docheight - event.clientY < (currentimageheight + 220)){
- ycoord += event.clientY + truebody().scrollTop - Math.max(0,(220 + currentimageheight + event.clientY - docheight));
- } else {
- ycoord += truebody().scrollTop + event.clientY;
- }
- }
- var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
- var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
- gettrailobj().left=xcoord+"px"
- gettrailobj().top=ycoord+"px"
- }
|
En espérant que vous me trouviez la solution
Stephane
|