Météo Villarzel Suisse

Homepage

Graphiques dynamiques
Impacts de foudre

Ephéméride - PDA
Prévisions
Alertes - Dangers
Température
Pression - Humidité
Solaire et UV
Rayonnement solaire
Pluviométrie
Vent
Agriculture
Chauffage
Danger feux de forêt
Info station
Activité sismique
Astronomie
Divers / Liens / Explications
Créations / GW / Tutoriels
Evénement météo

Hors météo Broye
Mon étang
Consommation électrique
Pompe à chaleur
Panneaux solaire
Serre

Livre d'Or

Forum Highcharts

Privé

Version pour mobile



Merci à nos donateurs:
M. Blanc
M. JavierMartinez
M. Viktor
M. Emanuel Roggen
M. Raphaël Chochon
M. José Luis Sanchez
M. Daniel Stuyck
M. Jean-Pierre Tonnele
M. Benoist Lerouge
M. Pierre Sabatier
M. Patrick Ollivier
M. Michel Le Viol
M. César López
M. Didier Mestric
M. Francesco Paolo Trapani
M. Charles Durand
M. Philippe Blanchard
M. Benjamin Leblic
Philippe Dupertuys
M. Jaume Mas Ferrer
M. Daniel Lavocat
M. Jean-Pierre Bernard
M.Gérard Egger
M. Jean-Claude Birade
M. Dominique Herraire
M. Eric Lemoine
M. Jean Gabriel Boulet
M. Olivier Bovel
M. Arnaud Rahier
M. Bruno Goyac
M. Jean Michel Vouillot
M. Sarah Cordeau
M. Jean-Pierre Grieu
M. Loic Roulin
M. Michel Beel
M. Dominique Gautheron
M. Hubert Verwilghen
Picardie WebMarketing
M. Patrick Puydebois
 M. Thierry Hauuy
M. Francis Mirante

 

Visiteurs depuis le 07.01.2010

 

 

Visites du jour :

 

 

Service Cron Gratuit

 
Affichage des minigraphiques au passage de la souris avec Overlib
 
But : Déclencher l'affichage d'une image au passage de la souris sur une zone d'une image (jauges)
Exemple :
Passez la souris dessus le thermomètre.
Démo sur ma page d'accueil
 
Avant de commencer, vous devez être capable de générer les minigraphiques avec GW et de les télécharger sur votre serveur avec le ftp de GW, une aide est disponible ici
Un exemple de minigraphiques pour GW est disponible ici, mais vous pouvez évidemment utiliser n'importe quelles autres images.
Installation de la librairie Overlib.
1 - Vous devez télécharger la librairie Overlib 4.17 ici
2 - Dans l'archive que vous avez téléchargée, il y a un fichier nommé overlib.js, c'est uniquement celui-ci donc vous avez besoin.
3 - Uploader ce fichier dans le même répertoire que votre page qui va contenir l'image des jauges.
Dans votre page php ou html
 
1 - Placer ce code juste après la balise body (copier / coller )
<script type="text/javascript" src="overlib.js"></script>

 
2 - Insérer l'images des jauges à l'endroit désiré
<img src="images/gauges_4_modif_pluvio.jpg">
Maintenant nous allons faire des zones réactives sur cette image, voici comment faire avec Dreamweaver
Utilisez les outils pour dessiner autant de rectangle et de cercle que vous voulez, chacun correspondra à l'affichage d'un minigraphique au passage de la souris
Vous remarquerez que des lignes ont été rajoutées dans votre code HTML, c'est ces lignes qui vont nous intéresser.
<area shape="rect" coords="17,17,86,196" href="#">
<area shape="circle" coords="190,108,82" href="#">
La première ligne correspond au rectangle "rect" les chiffres qui suivent indiquent les coordonnées avec les positions en x (horizontale) et en y (verticale) du point supérieur gauche, et du point inférieur droit. (4chiffres)
La deuxième ligne correspond au cercle "circle" les chiffres qui suivent indiquent les coordonnées avec les positions en x (horizontale) et en y (verticale) de son centre, puis son rayon. (3 chiffres )
Vous remarquerez aussi une balise href="#", c'est dans celle ci que nous allons lui indiquer d'afficher un minigraphique au passage de la souris
Nous allons donc remplacer le # qui se situe entre les deux "" par le code suivant
javascript:void(0);" onMouseOver="return overlib('<b></b>', WIDTH, 425, HEIGHT, 225, BACKGROUND, '/meteo/images- graph/minitemp.jpg', CENTER );" onMouseOut="return nd();
WIDTH, 425, HEIGHT, 225 indique la largeur et la hauteur de l'image à afficher au passage de la souris, ces valeurs correspondent à mes minigraphiques et doivent être adaptées a votre image.
BACKGROUND, '/meteo/images-graph/minitemp.jpg' indique le nom et le chemin d'accès à votre image, a modifier selon votre configuration, par exemple BACKGROUND, '/images/mongraphique_temperature.jpg
CENTER, indique que l'image va être centrée sous la souris, vous pouvez le remplacer par LEFT ou RIGHT
Exemple:

