Une image dans une image (image map?)

Salut ,
J'aimerais faire une image qui serait cliquable; mais dans une autre image, comme sur ce site (travian.fr) par exemple :
http://www.hiboox.com/vignettes/0407/2a2e0a14.jpg
Quand on clique sur une place vide et que l'on cré un bâtiment, celui ci apparait sur l'image. J'aimerais donc savoir comment cela est possible.

Avec image map j'arrive à rendre certains androits de mon images cliquables, mais j'aimerais que des bâtiments apparaissent en fonction du contennu de la bdd. Connaitriez vous une solution ?

Ps: Voici une partie de leur source :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<td class="s1"><img src="img/fr/a/w.gif" width="1" height="10" border="0"></td>
<td class="s3"><h1>VVV</h1>
<div style="position:absolute; width:440px; height:40px; z-index:2; left:156px; top:138px;"><h1>VVV</h1></div><img class="d1" src="img/fr/g/g5.gif" width="75" height="75"><img class="d2" src="img/fr/g/iso.gif" width="75" height="100"><img class="d3" src="img/fr/g/iso.gif" width="75" height="100"><img class="d4" src="img/fr/g/iso.gif" width="75" height="100"><img class="d5" src="img/fr/g/iso.gif" width="75" height="100"><img class="d6" src="img/fr/g/g6.gif" width="75" height="75"><img class="d7" src="img/fr/g/g11.gif" width="75" height="75"><img class="d8" src="img/fr/g/g15.gif" width="75" height="75"><img class="d9" src="img/fr/g/iso.gif" width="75" height="100"><img class="d10" src="img/fr/g/g17.gif" width="75" height="75"><img class="d11" src="img/fr/g/g10.gif" width="75" height="75"><img class="d12" src="img/fr/g/iso.gif" width="75" height="100"><img class="d13" src="img/fr/g/iso.gif" width="75" height="100"><img class="d14" src="img/fr/g/g19.gif" width="75" height="75"><img class="d15" src="img/fr/g/g18.gif" width="75" height="75"><img class="d16" src="img/fr/g/iso.gif" width="75" height="100"><img class="d17" src="img/fr/g/g23.gif" width="75" height="75"><img class="d18" src="img/fr/g/iso.gif" width="75" height="100"><img class="d19" src="img/fr/g/g8.gif" width="75" height="75"><img class="d20" src="img/fr/g/g22.gif" width="75" height="75"><img class="dx1" src="img/fr/g/g16.gif">
<div class="d2_x d2_1"><img usemap="#map2" src="img/fr/a/x.gif" width="540" height="450" border="0"></div>
 
<map name="map2">
<area href="build.php?id=40" title="Palissade Niveau 1" coords="325,225,180" shape="circle">
<area href="build.php?id=40" title="Palissade Niveau 1" coords="220,230,185" shape="circle">
</map>
 
<map name="map1">
<area href="build.php?id=39" title="Place de rassemblement Niveau 4" coords="270,158,303,135,316,155,318,178,304,211,288,227,263,238,250,215" shape="poly">0<area href="build.php?id=19" title="Scierie Niveau 3" coords="47,89,47,35,122,35,122,89,85,110" shape="poly"><area href="build.php?id=20" title="Emplacement de construction" coords="132,64,170,44,206,64,170,85" shape="poly"><area href="build.php?id=21" title="Emplacement de construction" coords="192,54,230,34,266,54,230,75" shape="poly"><area href="build.php?id=22" title="Emplacement de construction" coords="267,69,305,49,341,69,305,90" shape="poly"><area href="build.php?id=23" title="Emplacement de construction" coords="327,117,365,97,401,117,365,138" shape="poly"><area href="build.php?id=24" title="Usine de poteries Niveau 4" coords="14,129,14,75,89,75,89,129,52,150" shape="poly"><area href="build.php?id=25" title="Silo à céréales Niveau 11" coords="97,137,97,83,172,83,172,137,135,158" shape="poly"><area href="build.php?id=26" title="Bâtiment principal Niveau 5" coords="182,119,182,65,257,65,257,119,220,140" shape="poly"><area href="build.php?id=27" title="Emplacement de construction" coords="337,156,375,136,411,156,375,177" shape="poly"><area href="build.php?id=28" title="Place du marché Niveau 5" coords="0,199,0,145,75,145,75,199,38,220" shape="poly"><area href="build.php?id=29" title="Dépôt de ressources Niveau 11" coords="127,164,127,110,202,110,202,164,165,185" shape="poly"><area href="build.php?id=30" title="Emplacement de construction" coords="92,189,130,169,166,189,130,210" shape="poly"><area href="build.php?id=31" title="Emplacement de construction" coords="345,196,383,176,419,196,383,217" shape="poly"><area href="build.php?id=32" title="Caserne Niveau 6" coords="17,238,17,184,92,184,92,238,55,259" shape="poly"><area href="build.php?id=33" title="Ambassade Niveau 1" coords="162,232,162,178,237,178,237,232,200,253" shape="poly"><area href="build.php?id=34" title="Emplacement de construction" coords="289,251,327,231,363,251,327,272" shape="poly"><area href="build.php?id=35" title="Cachette Niveau 10" coords="92,274,92,220,167,220,167,274,130,295" shape="poly"><area href="build.php?id=36" title="Emplacement de construction" coords="222,284,260,264,296,284,260,305" shape="poly"><area href="build.php?id=37" title="Moulin Niveau 4" coords="77,307,77,253,152,253,152,307,115,328" shape="poly"><area href="build.php?id=38" title="Académie Niveau 4" coords="199,316,199,262,274,262,274,316,237,337" shape="poly">
 
<area href="build.php?id=40" title="Palissade Niveau 1" coords="312,338,347,338,377,320,406,288,421,262,421,222,396,275,360,311" shape="poly">
<area href="build.php?id=40" title="Palissade Niveau 1" coords="49,338,0,274,0,240,33,286,88,338" shape="poly">
<area href="build.php?id=40" title="Palissade Niveau 1" coords="0,144,34,88,93,39,181,15,252,15,305,31,358,63,402,106,421,151,421,93,378,47,280,0,175,0,78,28,0,92" shape="poly">
</map>
 
<img class="imap" usemap="#map1" src="img/fr/a/x.gif" width="422" height="339" border="0"></td>
<td class="s1"><img src="img/fr/a/w.gif" width="1" height="10" border="0"></td>
</tr>

Merci d'avance

Si tu mets l'image ou tu ne clique pas dessus en background et les autres en affichage normal ca ne fonctionne pas ?

C'est pas bête ;) je vais essayer de mettre le background entre les <div>!

Merci beaucoup

Salut,

Une autre approche, si ça peut s'appliquer à ton projet, serait de créer un
champ de formulaire de type image. ainsi, lors d'un clique, le formulaire
est envoyé à ta page php et tu reçois les coordonnées de la souris sur l'image.