Avoir une image sur laquelle un clic donne des informations

**a.collery** · 13/01/2015, 14h23

En faite je crois que vous avez mal compris ma requête, je comptais attaché une image à chaque repère de ma carte et quand je clique sur un des repère l'image changerait

**SpaceFrog** · 13/01/2015, 14h24

il sont quoi à to taff ? fleuristes ?
ils ont une autre methode pour superposer des éléments que le zindex ... qui'ls coourrent vite deposer un brevet

quand au rendu il serait exactement le même que ce que tu as actuellement mais avec la modification du marqueur ...

**a.collery** · 13/01/2015, 14h30

Je voudrais juste une fonction qui change l'image de mon area quand on clique dessus, rien d'autre

**SpaceFrog** · 13/01/2015, 14h37

Oui donc tu souhaite juste coder comme un cochon ...

Code :

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

1
2
3
4
5
6
7
8
 $('#FPMap0 area').on ('click', function(e){
        e.preventDefault();
        survol=$(this).data('agence');
        $('#tel_agence').html(monJSON[survol].tel);
        $('#fax_agence').html(monJSON[survol].tel);
        $("[usemap='#FPMap0']").attr('src',   // ici tu mets le nouvel src concaténé à partir de l'agence );
 
    })

et tu auras du temps de chargement supplémentaire pour tes images ...
C'est vraiment SUPER crad

**a.collery** · 13/01/2015, 14h40

Et l'image sera-t-elle directement changer sur le repère sur lequel j'ai cliqué?

**SpaceFrog** · 13/01/2015, 14h42

non tu ne changes pas l'image du repère, mais toute l'image ...
comme expliqué ci dessus

**a.collery** · 13/01/2015, 14h46

Pourquoi toute l'image? Je voudrais juste que mes repères(les endroits où je clique) soient représentées par une image au lieu d'être invisible et lorsque je cliquerais dessus, l'image changera

**SpaceFrog** · 13/01/2015, 14h57

Parce que tu ne peux pas changer juste un bout de l'image ...
tu peux éventuellement comme déjà évoquer placer une image au dessus mais sans zindex je ne vois pas trop comment ... faudra demander a tes collègues ...

Pour faire propre je proposais juste de faire un truc comme ça pour le changement d'image au clcik...
http://jsfiddle.net/wdvyueay/1
avec une seule image ...

**a.collery** · 13/01/2015, 15h02

Et comment faire avec un zindex?

**SpaceFrog** · 13/01/2015, 15h08

l'idée est de prendre l'image de ta carte vierge sans aucun marqueurs d'agence

tu colles sur ta page un div de la taille de cette image de carte et tu mets la carte en background image

ensuite dans ton json tu rajoutes les coordonnées top et left (en pixels) à chaque agence

Au chargement de la page tu récupères le json et tu le parcoures pour créer pour chaque agence une div que tu positionneras en absolute et zindex ( cf append de Jquery) avec les top et left récupérés dans le json en collant également le data-agence sur le div...
Il suffit de mettre ton image avec les deux marqueurs cote à cote (séléctionnés et non selectionné) et jouer sur le background position ...