Discussion :

[mario94]

merci je commence a comprendre pour les position absolue ca me rappelle en math en 93 lol

voilà ceux que j'ai pu faire vous me direz ceux que vous pensez si mes villes c'est aproximité en bon endroit

http://le.coffre.free.fr/carte/carte_france.html

donc mon code :

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
24
25
26
27
28
<img src="France.png" border="0" usemap="#Map" alt="" />
<map name="Map" id="Map">
    <area shape="circle" coords="356,176,5" title="PARIS" alt="" href="http://www.paris.fr/" />
</map>
 
 
<span style="position:absolute; left:376px; top:174px">Paris</span>
 
<map name="Map" id="Map">
    <area shape="circle" coords="483,395" title="lyon" alt="" href="http://www.lyon.fr/" />
</map>
 
 
<span style="position:absolute; left:510px; top:393px">Lyon</span>
 
<map name="Map" id="Map">
    <area shape="circle" coords="506,550" title="Marseille" alt="" href="http://www.marseille.fr/" />
</map>
 
 
<span style="position:absolute; left:526px; top:548px">Marseille</span>
 
<map name="Map" id="Map">
    <area shape="circle" coords="236,452" title="Bordeaux" alt="" href="http://www.bordeaux.fr/" />
</map>
 
 
<span style="position:absolute; left:256px; top:450px">Bordeaux</span>

pour l'instant on ne peut pas cliquez sur les villes il faut mettre le lien pour cliquez sur les villes et pour tamps il y a le lien <a hr....></a>

merci de votre aide et vous me direz si j'ai bien mis les ville approximité et vous me direz ceux que j'ai oublie afin qu'on puisse cliquer

merci

[Invité]

...c'est aproximité en bon endroit

Surtout, ...c'est approximatif en bon français !

1/ Marseille est plus au sud, au bord de la mer => left:526px; top:598px;
Bordeaux plus au sud-ouest, à la pointe de l'embouchure de la Gironde => left:216px; top:475px;

2/ Tu n'as pas de lien sur les NOMS des villes, puisque tu as mis des <span ...>

3/ il NE faut PAS répéter !

Code :

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

1
2
3
<map name="Map" id="Map">
    ....
</map>

Mais mettre TOUS les <area ...> DANS UN SEUL <map ...> :

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
<div style="position:relative;">
 
<img src="France.png" border="0" usemap="#Map" alt="" />
 
<span style="position:absolute; left:376px; top:174px">Paris</span>
<span style="position:absolute; left:510px; top:393px">Lyon</span>
<span style="position:absolute; left:526px; top:548px">Marseille</span>
<span style="position:absolute; left:256px; top:450px">Bordeaux</span>
 
<map name="Map" id="Map">
    <area shape="circle" coords="356,176,5" title="Paris" alt="" href="http://www.paris.fr/" />
    <area shape="circle" coords="483,395,5" title="Lyon" alt="" href="http://www.lyon.fr/" />
    <area shape="circle" coords="506,550,5" title="Marseille" alt="" href="http://www.marseille.fr/" />
    <area shape="circle" coords="236,452,5" title="Bordeaux" alt="" href="http://www.bordeaux.fr/" />
</map>
 
</div>

NE PAS oublier :
- <div style="position:relative;">
- ni le 3ème paramètre : coords="236,452,5" (rayon du cercle)

[Torgar]

T'as oublié les diamètres des cercles pour que ça fonctionne.

De plus, pas besoin de faire des <map></map> pour chaque ville

Je te laisse mettre tes étiquettes (noms des villes) aux bons endroit. J'ai corrigé les coordonnées des villes.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<img src="France.png" border="0" usemap="#Map" alt="" />
 
<span style="position:absolute; left:376px; top:174px">Paris</span>
<span style="position:absolute; left:510px; top:393px">Lyon</span>
<span style="position:absolute; left:526px; top:548px">Marseille</span>
<span style="position:absolute; left:256px; top:450px">Bordeaux</span>
 
<map name="Map" id="Map">
    <area shape="circle" coords="356,176,5" title="PARIS" alt="" href="http://www.paris.fr/" />
    <area shape="circle" coords="466,395,5" title="lyon" alt="" href="http://www.lyon.fr/" />
    <area shape="circle" coords="524,583,5" title="Marseille" alt="" href="http://www.marseille.fr/" />
    <area shape="circle" coords="227,464,5" title="Bordeaux" alt="" href="http://www.bordeaux.fr/" />
</map>

Edit: grillé ! le temps de chercher les coordonnées plus juste...

[mario94]

merci pour les positions, je penses que je n'ai pas pris la bon dimmension et c'est pour ça il me décale les villes. là j'ai fais 4 capture sur google map pour avoir paris

Code :

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

1
2
3
4
5
6
<map name="Map" id="Map">
    <area shape="circle" coords="356,176,5" title="PARIS" alt="" href="http://www.paris.fr/" />
