Bonjour,
Je suis actuellement sur un projet. Pour résumer, j'ai des DIV sur une page qui sont positionné à des coordonnées particulières. Lorsque je position la souris sur un DIV, une infobulle apparaît. Il est possible de déplacer les DIV.
Pour une meilleure ergonomie, la page faisant plus de 5000 px de haut et de largeur, j'aurais souhaiter proposer à l'utilisateur :
- un zoom/dezoom (celui du navigateur décalle tous mes infobulles car ne zoom/dézoom par vraiment)
si un DIV se trouve en top et left 100px, que je dezoom de 50%, il se trouvera alors en top et left 50px mais l'infobulle restera en top et left 100px...
bref c'est le premier de mes soucis mais surement est-il lié à mon 2e et plus gros soucis
- un moyen de cliquer sur la page et de faire glisser le document (un peu comme sur google maps quand l'on veut déplacer le contenu)
Pour cela j'ai essayé le script LEAFLET (http://leafletjs.com/). Par contre je rencontre 2 problèmes :
- le zoom/dezoom ne fonctionne pas
- le scroll par souris ne bouge que l'image en background et non l'intégralité de la page (DIV inclus)
Voici un petit code d'exemple :
Et l'image que j'utilise :
J'aimerais que le zoom fonctionne. Mais surtout que le déplacement (scroll) via la souris déplace l'intégralité du document (DIV jaune inclus).
Est-ce possible avec ce script (LEAFLET) ? Est-ce possible autrement ?
Merci pour vos réponses
Modifié par Jeyt (18 Oct 2014 - 20:47)
Je suis actuellement sur un projet. Pour résumer, j'ai des DIV sur une page qui sont positionné à des coordonnées particulières. Lorsque je position la souris sur un DIV, une infobulle apparaît. Il est possible de déplacer les DIV.
Pour une meilleure ergonomie, la page faisant plus de 5000 px de haut et de largeur, j'aurais souhaiter proposer à l'utilisateur :
- un zoom/dezoom (celui du navigateur décalle tous mes infobulles car ne zoom/dézoom par vraiment)
si un DIV se trouve en top et left 100px, que je dezoom de 50%, il se trouvera alors en top et left 50px mais l'infobulle restera en top et left 100px...
bref c'est le premier de mes soucis mais surement est-il lié à mon 2e et plus gros soucis
- un moyen de cliquer sur la page et de faire glisser le document (un peu comme sur google maps quand l'on veut déplacer le contenu)
Pour cela j'ai essayé le script LEAFLET (http://leafletjs.com/). Par contre je rencontre 2 problèmes :
- le zoom/dezoom ne fonctionne pas
- le scroll par souris ne bouge que l'image en background et non l'intégralité de la page (DIV inclus)
Voici un petit code d'exemple :
<html>
<head>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<style type="text/css">
#map { height: 180px; background-color:grey; }
#yellow { height: 18px; width:18px; background-color:yellow; z-index:999; position: absolute; top:20px; left:200px;}
</style>
</head>
<body>
<div id="map"><div id="yellow"></div></div>
<script type="text/javascript">
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('Background.png', {
attribution: 'test',
maxZoom: 18
}).addTo(map);
</script>
</body>
</html>Et l'image que j'utilise :
J'aimerais que le zoom fonctionne. Mais surtout que le déplacement (scroll) via la souris déplace l'intégralité du document (DIV jaune inclus).
Est-ce possible avec ce script (LEAFLET) ? Est-ce possible autrement ?
Merci pour vos réponses
Modifié par Jeyt (18 Oct 2014 - 20:47)