15-02-2010, 08:09 PM
Edit (18:32 )
C'est bon, j'ai trouvé une solution finale.
Ma carte d'ensemble est donc une image (immuable et clicable) comprise dans un div faisant exactement les dimensions de l'image (la carte). Je récupère les coordonnées de mon clic dans cette div ou sur cette image grâce a un petit javascript, qui une fois exécuté (le javascript) va actualiser un div contenant la carte "zoomée". Cette carte "zoomée" sera généré par php qui récupérera les coordonnées X et Y du javascript d'appel (deux arguments a passer en $_GET[X] et $_GET[Y])...
En fait, ma page pourrait ressembler de loin a ça:
Ou map.php me créé une image en fonction de X et Y passé en variable avec la bibliothèque GD et les données stockées que SQL...
Bien entendu, afin de centrer l'image de BigMap, on peut ajouter ou soustraire un petit quelque chose a nos map_x et map_y...
Bon, le code n'a pas été testé, mais dite moi déjà ce que vous en pensez, amélioration possible...? La position de l'image ne me parait pas superbe déjà...? Et la modification de la position de l'image entrainerai des changements dans le JS... Si quelqu'un a une idée... (Je ne maitrise pas vraiment le JS, j'ai fait avec quelque bride de code trouvées a droite a gauche...)
C'est bon, j'ai trouvé une solution finale.
Ma carte d'ensemble est donc une image (immuable et clicable) comprise dans un div faisant exactement les dimensions de l'image (la carte). Je récupère les coordonnées de mon clic dans cette div ou sur cette image grâce a un petit javascript, qui une fois exécuté (le javascript) va actualiser un div contenant la carte "zoomée". Cette carte "zoomée" sera généré par php qui récupérera les coordonnées X et Y du javascript d'appel (deux arguments a passer en $_GET[X] et $_GET[Y])...
En fait, ma page pourrait ressembler de loin a ça:
Code :
<html>
<head>
<styleE type="text/css">
<!--
.img_map{
position:absolute;
top : 50px;
left : 20px;
}
-->
</style>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function Actualise_BigMap(this_){
var map_x = event.clientX - this_.offsetLeft;
var map_y = event.clientY - this_.offsetTop;
document.getElementById('BigMap').contentWindow.document.location.href="map.php?x=" + map_x + "&y=" + map_y;
}
</script>
<div id="BigMap">
</div>
<img src="map.gif" class="img_map" onclick="Actualise_BigMap(this);">
</body>
</html>Bien entendu, afin de centrer l'image de BigMap, on peut ajouter ou soustraire un petit quelque chose a nos map_x et map_y...
Bon, le code n'a pas été testé, mais dite moi déjà ce que vous en pensez, amélioration possible...? La position de l'image ne me parait pas superbe déjà...? Et la modification de la position de l'image entrainerai des changements dans le JS... Si quelqu'un a une idée... (Je ne maitrise pas vraiment le JS, j'ai fait avec quelque bride de code trouvées a droite a gauche...)
iffle: