Tutoriel Vidéo jQuery : Créer une carte interactive

igotzepower Il y a 3 jours Répondre

bonjour,

Super tutoriel ! Malheureusement il ne marche pas sous ie6 et j'aimerais comprendre pourquoi... Bien évidemment j'ai modifié toutes les img.png en gif afin de gérer la transparence. Je pense qu'il y a un pb sur le mouseover, car lorsque je passe la souris sur une des zones, l'image ne vient pas s'afficher.

Est-ce qu'une personne pourrait m'aider; s'il vous plait

ludo31 Il y a 20 jours Répondre

moi mon problème c'est que sans doute le overlay passe en dessus de l'image cliquable et du coup dès que j'insère les background l'image n'est plus cliquable quelqu'un a une solution j'ai évoqué le problème ici :

http://www.developpez.net/forums/d1214839/webmasters-developpement-web/javascript/bibliotheques-frameworks/jquery/probleme-rendre-carte-cliquable/ #post6648578

Badlink Il y a 27 jours Répondre

Bonjour,

Je me demandais si quelqu'un avait une idée de comment faire pour mettre plusieurs cartes interactives l'une à la suite de l'autre ???

Merci d'avance :D

eBadlink Il y a 3 mois Répondre

Waaa !

Merci de me sauver la vie ! Dire que je galère depuis deux jours à refaire la carte de l’Espagne... Et bien sur rien ne va... Grâce à se super tuto en 1-2h c'est expédié !

Encore merci :D

ludo31 Il y a 3 mois Répondre

depuis longtemps j'étais curieux de voir comment ils ont fait les gars pour le même système sur le bon coin et ici j'ai trouvé la réponse encore merci !!
mais juste que t'aurai dû expliquer bcp plus les démarches sur photoshop et Dreamweaver
mais le tuto est comme d'hab meilleur

thqloz Il y a 4 mois Répondre

Je sais que le tuto est un peu vieux, mais j'ai enfin trouvé quelque chose à redire

Je pense qu'on peut se passer du hash servant à lier le slug au nom de la région (ou du département dans mon cas).


Utilisant Mootools j'ai adapté ton tutoriel sans trop de problèmes mise à part que je ne me suis pas embarrassé de créer un hash pour lier le nom des départements, je balance le nom dans le alt, ou tout autre attribut de type data-*, et je le récupère tout simplement au survol.

Exemple :
$('.map area').mouseover(function()
{
$('.tooltip').text($(this).attr('alt'));
});

j'ai pas testé mais l'idée est la

visipanoramic Il y a 4 mois Répondre

Bonjour,

Super tutoriel, si on a plus de 25 régions sur la carte comment faire pour que cela fonctionne?

Si j'ajoute 26 région, l'over ne fonctionne plus.

Merci d'avance pour vos réponses.

diabless6 Il y a 4 mois Répondre

Bon tuto.
Pour les personnes qui n'ont pas DreamWeaver, vous avez un logiciel gratuit et qui est vraiment très complet pour créer des AreaMap : Mcc HTML Mapper
Et il est made in France en plus, la cerise sur le gâteau :D

elscorto Il y a 5 mois Répondre

Merci Graf, par contre une petite question rapide: comment as-tu fait pour détourer aussi rapidement la région avec le lasso polygonal vers les 2min40? (y a une touche à appuyer?)
merci

LegendPJ Il y a 6 mois Répondre

Bonjour à tous,
j'ai un petit souci de taille moi...j'fais une map pour représenter beaucoup de salles d'un plan d'un bâtiment(de 15 à 45 salles), or l'image fait 950px de large (taille choisi par moi) et au delà de 30.000px l'image est trop "grande" pour photoshop du coup, seul moyen de l'enregistrer c'est en .tiff...or me faut du .png pour le site.
Le tiff conserve la transparence...or pour le passage du tiff au png, que ce soit avec gimp ou paint...pas d'conservation de transparence...:/
Donc j'suis un peu bloqué la...est ce que quelqu'un aurait une idée ?

Merci

Olivier C Il y a 7 mois Répondre