RIGHT

Center

LEFT
Si vous n'avez pas d'éditeur capable de faire des zones réactives, par exemple Nvu/Kompozer, vous pouvez les créer avec un programme de retouche photo, par exemple Gimp, un tutoriel est disponible ici
Pour les cas désespérés ou pour ceux qui veulent faire simple et rapidement, j'ai créé une page prête à l'emploi.
La page est visible ici
Vous n'avez qu'à recopier le code ci-dessous et le coller dans une page vide que vous renommez comme bon vous semble.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<script type="text/javascript" src="overlib.js"></script>
<p> <img src="images/gauges_4_modif_pluvio.jpg" width="950" height="650" usemap="#Map" border="0" name="gauges graphweather température humidité pression pluie vent météo actuelle"></p>
<p align="center"></p>
<map name="Map">
<area shape="rect" coords="27,24,134,302" href="javascript:void(0);" onMouseOver="return overlib('<b></b>', WIDTH, 425, HEIGHT, 225, BACKGROUND, '/meteo/images-graph/minitemp.jpg', CENTER );" onMouseOut="return nd();">
<area shape="circle" coords="299,174,130" href="javascript:void(0);" onMouseOver="return overlib('<b></b>', WIDTH, 425, HEIGHT, 225, BACKGROUND, '/meteo/images-graph/minihumidite.jpg', CENTER );" onMouseOut="return nd();">
<area shape="rect" coords="461,32,575,317" href="javascript:void(0);" onMouseOver="return overlib('<b></b>', WIDTH, 425, HEIGHT, 225, BACKGROUND, '/meteo/images-graph/minirosee.jpg', CENTER );" onMouseOut="return nd();">
<area shape="rect" coords="603,36,935,313" href="javascript:void(0);" onMouseOver="return overlib('<b></b>', WIDTH, 425, HEIGHT, 225, BACKGROUND, '/meteo/images-graph/minirosee.jpg', CENTER );" onMouseOut="return nd();">
<area shape="circle" coords="153,470,128" href="javascript:void(0);" onMouseOver="return overlib('<b></b>', WIDTH, 425, HEIGHT, 225, BACKGROUND, '/meteo/images-graph/minipression.jpg', CENTER );" onMouseOut="return nd();">
<area shape="circle" coords="453,471,130" href="javascript:void(0);" onMouseOver="return overlib('<b></b>', WIDTH, 425, HEIGHT, 225, BACKGROUND, '/meteo/images-graph/minivent.jpg', CENTER );" onMouseOut="return nd();">
</map>
</body>
</html>
Vous devez changer images/gauges_4_modif_pluvio.jpg par le nom et le chemin d'accès à votre image de fond
ainsi que les noms et chemin d'accès à vos images des minigraphiques /meteo/images-graph/minitemp.jpg
N'OUBLIEZ PAS DE METTRE LE FICHIER overlib.js dans le même répertoire que la page qui va contenir ce fichier
Il ne vous reste plus qu'à inclure cette page à l'endroit de votre choix avec par exemple une balise iframe
Si votre page à une extension HTML, vous devez la renommée en .php


<IFRAME src="indiquez ici le lien vers votre page.html" width="950" height="650" scrolling="no" frameborder="0"> </iframe>
  Enjoy
 

 
  Untitled Document
Station Davis Vantage Pro 2 + station agricole - Weatherlink 6.0.0 - GraphWeather 3.0.15
© 2010-2013, Météo Villarzel - Webmaster Aubert Pierre-André

Attention, les données météo publiées sur ce site sont issues d'une station météo personnelle et ne sont données qu'à titre indicatif,
elles ne peuvent en aucun cas être utilisées pour garantir la protection des personnes ou de biens quelconques.
Stations amies