1485 sujets

Web Mobile et responsive web design

Bonjour,

Je dois réaliser une carte de France "interactive".
Est-ce que vous savez comment se comporte les "area shape" sur les versions web mobile ?
est-ce que la carte peut-être redimensionnée en fonction de la taille de l'écran et est-ce que les coordonnées suivent et restent cohérentes si il y a un redimensionnement (via un pourcentage en CSS)

Et du coup quelle solution est plus pérenne, le svg et ou les area shape ?

Voici mes 2 ressources :

svg via js raphael par ex :
http://proov.fr/html/creer-une-carte-de-france-cliquable-en-html5-svg/

Area share un super tuto ici :
http://www.grafikart.fr/tutoriels/jquery/carte-interactive-177


Merci.
Modifié par Croquisse (10 Sep 2012 - 19:59)
Bonjour,

Pour autant que je sache, pas moyen de redimensionner un image map. J'avais testé l'an dernier zoom et scale ( css 2 et 3 ) et zoom fonctionnait sur Chrome / Safari, scale fonctionnait sur Firefox, mais rien ne semblait marcher sous IE ( et le 9 était le pire, cette fois-ci ).

Il existe une solution intéressante quoiqu'un peu complexe : JvectorMap.

Bon courage !
Ok, merci pour ton commentaire et le lien.
Comme cela reste un petit projet, je ne pense pas m'embarquer dans un truc trop complexe.
Donc shape area pour les grand écrans et liste déroulant ou liste tout court pour les petits écrans.

Par contre j'ai pas encore bien saisi l'avantage de svg par rapport au shape area.
Est ce que justement c'est cette histoire de redimensionnement ?

j'ai testé rapidement http://jqvmap.com/
et si je change les tailles :
<div id="vmap" style="width: 600px; height: 400px;"></div>


Apparemment tout reste cohérent, donc c'est peut-être ma solution.
Y at-il des spécialistes SVG qui pourraient confirmer ?

Pour générer les coordonnées en SVG j'ai testé rapidement avec gimp, ca à l'air tout à fait faisable.

Merci.
Salut,

C'est effectivement le principe du SVG, format vectoriel qui peut être redimensionné, comme son nom l'indique (scalable vector graphics) ! Smiley smile
Le lien que tu as donné est d'ailleurs responsive...

tm
ok merci. C'est ce que je recherche.
Si ça intéresse certains,
je pourrais vous faire un petit retour d'expérience une fois réalisé.