Discussion :

[a.collery]

Bonjour,

Je voudrais mettre des images sur mes repères(balise area) et que celle-ci se change lors d'un clic. Voici le résultat:

Voici mon code actuel:
http://jsfiddle.net/t24b28sm/
Merci pour votre futur aide.

[SpaceFrog]

Tout a été dit sur l'autre post ...

un exemple
http://jsfiddle.net/gabrieleromanato/GhVkx/

ou encore

http://www.jqueryscript.net/zoom/jQu...-imgNotes.html

[a.collery]

Ces exemples ne répondent pas vraiment à ce que je demande

[SpaceFrog]

Pas directement, mais les méthodes utilisées de création des objets placé en zindex si ...

[a.collery]

Je n'arrive pas à faire le rapport

[SpaceFrog]

reprenons la logique de base ...

les données de tes agences sont dans un json ... (y compris les coordonnées pour positionner le marqueur)

au chargement de la page un script va parcourir le json
pour chaque agence il va crée un div de taille préfixée ( celle de l'image marqueur)
mettre les top et left du div extraits du json pour l'agence pour positionner le div en zindex au dessus de la carte
attribuer un data-agence au div afin de pouvoir lier ton div à l'agence et récupérer les coordonnées
attribuer une class au div de façon a pouvoir lier à tous les marqueur les fonctionnalités au onclick
mettre l'image des marqueurs en background des div ne laissant apparaitree que l'image du marquer non sélectionné par défaut

au onclick sur la class des div marqueur :
on récupère les données du json au moyen du data agence du div cliqué pour afficher le tel fax etc dans d'autres div en dessous ...
on modifie la position du background image pour le div cliqué pour faire apparaitre l'image du marqueur sélectionné ( en ajoutant une class comme dans l'exemple on/off donné précédemment)
on réintialise la position du background image des autres marqueur ( en supprimant la class de selection)

[a.collery]

comment un script peu parcourir un json?
comment ça pour chaque agence il va créer une div de taille préfixée?

[a.collery]

Voici un extrait de mon json:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
var monJSON = {
    "Paris": {
            "tel": "tel paris",
            "fax": "fax Paris",
            "mail": "mail Paris",
            "adr": "Adr PAris",
            "hor": " Horaires Paris",
            "coordx": "248",
            "coordy": "122",
            "coordr": "10"
    },
    "Lille": {
            "tel": "tel Lille",
            "fax": "fax Lille",
            "mail": "mail Lille",
            "adr": "Adr Lille",
            "hor": " Horaires Lille"7
            "coordx": "391",
            "coordy": "368",
            "coordr": "10"
    }
}

[SpaceFrog]

http://fiddle.jshell.net/2k1L5h7t/

[a.collery]

Merci.
Je n'ai pas de map à créer après cela? Que dois-je faire?

[SpaceFrog]

Non pas de map a créer,
juste affecter le onclick sur le ready pour chaque div créée avec la méthode de on par délégation

http://fiddle.jshell.net/2k1L5h7t/2/

Attention cet exemple est réalisé à partir d'image récupérés sur le net... en particulier le sprite des agences n'a pas de fond transparent, le rendu serait meilleur avec un sprite png...

[a.collery]

Merci

Qu'est-ce l'affectation du onclick sur le ready?

La carte m'a l'air fonctionnel, que manque-t-il?

[SpaceFrog]

Tout est dans l'exemple donné ci-dessus !

Pour la notion de ready de jquery
http://javascript.developpez.com/faq...oduction#Ready

[a.collery]

Donc cela s'apparente au chargement de tous les éléments?

[a.collery]

J'aurais une autre question à vous posez qui est que je mets cette map interactive sous wordpress, ma question est la suivante:
Je mets le code javascript dans un widget qui correspond au code javascript, mais mon site ne comprends pas le js pourtant quand on analyse la page, celui-ci est présent, savez-vous pourquoi cela ne fonctionne pas?

[SpaceFrog]

JE ne pratique pas wordpress, mais de mémoire il y a une syntaxe particulière pour intégrer du jq dans wp ...

[a.collery]

D'accord merci

Voici le résultat que j'ai:
http://fiddle.jshell.net/28Lr1kv6/

Est-ce qu'il manque des choses?

[SpaceFrog]

ça m'a l'air fonctionnel ...

[a.collery]

Merci pour votre aide.