Discussion :

[a.collery]

Bonjours,

Je ne sais pas du tout comment je pourrais programmer une image sur laquelle un clic donne des informations selon le clic que l'on a fais sur l'image.
Par exemple:

Quand on a cliqué sur Paris, nous avons eu comme informations le téléphone, l'e-mail, l'adresse, le fax et les heures d'ouverture.
Ainsi je voudrais que selon le clic que l'on a fais, les informations correspondent à ce clic.
Merci.

[SpaceFrog]

fais une recherche avec "image map" ...

[a.collery]

Mais est-ce qu'il sera possible d'avoir les informations différentes pour chaque ville dans leurs cases(téléphone, fax...) respectives?

[SpaceFrog]

Les données proviennent d'ou ? d'une Base de données ? d'un fichier externe ? sont contenues dans le javascript ?

En tout état de cause, oui il suffira de structurer les données dans des variables de sorte à pouvoir récupérer séparément chaque donné (tel, fax ...) et les placer dans les cartouches appropriés au moment du clic ou du survol de la zone d'image.
par exemple dans un json ...

[a.collery]

Pour l'instant je n'ai pas encore créé les données, je ne sais pas où les mettre

[SpaceFrog]

tu pourrais par exemple les mettre dans un fichier js sous forme de string json et les récupérer lors du chargement de la page en ajax
cela faciliterait la maintenance des adresses.
Personnellement il m'arrive de demander à recupérer les données dans des fichiers csv.
Ensuite avec php je génère un json

[a.collery]

Je ne m'y connais pas tellement en javascript, est-ce que je pourrais avoir un exemple s'il vous plaît?

[SpaceFrog]

Ton JSON pourrait ressembler a un truc comme ça:

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
 
 
{"Paris": {"tel":"......",
               "fax":".....",
               "mail": ".....",
               "adr":".....",
                "hor":"....."},    
"Lille": {"tel":"......",
               "fax":".....",
               "mail": ".....",
               "adr":".....",
                "hor":"....."}, 
.../...
"DOUAI": {"tel":"......",
               "fax":".....",
               "mail": ".....",
               "adr":".....",
                "hor":"....."}       
}

[a.collery]

Merci.
Mais comment je pourrais utiliser ses informations par la suite?

[SpaceFrog]

si tu le mets directement dans ton code js sur la page:

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
 
var monJSON= {"Paris": {"tel":"......",
               "fax":".....",
               "mail": ".....",
               "adr":".....",
                "hor":"....."},    
"Lille": {"tel":"......",
               "fax":".....",
               "mail": ".....",
               "adr":".....",
                "hor":"....."}, 
.../...
"DOUAI": {"tel":"......",
               "fax":".....",
               "mail": ".....",
               "adr":".....",
                "hor":"....."}       
}

il te suffit ensuite de récupérer les données comme suit:
http://jsfiddle.net/vanp6e38/

[SpaceFrog]

un exemple avec jquery et un survol de li
http://jsfiddle.net/vanp6e38/1/

[a.collery]

Comment je pourrais mettre en relation ses informations avec mon image?

[SpaceFrog]

avec un map ...
il te faut auparavant mapper ton image, c'est à dire lui attribuer des zones réactives ou clickables .....

[a.collery]

Oui j'ai effectué tout ça, mais je ne vois pas comment utiliser les données lorsque je cliquerais sur une ville de ma map.

[SpaceFrog]

exactement comme je le fais dans l'exemple ci dessus en modifiant le contenu des divs au survol des li ,
en déclenchant sur le survol ou le click des areas de ton map ...

[a.collery]

Donc il faudrait que je mette ça dans ma map, est-ce bien cela?
Je suis désolé cela me paraît assez abstrait

[a.collery]

Je viens de comprendre le code, maintenant comment faire en sorte que lorsque je cliquerais sur un point(ville), cela affichera juste les informations la concernant? Cela n'est pas à mettre dans la la balise "map"?

[NoSmoking]

Bonjour,
utilise l'événement onclick sur tes AREA pour afficher l'élément qui correspond

Code :

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

1
2
// par exemple
<area shape="circle" COORDS=""x,y,rayon" onclick="showInfo('Paris');">

[a.collery]

Merci

[SpaceFrog]

oui ou avec JQuery un data-agence sur les areas ...