</map>
 
 
<span style="position:absolute; left:376px; top:174px">Paris</span>

c'est soit le chiffre et trop grand où trop petit pour les coords

je ne sais pas comme vous avez fait une bonne capture sur google map afin qu'il se rapproche a mon image donc c'est pour ça mes villes sont décalé et pour tamps j'ai bien ma capture mais il ne me donnes pas les mêmes chiffres que vous

et ensuite remettre le lien pour cliquer et après c'est bon j'aurais tout compris

[Invité]

Edit: grillé !

une fois n'est pas coutume !

(Ps : j'ai aussi édité mon précédent message)

Précision sur <div style="position:relative;"> :

- Si on ne le met pas, les noms ds villes (en position:absolute) vont se "caler" par rapport au coin haut gauche de la fenêtre.

- avec <div style="position:relative;">, ils se calent au coin haut gauche de CETTE div "parente".
Ce qui permet de mettre n'importe quel contenu/mise en page avant...

[Invité]

Concernant les positions:
ATTENTION de NE PAS superposer les NOMS et les ZONES CLIQUABLES (area).

Sinon, les zones cliquables ne sont plus accessibles.

[mario94]

re j'ai pris cette capture sur la piece jointe

et quand je regarde dans the grimp la position de paris n'est pas la même que vous m'avez donnez donc c'est pour ça la ville se décale

car là si je prends les chiffres il me donne 408, 180 dans votre méssage vous mettez 356,176,5 là je ne comprends pas

[Torgar]

C'est "normal". Ca dépend de quelle image est en premier et arrière plan.

Si tu mets TA carte Google Maps en arrière plan puis TA carte de france (la jaune) en premier plan, les distances ne seront pas les mêmes. et c'est ce qu'il ne faut pas faire justement.

J'ai placé TA carte de france (jaune) puis MA carte Google Maps pour faire mes coordonnées.
Car comme les coordonnées corresponde aux distances entre le coin gauche et haut de l'image, il faut se baser sur cette image pour faire les distances.

[Invité]

Pourquoi se compliquer la vie ?

Voici une carte, où les principales villes sont indiquées.
Il n'y a plus qu'à "pointer" aux bons endroits.

[mario94]

je n'arrive pas a mettre une image en arrire plan et l'autres image en premier plan

et apres ca sera bon pour mettres les villes sauf pour qu'on clique et ensuite ca sera bon

merci

[Torgar]

je n'arrive pas a mettre une image en arrire plan et l'autres image en premier plan

et apres ca sera bon pour mettres les villes sauf pour qu'on clique et ensuite ca sera bon

merci

Ca fallait peut-être nous le dire plus tôt ^^

Une petite recherche Google pour la gestion des calques avec The Gimp par ici

D'un autre côté, avec la carte de jreaux62, tu n'as plus ce problème.

[mario94]

merci des que j'aurais compris comment faire un calque lol avec ton lien

maintenant il faut que je trouves comment mettres un lien a chaque lien

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
24
25
26
27
28
<img src="France.png" border="0" usemap="#Map" alt="" />
<map name="Map" id="Map">
    <area shape="circle" coords="356,176,5" title="PARIS" alt="" href="http://www.paris.fr/" />
</map>
 
 
<span style="position:absolute; left:376px; top:174px">Paris</span>
 
<map name="Map" id="Map">
    <area shape="circle" coords="483,395" title="lyon" alt="" href="http://www.lyon.fr/" />
</map>
 
 
<span style="position:absolute; left:510px; top:393px">Lyon</span>
 
<map name="Map" id="Map">
    <area shape="circle" coords="506,550" title="Marseille" alt="" href="http://www.marseille.fr/" />
</map>
 
 
<span style="position:absolute; left:526px; top:598px">Marseille</span>
 
<map name="Map" id="Map">
    <area shape="circle" coords="236,454" title="Bordeaux" alt="" href="http://www.bordeaux.fr/" />
</map>
 
 
<span style="position:absolute; left:216px; top:475px">Bordeaux</span>

merci

[Invité]

Tu lis un message sur deux, ou tu as décidé que zapper tous les miens ?!?

[mario94]

non lol

mais là il faut que je trouve la bonne echelle pour imprim ecran sur google map c est dur trouver la bonne taille

si quelqu'un peut me faire une capture a sa bonne échelle a peut pret

ca sera sympas de votre part

[Invité]

Pourquoi ? Ma carte ne te plait pas ?

[mario94]

oui et non car tu as mis des points je trouves c'est gentil de ta part mais moi je voudrais mettre des points fure a messure dans l'avenir, car là je vais commencer par paris et ensuite on vas dire dans 1 ans je mettrais les autres villes c'est pour ca je veux le mettre ville au fure a messure et pas tout les mettres en un seuil coup mdr

merci

ps si un jour je veux remettre une ville ou tu n'a pas fait les points je ne serais pas comment on fait lol

j'édis

si je mets ce code :

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
<div style="position:relative;">
 
<img src="France.png" border="0" usemap="#Map" alt="" />
 
<span style="position:absolute; left:376px; top:176px">Paris</span>
<span style="position:absolute; left:510px; top:393px">Lyon</span>
<span style="position:absolute; left:526px; top:548px">Marseille</span>
<span style="position:absolute; left:256px; top:450px">Bordeaux</span>
 
<map name="Map" id="Map">
    <area shape="circle" coords="356,176,5" title="PARIS" alt="" href="http://www.paris.fr/" />
    <area shape="circle" coords="466,395,5" title="lyon" alt="" href="http://www.lyon.fr/" />
    <area shape="circle" coords="524,583,5" title="Marseille" alt="" href="http://www.marseille.fr/" />
    <area shape="circle" coords="227,464,5" title="Bordeaux" alt="" href="http://www.bordeaux.fr/" />
</map> 
</div>

là il met bien met villes et le lien qui est invissible mais les villes sont décalé a rapport au points de la ville et pour tamps j'ai repris bien ton code avec les possitions

merci de votre aide

si je veux qu'on clique directe sur le lien de la ville au lieu du points comment on fait

car c'est mieux de cliquer sur la ville que faire des dessins donc comment on met le lien paris

merci de votre aide et de votre soutiens

[mario94]

bonjour, je reviens vers vous juste une derniere fois car c'est bon sauf un petit détaille c'est le circle qui est situé en haut de mon cadre de paris et je voudrais que le circle se situe dans mon cadre <div> au milieu afin qu'on puisses cliquer sur le nom de la ville

voilà mon nouveau code avec css et si vous pouvez me dire ceux que vous pensez ou si vous avez une idée de presenter mon cadre

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
24
25
26
27
28
<div style="position:relative;">
 
<img src="France.png" border="0" usemap="#Map" alt="" />
 
<div style="position:absolute; left:361px; top:174px; color:#000000; border-left:1px solid #FFFFFF; /* couleur du cadre */ border-right:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; border-top:1px solid #FFFFFF;" >
Paris</div>
<span style="position:absolute; left:510px; top:393px">Lyon</span>
<span style="position:absolute; left:539px; top:593px">Marseille</span>
<span style="position:absolute; left:213px; top:480px">Bordeaux</span>
<span style="position:absolute; left:405px; top:49px">Lille</span>
<span style="position:absolute; left:562px; top:163px">Metz</span>
<span style="position:absolute; left:312px; top:412px">Limoges</span>
<span style="position:absolute; left:320px; top:577px">Toulouse</span>
<span style="position:absolute; left:455px; top:573px">Montpellier</span>
 
<map name="Map" id="Map">
    <area shape="circle" coords="361,174,5" title="PARIS" alt="" href="http://www.paris.fr/" />
    <area shape="circle" coords="510,393,5" title="Lyon" alt="" href="http://www.Lyon.fr/" />
    <area shape="circle" coords="539,593,5" title="Marseille" alt="" href="http://www.Marseille.fr/" />
    <area shape="circle" coords="213,480,5" title="Bordeaux" alt="" href="http://www.Bordeaux.fr/" />
    <area shape="circle" coords="405,49,5" title="Lille" alt="" href="http://www.Lille.fr/" />
    <area shape="circle" coords="562,163,5" title="Metz" alt="" href="http://www.Metz.fr/" />
    <area shape="circle" coords="320,412,5" title="Limoges" alt="" href="http://www.Limoges.fr/" />    
    <area shape="circle" coords="320,577,5" title="Toulouse" alt="" href="http://www.Toulouse.fr/" />    
    <area shape="circle" coords="455,573,5" title="Montpellier" alt="" href="http://www.Montpellier.fr/" />    
 
</map> 
</div>

http://le.coffre.free.fr/carte/carte_france.html

merci de votre conseille et si vous voulez modifiez le cadre qui peut faire très bien

sinon je vous en remercie de votre et patients car là j'ai tout compris

donc j'attendrais vore avis pour mon cadre paris et remettre le circle au milieux du cadre de paris

merci d'avance

[NoSmoking]

Bonjour,
il me semble qu'il y a plus simple, la map n'étant pas très intuitive, la zone à cliquer n'étant pas apparente et réduite.

Code html :

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

1
2
3
<span style="position:absolute; left:539px; top:593px">
  <a href="http://www.Marseille.fr/">Marseille</a>
</span>

et avec un peu de CSS choisi...

[mario94]

merci ta méthode est plus réduite

mais comme tu as mis le lien afin que l'on je clique il faut juste supprimer le soulignement cela souligne la ville, donc comment on supprime ce soulignement?

merci de votre aide

[NoSmoking]

mais il faut juste supprime le soulignement

un text-decoration:none; sur les liens devrait faire l'affaire.