C'est un bon tuto. Un bémol cependant : sur une image très grande (ce qui peut arriver pour une carte) l'image de base peut être très lourde. Mais il est vrai : avec quelques petites modif' ce n'est plus un problème, par contre il faut bien maîtriser la technique sprite. Position "absolute" pour la carte et "relative" pour les zones, c'est pour moi le plus important à retenir... Bien à vous

Judi Il y a 8 mois Répondre

C'est vraiment génial, je cherche à faire ce genre de chose pour un client.

Comment puis je rajouter une image à l'intérieur du tooltip?
J'ai testé pas mal de truc mais rien en va en faites, i need help, please.

vic Il y a 8 mois Répondre

Je voudrais faire cela pour les département de france en utilisant tes ressource je parvient à avoir un anime qui fonctionne mais dés que je dépassse le nombre d'area que tu a définis l'image ne bouge plus malgré que les zones soit clivable.
C'est graves ?? Avez vous une idées??
Merci

DRAKUN Il y a 8 mois Répondre

Bonjour, J’aime faire un mapping d’une base de donnée SQL SERVER ( microsoft) et d’une base de donnée ORACLE, il parle de PDO_OCI et PDO_SQLSRV, que je n’ai pas bien compris, Vous voulez bien m’aider a bien comprendre et a pouvoir le mettre en place , Merci d’avance

Claudia Demers Il y a 8 mois Répondre

Bonjour, il existe des solutions beaucoup plus facile que celle-ci, j'aimerais avoir vos commentaire sur celle-ci : http://www.fusioncharts.com/maps/

vic Il y a 8 mois Répondre

Super c'est exatctement ce que je rechechais. MERCI !
Je voudrais l'inscrire dans une page de Word pers quelque'un saurait me guider ?
A+

knyllp Il y a 8 mois Répondre

super tuto !
d'une point de vue plus créatif,
le principe du cerveau j'ai beaucoup, http://biancamangels.com/about

xis Il y a 9 mois Répondre

J'aime beaucoup ce nouveau design. Simple, sobre et esthétique. Bravo pour ce theme

lanzorg Il y a 9 mois Répondre

Super tuto !

Pour quelles raisons as-tu reswitché sur Komodo IDE ?

valentin45000 Il y a 9 mois Répondre

C'est pas mal
Applicable à plusieurs système autre que celui de la carte donc ça peut être pas mal utilise

magiar Il y a 9 mois Répondre

Merci ce nouveau tuto qui répond à la question que je me posais depuis un certain temps ! ^^

Création site Internet Avignon Il y a 9 mois Répondre

Merci, juste ce que j'avais besoins !

Nazahel Il y a 9 mois Répondre

Merci pour ce tuto enrichissant

Petite remarque, pour la sélection de la largeur de la tooltip, on peut utiliser le .innerWidth qui prends en compte le width et le padding : <a href="http://api.jquery.com/innerWidth/ ">innerWidth</a>

Il existe aussi le .outerWidth qui tient compte en plus du border et du margin : <a href="http://api.jquery.com/outerWidth/ ">outerWidth</a>

avatarvb Il y a 9 mois Répondre

Vrement Utile

funpro Il y a 9 mois Répondre

incompatible avec firefox !!!!!!!!!!!!!!!!!!!!!!!!
je vient de tester votre application sous FF aucun affichage de la survol de la carte mais
sous google Chrome s'affiche à la perfection ??????????????????????????????????????

PaulB319 Il y a 9 mois Répondre

Génial ! Se serait surement très utile dans la section des infos sur le compte.

sc62 Il y a 9 mois Répondre

Info : Ne fonctionne pas sur Firefox 7 ....

kalagan Il y a 9 mois Répondre

Super tuto , sa va mettre utile!!

merci!

Pierre Il y a 9 mois Répondre

La démo ne fonctionne pas sous firefox 6 mac.
Sous chrome et safari tout est ok

romain25 Il y a 9 mois Répondre

Sympa mais j'aurai préféré que l'on continue le tutoriel sur l'iPhone/Android avec des accès json, etc..

Sinon beau boulot