Raccrocher du css à des données dans un JSON

Bonjour,

Il me faudrait le résultat suivant:
Pièce jointe 166363
Et je suis actuellement à l'étape suivante( voici mon code):
http://jsfiddle.net/rzrdh0m0/

En faite, je ne sais pas trop comment je pourrais rattacher mes noms de villes à mes points.
Merci pour votre futur aide.

Raccrocher du CSS à des données ne veut rien dire, le CSS agit sur le contenu HTML qui est une représentation de ces données.

Tu crées une <div> pour chaque agence que tu ajoutes sur la carte. Il te suffit de créer à la place la structure curseur + nom de ville tel que présenté dans le coin en haut à gauche.

Voilà pour débuter comment ajouter le paragraphe avec le nom de la ville:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

$.each(monJSON, function (nom, data) { $agence = $('<div />').css({ 'height': '41px', "width": "35px", 'display': 'inline-block', 'position': 'absolute', 'top': data.coordy + 'px', 'left': data.coordx + 'px', "z-index": 2 }).addClass('agence ville1').data('agence', nom); $("<p />").text(nom).appendTo($agence); $("#carte1").append($agence); });

---

Merci.

Et après pour avoir le style au nom de ville, comment faire svp?

Un petit effort, cherche par toi-même. Tu as le code jQuery pour ajouter les éléments à la page, et tu as un exemple d'éléments déjà stylisés. Regarde comment j'ai fait pour ajouter l'élément <p> et fais la même chose pour ta div curseur.

Amélioration du code jQuery : http://jsfiddle.net/rzrdh0m0/6/

Pourquoi mes points de ma 2ème carte("Nord-pas-de Calais") ne sont pas attachés à celle-ci alors qu'on fait un appendTo( "#carte2" );

Voici mon code: http://jsfiddle.net/jpns1syu/4/

Ils sont bien attachés à #carte2, tu peux le vérifier avec un inspecteur du DOM. Le problème est que l'image de la carte a un positionnement statique tandis que les points sont positionnés de manière absolue. D'après ton JSON, les coordonnées renvoyées nécessitent que les deux cartes soit côte à côte horizontalement.

Quelle position devrais-je donner à mes points et à ma carte? svp

Idéalement ils devraient être relatifs au coin en haut à gauche de l'image. Ainsi en ajoutant position:relative; à l'élément carte, tu auras l'assurance qu'ils sont toujours bien positionnés peu importe si la carte passe à la ligne ou non.

Merci :)