1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<title>Observation en temps reel</title>
<head>
<img src="france.png">
<style type="text/css">
.infobulle{
position: absolute;
visibility : hidden;
border: 1px solid Black;
padding: 10px;
font-family: Verdana, Arial;
font-size: 10px;
background-color: #FFFFCC;
}
</style>
<script language="JavaScript" type="text/javascript">
<!--
function GetId(id)
{
return document.getElementById(id);
}
var i=false; // La variable i nous dit si la bulle est visible ou non
function move(e) {
if(i) { // Si la bulle est visible, on calcul en temps reel sa position ideale
if (navigator.appName!="Microsoft Internet Explorer") { // Si on est pas sous IE
GetId("curseur").style.left=e.pageX + 5+"px";
GetId("curseur").style.top=e.pageY + 10+"px";
}
else { // Modif proposé par TeDeum, merci à lui
if(document.documentElement.clientWidth>0) {
GetId("curseur").style.left=20+event.x+document.documentElement.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.documentElement.scrollTop+"px";
}
else {
GetId("curseur").style.left=20+event.x+document.body.scrollLeft+"px";
GetId("curseur").style.top=10+event.y+document.body.scrollTop+"px";
}
}
}
}
function montre(text) {
if(i==false) {
GetId("curseur").style.visibility="visible"; // Si il est cacher (la verif n'est qu'une securité) on le rend visible.
GetId("curseur").innerHTML = text; // Cette fonction est a améliorer, il parait qu'elle n'est pas valide (mais elle marche)
i=true;
}
}
function cache() {
if(i==true) {
GetId("curseur").style.visibility="hidden"; // Si la bulle etais visible on la cache
i=false;
}
}
document.onmousemove=move; // des que la souris bouge, on appelle la fonction move pour mettre a jour la position de la bulle.
//-->
</script>
</head>
<body bgcolor="#09D4F5" onload="window.setTimeout('history.go(0)',60000)">
<div id="curseur" class="infobulle"></div>
<div style="position:absolute; left:800px top:0px; text-align:center;">
<br/>
<a href="../" title="Retour aux observations">Retour aux observations</a><br/>
<a href="../writesingle.php" title="Ajouter une observation">Ajouter une observation</a><br/>
<a href="../inscription.php" title="Inscription aux observations">Pas encore inscrit?</a><br/><br/>
<img src="http://m.meteox.fr/images.aspx?jaar=-3&voor=&soort=loop3uur256&c=fr&n="width="200" height="200" title="Radar des précipitations"></img>
<img src="http://www.meteosuisse.ch/web/fr/meteo/temps_actuel/image_satellite.Par.0004.DownloadFile.ext.tmp/animation.gif" width="200" height="200" title="Animation satellite"></img><br/>
</div><br/>
<?php
$datej=date("d-m-y");
$heure=date("h");
$min=date("i");
echo"<div style='position:absolute; top:40px; left:530px;'><b>Date : ".$datej."<br/>Heure : ".$heure."h".$min." </b></div>";
//header('Content-type: image/png');
$point=imagecreatefrompng("point.png");
$carte=imagecreatefrompng("france.png");
$minlong = -5.1;
$maxlong = 8.2;
$minlat = 42.4;
$maxlat = 51.1;
$largeur = 640;
$hauteur = 640;
//Taille des marges, nécessaire pour que les noms de ville ne soient pas coupés par les bords.
$margex = 20; //px
$margey = 20; //px
$link = mysql_connect("localhost","root","") or die('Connexion impossible.');
mysql_select_db("rsseditor") or die (mysql_error());
$result = mysql_query('SELECT * FROM rsseditor_news WHERE valide = 1 order by date asc') or die ('Erreur : '.mysql_error() );
while ($arr = mysql_fetch_array($result))
{
//Converti lat/long en position sur l'image
$x = $margex + ($arr['longitude'] - $minlong) / ($maxlong - $minlong) * ($largeur - $margex * 2);
$y = $margey + (1-($arr['latitude'] - $minlat) / ($maxlat - $minlat)) * ($hauteur - $margey * 2);
$description = addslashes($arr['description']);
$title = addslashes($arr['title']);
$cp = addslashes($arr['cp']);
$date= addslashes($arr['date']);
echo "<div style='position:absolute; top:".$y."px; left:".$x."px; width:10px; height:10px; z-index:300;'><img src=\"point.jpg\" onmouseover=\"montre('<b>$date<br/>$title : $cp<br/>$description</b> ','white',event)\" onmouseout=\"cache()\"></div>" ;
}
mysql_close();
?>
</body>
</html> |
