background en image sur une autre

[emc2]

Bonsoir,
J'utilise ce code pour faire évoluer des points sur une image de fond (une carte). Je souhaiterais remplacer mon carre 8 X 8 par une image plus complexe comme un navire par exemple. J'ai tenté différentes solutions sans parvenir à un résultat. Peut-on m'aider ?
Merci par avance.

Code:

<div style="background:#ffffff;width:8px;height:4px;position:absolute;top:463px;left:261px;" title="exemple"></div>

[Scoubifitz]

bonsoir,

le plus facile , en gardant le code , est de modifier un peu le carré de positionnement pour qu'il pointe vers le point d'ancrage (en arrondissant un coté du carré), et de mettre un bateau avec un fond transparent qui est placé par rapport au point de positionnement ...

Code:

<div style="background:#ff00ff;width:10px;height:10px;position:absolute;top:563px;left:261px;border-radius:0 0 10px;-webkit-border-radius:0 0 10px;" title="exemple"><img src='http://img11.hostingpics.net/pics/642136pictovoilier.png' style="position:relative;top:-40px;left:10px;" /></div>

[emc2]

Merci, ce code me parait correspondre à ce que je souhaite. Je vais le tester sur mon rpg et je reviens sur le fil pour donner le résultat.
Il y a juste l'instruction "relative" sur la position de bateau qui m'effraye un peu, mais ça devrait aller.


... Ben en fait, non ce code ne fonctionne pas sur ma carte, je n'arrive pas à faire apparaître quoi que ce soit. J'ai remarqué en éditant votre message que le code était inclut dans une table. Le problème viendrait peut-être de là ?
je mais l'ensemble de ma page html au cas où vous trouveriez ce qui ne va pas. Elle est telle que sans le code que vous avez proposé plus haut. merci

Code:

<center><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="100" height="3">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="mp3=http://www.archive-host.com/files/1679727/971e6b8110bd71cb5648125842a5ee4cef93a149/Mer_calme.mp3&amp;autoplay=1&amp;volume=40" />
</object></center>

<center><table width="88%" cellpadding="3" cellspacing="1" border="0" bgcolor="#000000"><tr>
<td width=10 style="color:white" bgcolor="#b8b885">&gt;</td>
<td style="color:#333333;font-weight:bold;background-color:#b8b885;">CARTE DU JEU : dernière maj 15-09-12</td>
</tr></table></center>

<div style="width:1024px;height:1024px;position:relative;top:0px;left:0px;margin:auto">
<img usemap="#page_d_accueil" src="http://www.archive-host.com/files/1736465/971e6b8110bd71cb5648125842a5ee4cef93a149/1024_5_noms.png" width="1024" height="1024" border="0">
<map name="page_d_accueil">
<area shape="rect" title="Kanayé" coords="204,63,209,68" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Port-Royal" coords="537,541,542,546" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Sainte-Croix" coords="862,67,867,72" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Collense" coords="555,239,560,244" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Basses-mines" coords="506,77,511,82" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Les-Forges" coords="808,371,813,376" href="http://sainte-croix.forumgratuit.org/h4-les-forges" />
<area shape="rect" title="Espéride" coords="208,279,213,284" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="La-Tisserie" coords="312,400,317,405" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Les-Scieries" coords="362,304,367,309" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Haut-Marché" coords="385,954,390,959" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Auberge du pendu" coords="261,598,266,603" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Les chantiers navals" coords="498,744,503,749" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Puits-du-Bouc" coords="100,520,105,525" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Pas-du-Levant" coords="991,740,996,745" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Hospital" coords="924,512,929,517" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Baie-des-geoles" coords="623,66,628,71" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Cap Nord" coords="329,788,334,793" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Les-Chenaux" coords="862,277,867,282" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="poly" title="L'île des pirates" coords="201, 17, 175, 37, 175, 52, 181, 59, 197, 69, 222, 71, 247, 63, 253, 56, 252, 47, 230, 22, 222, 17, 201, 17" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="poly" title="L'île du Lézard" coords="321, 358, 283, 394, 268, 449, 283, 449, 338, 392, 321, 358" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="poly" title="Comptoir des boucaniers" coords="49, 495, 17, 518, 17, 543, 119, 529, 180, 496, 176, 485, 135, 490, 96, 510, 49, 495" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="poly" title="Forest aux druides" coords="959,12,969,26,981,26,997,51,995,63,958,62,938,31,959,12"
href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
<area shape="poly" title="Agriculture" coords="929,139,950,144,955,159,940,160,941,185,928,187,921,183,925,167,907,158,916,153,913,144,929,139"
href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
<area shape="poly" title="Elevage" coords="865,318,916,319,925,335,925,352,884,353,871,865,318"
href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
<area shape="poly" title="Royaume des Terres du Levant" coords="790, 0, 757, 32, 861, 94, 808, 111, 849, 220, 782, 244, 747, 350, 810, 382, 1003, 406, 940, 597, 983, 746, 1024, 750, 1024, 0, 790, 0"
href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
<area shape="poly" title="Lin" coords="306,927,295,961,312,957,325,961,333,959,339,949,330,939,317,941,306,927" href="http://sainte-croix.forumgratuit.org/h10-triangle" />
<area shape="poly" title="Royaume du triangle" coords="328, 786, 266, 886, 238, 967, 411, 966, 415, 948, 381, 862, 328, 786" href="http://sainte-croix.forumgratuit.org/h10-triangle" />
<area shape="poly" title="Royaume des Espérides" coords="164, 204, 109, 212, 59, 251, 36, 294, 33, 325, 42, 338, 63, 358, 160, 403, 214, 332, 200, 225, 164, 204" href="http://sainte-croix.forumgratuit.org/h9-roy-esperides" />
<area shape="poly" title="Mines de charbon" coords="559,65,570,74,574,83,542,83,559,65" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
<area shape="poly" title="Mines de fer" coords="358,263,370,275,329,275,339,265,346,270,350,263,358,263" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
<area shape="poly" title="Les Provinces-Unies" coords="485, 42, 403, 133, 311, 273, 309, 291, 399, 368, 461, 277, 565, 311, 713, 169, 692, 84, 647, 57, 525, 31, 497, 33, 485, 42" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
<area shape="poly" title="Delta ensablé" coords="536,543,531,540,520,539,506,551,505,556,520,559,536,552,536,543" href="http://sainte-croix.forumgratuit.org/h6-grandes-terres" />
<area shape="poly" title="Royaume des grandes Terres" coords="677, 356, 504, 452, 465, 486, 452, 505, 445, 621, 506, 787, 598, 875, 683, 904, 798, 918, 874, 917, 917, 897, 928, 854, 928, 454, 915, 430, 863, 399, 718, 361, 677, 356" href="http://sainte-croix.forumgratuit.org/h6-grandes-terres" />
<area shape="poly" title="Les îles désertes" coords="244, 550, 196, 573, 184, 601, 183, 625, 198, 655, 230, 680, 283, 692, 291, 689, 351, 636, 344, 553, 244, 550" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="poly" title="L'île de la Flibuste" coords="139, 741, 109, 756, 94, 769, 49, 773, 33, 784, 33, 808, 37, 811, 100, 824, 130, 825, 182, 799, 189, 786, 182, 774, 148, 745, 139, 741" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
</map>
<div style="background:#ffffff;width:8px;height:4px;position:absolute;top:463px;left:261px;" title="exemple"></div>
<div style="background:#760606;width:4px;height:8px;position:absolute;top:881px;left:378px;" title="Henri le fol"></div>
<div style="background:#b000c4;width:8px;height:4px;position:absolute;top:220px;left:203px;" title="Philippe II d'Hespérides"></div>
<div style="background:#eb1a3d;width:4px;height:8px;position:absolute;top:213px;left:500px;" title="Guillaume le navigateur"></div>
<div style="background:#0617af;width:8px;height:4px;position:absolute;top:260px;left:857px;" title="François l'envahisseur"></div>
<div style="background:#0c6921;width:4px;height:8px;position:absolute;top:655px;left:700px;" title="Charles le sauvage"></div>
<div style="background:#000000;width:8px;height:4px;position:absolute;top:10px;left:10px;" title="Psychée de gor et gone"></div>
</div>

[Scoubifitz]

j'ai mis le codage dans une table BBcode , parce que le HTML n'est pas activé sur le forum des forums ...

on va simplifier tout ça , tout en le compliquant ...

on va garder la Map , mais on va mettre chaque participant dans une div (comme à présent) et régler la position et l'apparence dans le CSS ...

chaque div aura donc une class pour l'apparence ("ship" comme le bateau), et une class pour la position (du nom du participant) ...

<div class="ship exemple" title="exemple"></div>

la class "ship" aura un bateau en image de fond , d'une taille de 55px et 3 des bords arrondis ...

Code:

.ship{
background:url('http://img11.hostingpics.net/pics/642136pictovoilier.png') center no-repeat;
width:55px;
height:55px;
position:absolute;
-moz-border-radius:0 30px 30px;
-webkit-border-radius:0 30px 30px;
border-radius:0 30px 30px;
}

la class "exemple" aura la couleur du participant (en semi-transparence) et la position du coin haut-gauche ...

Code:


.exemple{
background-color:rgba(255,255,255,0.7);
top:405px;
left:317px;
}

le bateau blanc sera donc ancré au port de la Tisserie

voilà le code complet , si vous avez des questions , n'hésitez pas :

Code:

<center><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="100" height="3">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="mp3=http://www.archive-host.com/files/1679727/971e6b8110bd71cb5648125842a5ee4cef93a149/Mer_calme.mp3&amp;autoplay=1&amp;volume=40" />
</object></center>

<center><table width="88%" cellpadding="3" cellspacing="1" border="0" bgcolor="#000000"><tr>
<td width=10 style="color:white" bgcolor="#b8b885">&gt;</td>
<td style="color:#333333;font-weight:bold;background-color:#b8b885;">CARTE DU JEU : dernière maj 15-09-12</td>
</tr></table></center>

<div style="width:1024px;height:1024px;position:relative;top:0px;left:0px;margin:auto">
<img usemap="#page_d_accueil" src="http://www.archive-host.com/files/1736465/971e6b8110bd71cb5648125842a5ee4cef93a149/1024_5_noms.png" width="1024" height="1024" border="0">
<map name="page_d_accueil">
<area shape="rect" title="Kanayé" coords="204,63,209,68" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Port-Royal" coords="537,541,542,546" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Sainte-Croix" coords="862,67,867,72" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Collense" coords="555,239,560,244" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Basses-mines" coords="506,77,511,82" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Les-Forges" coords="808,371,813,376" href="http://sainte-croix.forumgratuit.org/h4-les-forges" />
<area shape="rect" title="Espéride" coords="208,279,213,284" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="La-Tisserie" coords="312,400,317,405" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Les-Scieries" coords="362,304,367,309" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Haut-Marché" coords="385,954,390,959" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Auberge du pendu" coords="261,598,266,603" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Les chantiers navals" coords="498,744,503,749" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Puits-du-Bouc" coords="100,520,105,525" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Pas-du-Levant" coords="991,740,996,745" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Hospital" coords="924,512,929,517" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Baie-des-geoles" coords="623,66,628,71" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Cap Nord" coords="329,788,334,793" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="rect" title="Les-Chenaux" coords="862,277,867,282" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="poly" title="L'île des pirates" coords="201, 17, 175, 37, 175, 52, 181, 59, 197, 69, 222, 71, 247, 63, 253, 56, 252, 47, 230, 22, 222, 17, 201, 17" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="poly" title="L'île du Lézard" coords="321, 358, 283, 394, 268, 449, 283, 449, 338, 392, 321, 358" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="poly" title="Comptoir des boucaniers" coords="49, 495, 17, 518, 17, 543, 119, 529, 180, 496, 176, 485, 135, 490, 96, 510, 49, 495" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="poly" title="Forest aux druides" coords="959,12,969,26,981,26,997,51,995,63,958,62,938,31,959,12"
href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
<area shape="poly" title="Agriculture" coords="929,139,950,144,955,159,940,160,941,185,928,187,921,183,925,167,907,158,916,153,913,144,929,139"
href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
<area shape="poly" title="Elevage" coords="865,318,916,319,925,335,925,352,884,353,871,865,318"
href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
<area shape="poly" title="Royaume des Terres du Levant" coords="790, 0, 757, 32, 861, 94, 808, 111, 849, 220, 782, 244, 747, 350, 810, 382, 1003, 406, 940, 597, 983, 746, 1024, 750, 1024, 0, 790, 0"
href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
<area shape="poly" title="Lin" coords="306,927,295,961,312,957,325,961,333,959,339,949,330,939,317,941,306,927" href="http://sainte-croix.forumgratuit.org/h10-triangle" />
<area shape="poly" title="Royaume du triangle" coords="328, 786, 266, 886, 238, 967, 411, 966, 415, 948, 381, 862, 328, 786" href="http://sainte-croix.forumgratuit.org/h10-triangle" />
<area shape="poly" title="Royaume des Espérides" coords="164, 204, 109, 212, 59, 251, 36, 294, 33, 325, 42, 338, 63, 358, 160, 403, 214, 332, 200, 225, 164, 204" href="http://sainte-croix.forumgratuit.org/h9-roy-esperides" />
<area shape="poly" title="Mines de charbon" coords="559,65,570,74,574,83,542,83,559,65" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
<area shape="poly" title="Mines de fer" coords="358,263,370,275,329,275,339,265,346,270,350,263,358,263" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
<area shape="poly" title="Les Provinces-Unies" coords="485, 42, 403, 133, 311, 273, 309, 291, 399, 368, 461, 277, 565, 311, 713, 169, 692, 84, 647, 57, 525, 31, 497, 33, 485, 42" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
<area shape="poly" title="Delta ensablé" coords="536,543,531,540,520,539,506,551,505,556,520,559,536,552,536,543" href="http://sainte-croix.forumgratuit.org/h6-grandes-terres" />
<area shape="poly" title="Royaume des grandes Terres" coords="677, 356, 504, 452, 465, 486, 452, 505, 445, 621, 506, 787, 598, 875, 683, 904, 798, 918, 874, 917, 917, 897, 928, 854, 928, 454, 915, 430, 863, 399, 718, 361, 677, 356" href="http://sainte-croix.forumgratuit.org/h6-grandes-terres" />
<area shape="poly" title="Les îles désertes" coords="244, 550, 196, 573, 184, 601, 183, 625, 198, 655, 230, 680, 283, 692, 291, 689, 351, 636, 344, 553, 244, 550" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
<area shape="poly" title="L'île de la Flibuste" coords="139, 741, 109, 756, 94, 769, 49, 773, 33, 784, 33, 808, 37, 811, 100, 824, 130, 825, 182, 799, 189, 786, 182, 774, 148, 745, 139, 741" href="http://sainte-croix.forumgratuit.org/h1-carte-interactive" />
</map>
<style type="text/css">
<!--
.ship{
background:url('http://img11.hostingpics.net/pics/642136pictovoilier.png') center no-repeat;
width:55px;
height:55px;
position:absolute;
-moz-border-radius:0 30px 30px;
-webkit-border-radius:0 30px 30px;
border-radius:0 30px 30px;
}
.exemple{
background-color:rgba(255,255,255,0.7);
top:405px;
left:317px;
}
.Henri{
background-color:rgba(118,6,6,0.7);
top:881px;
left:378px;
}
.Philippe{
background-color:rgba(176,0,196,0.7);
top:220px;
left:203px;
}
.Guillaume{
background-color:rgba(235,26,61,0.7);
top:213px;
left:500px;
}
.François{
background-color:rgba(6,23,175,0.7);
top:260px;
left:857px;
}
.Charles{
background-color:rgba(12,105,33,0.7);
top:655px;
left:700px;
}
.Psychee{
background-color:rgba(0,0,0,0.7);
top:10px;
left:10px;
}
-->
</style>
<div class="ship exemple" title="exemple"></div>
<div class="ship Henri" title="Henri le fol"></div>
<div class="ship Philippe" title="Philippe II d'Hespérides"></div>
<div class="ship Guillaume" title="Guillaume le navigateur"></div>
<div class="ship François" title="François l'envahisseur"></div>
<div class="ship Charles" title="Charles le sauvage"></div>
<div class="ship Psychee" title="Psychée de gor et gone"></div>
</div>

[emc2]

Merci !
C'est exactement ça !
Et c'était vraiment bien au-delà de mes compétences. Encore une fois miles merci.
Une dernière question: Quel est l'élément qui permet de déterminer la propriété transparente de la couleur des différents "bateaux" ? Je n'ai pas su identifier cela dans les codes.

[Scoubifitz]

pour la transparence , j'ai utilisé la fonction rgba pour la couleur de fond (ne fonctionne pas sur IE), red-green-blue (ou rouge-vert-bleu) pour les couleurs primaires d'un écran et un 4e chiffre de zéro à un pour la transparence ...

on peut trouver le code sur code-couleur.com

0.1 est très transparent , et 0.9 est très opaque ...

background-color:rgba(255,255,255,0.7);

par contre , j'ai remarqué que "François l'envahisseur"(navire bleu) cache les "Chenaux" avec le nouvel affichage. Et en voulant résoudre le problème , j'ai vu qu'il y a 2 ports qui n'ont pas de nom dans "l'ile des Espérides" ...

le principe des lieux est le même que pour les bateaux , une div ... ça permet de rajouter des points sur la carte sans modifier l'image de la carte ...

de plus "les forges" devraient mener à une image ... autant faire apparaitre cette image sur la carte !^^

nouveau code :

Code:

<center><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="100" height="3">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="mp3=http://www.archive-host.com/files/1679727/971e6b8110bd71cb5648125842a5ee4cef93a149/Mer_calme.mp3&amp;autoplay=1&amp;volume=40" />
</object></center>

<center><table width="88%" cellpadding="3" cellspacing="1" border="0" bgcolor="#000000"><tr>
<td width=10 style="color:white" bgcolor="#b8b885">></td>
<td style="color:#333333;font-weight:bold;background-color:#b8b885;">CARTE DU JEU : dernière maj 15-09-12</td>
</tr></table></center>

<div style="width:1024px;height:1024px;position:relative;top:0px;left:0px;margin:auto">
<img usemap="#page_d_accueil" src="http://www.archive-host.com/files/1736465/971e6b8110bd71cb5648125842a5ee4cef93a149/1024_5_noms.png" width="1024" height="1024" border="0">
<map name="page_d_accueil">
<area shape="poly" title="L'île des pirates" coords="201, 17, 175, 37, 175, 52, 181, 59, 197, 69, 222, 71, 247, 63, 253, 56, 252, 47, 230, 22, 222, 17, 201, 17" href="http://sainte-croix.forumgratuit.org/h1-" />
<area shape="poly" title="L'île du Lézard" coords="321, 358, 283, 394, 268, 449, 283, 449, 338, 392, 321, 358" href="http://sainte-croix.forumgratuit.org/h1-" />
<area shape="poly" title="Comptoir des boucaniers" coords="49, 495, 17, 518, 17, 543, 119, 529, 180, 496, 176, 485, 135, 490, 96, 510, 49, 495" href="http://sainte-croix.forumgratuit.org/h1-" />
<area shape="poly" title="Forest aux druides" coords="959,12,969,26,981,26,997,51,995,63,958,62,938,31,959,12"
href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
<area shape="poly" title="Agriculture" coords="929,139,950,144,955,159,940,160,941,185,928,187,921,183,925,167,907,158,916,153,913,144,929,139"
href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
<area shape="poly" title="Elevage" coords="865,318,916,319,925,335,925,352,884,353,871,865,318"
href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
<area shape="poly" title="Royaume des Terres du Levant" coords="790, 0, 757, 32, 861, 94, 808, 111, 849, 220, 782, 244, 747, 350, 810, 382, 1003, 406, 940, 597, 983, 746, 1024, 750, 1024, 0, 790, 0"
href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
<area shape="poly" title="Lin" coords="306,927,295,961,312,957,325,961,333,959,339,949,330,939,317,941,306,927" href="http://sainte-croix.forumgratuit.org/h10-triangle" />
<area shape="poly" title="Royaume du triangle" coords="328, 786, 266, 886, 238, 967, 411, 966, 415, 948, 381, 862, 328, 786" href="http://sainte-croix.forumgratuit.org/h10-triangle" />
<area shape="poly" title="Royaume des Espérides" coords="164, 204, 109, 212, 59, 251, 36, 294, 33, 325, 42, 338, 63, 358, 160, 403, 214, 332, 200, 225, 164, 204" href="http://sainte-croix.forumgratuit.org/h9-roy-esperides" />
<area shape="poly" title="Mines de charbon" coords="559,65,570,74,574,83,542,83,559,65" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
<area shape="poly" title="Mines de fer" coords="358,263,370,275,329,275,339,265,346,270,350,263,358,263" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
<area shape="poly" title="Les Provinces-Unies" coords="485, 42, 403, 133, 311, 273, 309, 291, 399, 368, 461, 277, 565, 311, 713, 169, 692, 84, 647, 57, 525, 31, 497, 33, 485, 42" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
<area shape="poly" title="Delta ensablé" coords="536,543,531,540,520,539,506,551,505,556,520,559,536,552,536,543" href="http://sainte-croix.forumgratuit.org/h6-grandes-terres" />
<area shape="poly" title="Royaume des grandes Terres" coords="677, 356, 504, 452, 465, 486, 452, 505, 445, 621, 506, 787, 598, 875, 683, 904, 798, 918, 874, 917, 917, 897, 928, 854, 928, 454, 915, 430, 863, 399, 718, 361, 677, 356" href="http://sainte-croix.forumgratuit.org/h6-grandes-terres" />
<area shape="poly" title="Les îles désertes" coords="244, 550, 196, 573, 184, 601, 183, 625, 198, 655, 230, 680, 283, 692, 291, 689, 351, 636, 344, 553, 244, 550" href="http://sainte-croix.forumgratuit.org/h1-" />
<area shape="poly" title="L'île de la Flibuste" coords="139, 741, 109, 756, 94, 769, 49, 773, 33, 784, 33, 808, 37, 811, 100, 824, 130, 825, 182, 799, 189, 786, 182, 774, 148, 745, 139, 741" href="http://sainte-croix.forumgratuit.org/h1-" />
</map>
<style type="text/css">
<!--
/* forme des participants */
 
.ship{
background:url('http://img11.hostingpics.net/pics/642136pictovoilier.png') center no-repeat;
width:55px;height:55px;
position:absolute;
-moz-border-radius:0 30px 30px;
-webkit-border-radius:0 30px 30px;
border-radius:0 30px 30px;
}
 
/* position des participants */
 
.exemple{
background-color:rgba(255,255,255,0.7);
top:405px;left:317px;
}
.Henri{
background-color:rgba(118,6,6,0.7);
top:881px;left:378px;
}
.Philippe{
background-color:rgba(176,0,196,0.7);
top:220px;left:203px;
}
.Guillaume{
background-color:rgba(235,26,61,0.7);
top:213px;left:500px;
}
.François{
background-color:rgba(6,23,175,0.7);
top:260px;left:857px;
}
.Charles{
background-color:rgba(12,105,33,0.7);
top:655px;left:700px;
}
.Psychee{
background-color:rgba(0,0,0,0.7);
top:10px;left:10px;
}
 
/* forme des lieux */
 
.lieu{
background-color:#febe7e;
width:8px;height:8px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
position:absolute;
z-index:2;
}
 
/* position des lieux */
 
.Kanaye{
left:204px;top:63px;
}
.PortRoyal{
top:541px;left:537px;
}
.SainteCroix{
top:67px;left:862px;
}
.Collense{
top:239px;left:555px;
}
.BassesMines{
top:77px;left:506px;
}
.LesForges{
top:371px;left:808px;
z-index:4;
}
.LesForges img{
 display:none;
}
.LesForges:hover img{
display:block;
position:absolute;
top:10px;left:-570px;
}
.Esperide{
top:279px;left:208px;
}
.Tisserie{
top:400px;left:312px;
}
.Scieries{
top:304px;left:362px;
}
.HautMarche{
top:954px;left:385px;
}
.AubergePendu{
top:598px;left:261px;
}
.ChantiersNavals{
top:744px;left:498px;
}
.PuitsBouc{
top:520px;left:100px;
}
.PasLevant{
top:740px;left:991px;
}
.Hospital{
top:512px;left:924px;
}
.BaieGeoles{
top:66px;left:623px;
}
.CapNord{
top:788px;left:329px;
}
.Chenaux{
top:277px;left:862px;
}
-->
</style>
<div class="lieu Kanaye" title="Kanayé"></div>
<div class="lieu PortRoyal" title="Port-Royal"></div>
<div class="lieu SainteCroix" title="Sainte-Croix"></div>
<div class="lieu Collense" title="Collense"></div>
<div class="lieu BassesMines" title="Basses-mines"></div>
  <div class="lieu LesForges" title="Les-Forges"><img src="http://i44.servimg.com/u/f44/16/74/01/20/nonjvi10.jpg" /></div>
<div class="lieu Esperide" title="Espéride"></div>
<div class="lieu Tisserie" title="La-Tisserie"></div>
<div class="lieu Scieries" title="Les-Scieries"></div>
<div class="lieu HautMarche" title="Haut-Marché"></div>
<div class="lieu AubergePendu" title="Auberge du pendu"></div>
<div class="lieu ChantiersNavals" title="Les chantiers navals"></div>
<div class="lieu PuitsBouc" title="Puits-du-Bouc"></div>
<div class="lieu PasLevant" title="Pas-du-Levant"></div>
<div class="lieu Hospital" title="Hospital"></div>
<div class="lieu BaieGeoles" title="Baie-des-geoles"></div>
<div class="lieu CapNord" title="Cap Nord"></div>
<div class="lieu Chenaux" title="Les-Chenaux"></div>

<div class="ship exemple" title="exemple"></div>
<div class="ship Henri" title="Henri le fol"></div>
<div class="ship Philippe" title="Philippe II d'Hespérides"></div>
<div class="ship Guillaume" title="Guillaume le navigateur"></div>
<div class="ship François" title="François l'envahisseur"></div>
<div class="ship Charles" title="Charles le sauvage"></div>
<div class="ship Psychee" title="Psychée de gor et gone"></div>
</div>

[emc2]

Tout cela est juste, mais le forum est en construction et je n'ai pas encore créé toute les pages html. Et effectivement, il y a deux villes qui n'ont pas encore reçu de nom. Mais ça va venir.
Je teste ce nouveau code et je reviens ...

Effectivement ! C'est beaucoup mieux ! Et surtout cela va me permettre de mettre en image les différents port !
Merci encore une fois ! Je bosser à tout ça !
Je cale la balise "résolu" c'est au-delà de ce que j'espérais.

[Scoubifitz]

un petit plus , pour l'apparence , même avec IE ...

Code:

    <center><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="100" height="3">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
    <param name="bgcolor" value="#000000" />
    <param name="FlashVars" value="mp3=http://www.archive-host.com/files/1679727/971e6b8110bd71cb5648125842a5ee4cef93a149/Mer_calme.mp3&amp;autoplay=1&amp;volume=40" />
    </object></center>

    <center><table width="88%" cellpadding="3" cellspacing="1" border="0" bgcolor="#000000"><tr>
    <td width=10 style="color:white" bgcolor="#b8b885">></td>
    <td style="color:#333333;font-weight:bold;background-color:#b8b885;">CARTE DU JEU : dernière maj 15-09-12</td>
    </tr></table></center>

    <div style="width:1024px;height:1024px;position:relative;top:0px;left:0px;margin:auto">
    <img usemap="#page_d_accueil" src="http://www.archive-host.com/files/1736465/971e6b8110bd71cb5648125842a5ee4cef93a149/1024_5_noms.png" width="1024" height="1024" border="0">
    <map name="page_d_accueil">
    <area shape="poly" title="L'île des pirates" coords="201, 17, 175, 37, 175, 52, 181, 59, 197, 69, 222, 71, 247, 63, 253, 56, 252, 47, 230, 22, 222, 17, 201, 17" href="http://sainte-croix.forumgratuit.org/h1-" />
    <area shape="poly" title="L'île du Lézard" coords="321, 358, 283, 394, 268, 449, 283, 449, 338, 392, 321, 358" href="http://sainte-croix.forumgratuit.org/h1-" />
    <area shape="poly" title="Comptoir des boucaniers" coords="49, 495, 17, 518, 17, 543, 119, 529, 180, 496, 176, 485, 135, 490, 96, 510, 49, 495" href="http://sainte-croix.forumgratuit.org/h1-" />
    <area shape="poly" title="Forest aux druides" coords="959,12,969,26,981,26,997,51,995,63,958,62,938,31,959,12"
    href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
    <area shape="poly" title="Agriculture" coords="929,139,950,144,955,159,940,160,941,185,928,187,921,183,925,167,907,158,916,153,913,144,929,139"
    href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
    <area shape="poly" title="Elevage" coords="865,318,916,319,925,335,925,352,884,353,871,865,318"
    href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
    <area shape="poly" title="Royaume des Terres du Levant" coords="790, 0, 757, 32, 861, 94, 808, 111, 849, 220, 782, 244, 747, 350, 810, 382, 1003, 406, 940, 597, 983, 746, 1024, 750, 1024, 0, 790, 0"
    href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
    <area shape="poly" title="Lin" coords="306,927,295,961,312,957,325,961,333,959,339,949,330,939,317,941,306,927" href="http://sainte-croix.forumgratuit.org/h10-triangle" />
    <area shape="poly" title="Royaume du triangle" coords="328, 786, 266, 886, 238, 967, 411, 966, 415, 948, 381, 862, 328, 786" href="http://sainte-croix.forumgratuit.org/h10-triangle" />
    <area shape="poly" title="Royaume des Espérides" coords="164, 204, 109, 212, 59, 251, 36, 294, 33, 325, 42, 338, 63, 358, 160, 403, 214, 332, 200, 225, 164, 204" href="http://sainte-croix.forumgratuit.org/h9-roy-esperides" />
    <area shape="poly" title="Mines de charbon" coords="559,65,570,74,574,83,542,83,559,65" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
    <area shape="poly" title="Mines de fer" coords="358,263,370,275,329,275,339,265,346,270,350,263,358,263" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
    <area shape="poly" title="Les Provinces-Unies" coords="485, 42, 403, 133, 311, 273, 309, 291, 399, 368, 461, 277, 565, 311, 713, 169, 692, 84, 647, 57, 525, 31, 497, 33, 485, 42" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
    <area shape="poly" title="Delta ensablé" coords="536,543,531,540,520,539,506,551,505,556,520,559,536,552,536,543" href="http://sainte-croix.forumgratuit.org/h6-grandes-terres" />
    <area shape="poly" title="Royaume des grandes Terres" coords="677, 356, 504, 452, 465, 486, 452, 505, 445, 621, 506, 787, 598, 875, 683, 904, 798, 918, 874, 917, 917, 897, 928, 854, 928, 454, 915, 430, 863, 399, 718, 361, 677, 356" href="http://sainte-croix.forumgratuit.org/h6-grandes-terres" />
    <area shape="poly" title="Les îles désertes" coords="244, 550, 196, 573, 184, 601, 183, 625, 198, 655, 230, 680, 283, 692, 291, 689, 351, 636, 344, 553, 244, 550" href="http://sainte-croix.forumgratuit.org/h1-" />
    <area shape="poly" title="L'île de la Flibuste" coords="139, 741, 109, 756, 94, 769, 49, 773, 33, 784, 33, 808, 37, 811, 100, 824, 130, 825, 182, 799, 189, 786, 182, 774, 148, 745, 139, 741" href="http://sainte-croix.forumgratuit.org/h1-" />
    </map>
    <style type="text/css">
    <!--
    /* forme des participants */
   
    .ship{
    background:url('http://img11.hostingpics.net/pics/642136pictovoilier.png') center no-repeat;
    width:59px;height:59px;
    border:1px solid #bbb;opacity:0.8;
    position:absolute;
    -moz-border-radius:0 30px 30px;
    -webkit-border-radius:0 30px 30px;
    border-radius:0 30px 30px;
    }   
    .ship div{
    background:url('http://img11.hostingpics.net/pics/642136pictovoilier.png') center no-repeat;
    width:55px;height:55px;
    border:1px solid #bbb;margin:1px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    }
   
    /* position des participants */
   
    .exemple{
      background-color:#ffffff;
    top:405px;left:317px;
    }
    .Henri{
    background-color:#760606;
    top:881px;left:378px;
    }
    .Philippe{
    background-color:#b000c4;
    top:220px;left:203px;
    }
    .Guillaume{
    background-color:#eb1a3d;
    top:213px;left:500px;
    }
    .François{
    background-color:#0617af;
    top:260px;left:857px;
    }
    .Charles{
    background-color:#0c6921;
    top:655px;left:700px;
    }
    .Psychee{
    background-color:#111111;
    top:10px;left:10px;
    }
   
    /* forme des lieux */
   
    .lieu{
    background-color:#febe7e;
    width:8px;height:8px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    position:absolute;
    z-index:2;
    }
   
    /* position des lieux */
   
    .Kanaye{
    left:204px;top:63px;
    }
    .PortRoyal{
    top:541px;left:537px;
    }
    .SainteCroix{
    top:67px;left:862px;
    }
    .Collense{
    top:239px;left:555px;
    }
    .BassesMines{
    top:77px;left:506px;
    }
    .LesForges{
    top:371px;left:808px;
    z-index:4;
    }
    .LesForges img{
    display:none;
    }
    .LesForges:hover img{
    display:block;
    position:absolute;
    top:10px;left:-570px;
    }
    .Esperide{
    top:279px;left:208px;
    }
    .Tisserie{
    top:400px;left:312px;
    }
    .Scieries{
    top:304px;left:362px;
    }
    .HautMarche{
    top:954px;left:385px;
    }
    .AubergePendu{
    top:598px;left:261px;
    }
    .ChantiersNavals{
    top:744px;left:498px;
    }
    .PuitsBouc{
    top:520px;left:100px;
    }
    .PasLevant{
    top:740px;left:991px;
    }
    .Hospital{
    top:512px;left:924px;
    }
    .BaieGeoles{
    top:66px;left:623px;
    }
    .CapNord{
    top:788px;left:329px;
    }
    .Chenaux{
    top:277px;left:862px;
    }
    -->
    </style>
    <div class="lieu Kanaye" title="Kanayé"></div>
    <div class="lieu PortRoyal" title="Port-Royal"></div>
    <div class="lieu SainteCroix" title="Sainte-Croix"></div>
    <div class="lieu Collense" title="Collense"></div>
    <div class="lieu BassesMines" title="Basses-mines"></div>
      <div class="lieu LesForges" title="Les-Forges"><img src="http://i44.servimg.com/u/f44/16/74/01/20/nonjvi10.jpg" /></div>
    <div class="lieu Esperide" title="Espéride"></div>
    <div class="lieu Tisserie" title="La-Tisserie"></div>
    <div class="lieu Scieries" title="Les-Scieries"></div>
    <div class="lieu HautMarche" title="Haut-Marché"></div>
    <div class="lieu AubergePendu" title="Auberge du pendu"></div>
    <div class="lieu ChantiersNavals" title="Les chantiers navals"></div>
    <div class="lieu PuitsBouc" title="Puits-du-Bouc"></div>
    <div class="lieu PasLevant" title="Pas-du-Levant"></div>
    <div class="lieu Hospital" title="Hospital"></div>
    <div class="lieu BaieGeoles" title="Baie-des-geoles"></div>
    <div class="lieu CapNord" title="Cap Nord"></div>
    <div class="lieu Chenaux" title="Les-Chenaux"></div>

      <div class="ship exemple" title="exemple"><div></div></div>
    <div class="ship Henri" title="Henri le fol"><div></div></div>
    <div class="ship Philippe" title="Philippe II d'Hespérides"><div></div></div>
    <div class="ship Guillaume" title="Guillaume le navigateur"><div></div></div>
    <div class="ship François" title="François l'envahisseur"><div></div></div>
    <div class="ship Charles" title="Charles le sauvage"><div></div></div>
    <div class="ship Psychee" title="Psychée de gor et gone"><div></div></div>
    </div>

[emc2]

Je viens de me rendre compte qu'il est impossible de "coller" une image au survol des autres ports. j'ai testé cele-ci

Code:

http://i34.servimg.com/u/f34/16/74/01/20/auberg10.jpg

sur le port de l'auberge du pendu, et l'image est apparente systématiquement par dessus la carte sans que l'on survole ce port. J'ai pourtant opéré à l'identique !
Je teste le code ci-dessus pour voir "le petit plus" que cela apporte...

... Plutôt pas mal cet effet fait penser à une loupe pointant sur la position exacte du navire. C'est très bon rendu. Une fois de plus, bravo la technique !

[Scoubifitz]

pour une image supplémentaire , ça se passe au niveau du CSS , pas seulement au niveau du HTML ...

si vous rajoutez :

Code:

<div class="lieu AubergePendu" title="Auberge du pendu"><img src="http://i34.servimg.com/u/f34/16/74/01/20/auberg10.jpg" /></div>

il faut aussi modifier le CSS :

Code:

    .AubergePendu{
    top:598px;left:261px;
    z-index:4;
    }
    .AubergePendu img{
    display:none;
    }
    .AubergePendu:hover img{
    display:block;
    position:absolute;
    top:10px;left:-220px;
    }

un z-index , pour que l'image apparaisse pardessus les points
un display:none pour faire disparaitre l'mage,
un display:block avec une position fixe , au survol du point ...

le code complet:

Code:

    <center><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" width="100" height="3">
    <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
    <param name="bgcolor" value="#000000" />
    <param name="FlashVars" value="mp3=http://www.archive-host.com/files/1679727/971e6b8110bd71cb5648125842a5ee4cef93a149/Mer_calme.mp3&amp;autoplay=1&amp;volume=40" />
    </object></center>

    <center><table width="88%" cellpadding="3" cellspacing="1" border="0" bgcolor="#000000"><tr>
    <td width=10 style="color:white" bgcolor="#b8b885">></td>
    <td style="color:#333333;font-weight:bold;background-color:#b8b885;">CARTE DU JEU : dernière maj 15-09-12</td>
    </tr></table></center>

    <div style="width:1024px;height:1024px;position:relative;top:0px;left:0px;margin:auto">
    <img usemap="#page_d_accueil" src="http://www.archive-host.com/files/1736465/971e6b8110bd71cb5648125842a5ee4cef93a149/1024_5_noms.png" width="1024" height="1024" border="0">
    <map name="page_d_accueil">
    <area shape="poly" title="L'île des pirates" coords="201, 17, 175, 37, 175, 52, 181, 59, 197, 69, 222, 71, 247, 63, 253, 56, 252, 47, 230, 22, 222, 17, 201, 17" href="http://sainte-croix.forumgratuit.org/h1-" />
    <area shape="poly" title="L'île du Lézard" coords="321, 358, 283, 394, 268, 449, 283, 449, 338, 392, 321, 358" href="http://sainte-croix.forumgratuit.org/h1-" />
    <area shape="poly" title="Comptoir des boucaniers" coords="49, 495, 17, 518, 17, 543, 119, 529, 180, 496, 176, 485, 135, 490, 96, 510, 49, 495" href="http://sainte-croix.forumgratuit.org/h1-" />
    <area shape="poly" title="Forest aux druides" coords="959,12,969,26,981,26,997,51,995,63,958,62,938,31,959,12"
    href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
    <area shape="poly" title="Agriculture" coords="929,139,950,144,955,159,940,160,941,185,928,187,921,183,925,167,907,158,916,153,913,144,929,139"
    href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
    <area shape="poly" title="Elevage" coords="865,318,916,319,925,335,925,352,884,353,871,865,318"
    href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
    <area shape="poly" title="Royaume des Terres du Levant" coords="790, 0, 757, 32, 861, 94, 808, 111, 849, 220, 782, 244, 747, 350, 810, 382, 1003, 406, 940, 597, 983, 746, 1024, 750, 1024, 0, 790, 0"
    href="http://sainte-croix.forumgratuit.org/h7-terres-du-levant" />
    <area shape="poly" title="Lin" coords="306,927,295,961,312,957,325,961,333,959,339,949,330,939,317,941,306,927" href="http://sainte-croix.forumgratuit.org/h10-triangle" />
    <area shape="poly" title="Royaume du triangle" coords="328, 786, 266, 886, 238, 967, 411, 966, 415, 948, 381, 862, 328, 786" href="http://sainte-croix.forumgratuit.org/h10-triangle" />
    <area shape="poly" title="Royaume des Espérides" coords="164, 204, 109, 212, 59, 251, 36, 294, 33, 325, 42, 338, 63, 358, 160, 403, 214, 332, 200, 225, 164, 204" href="http://sainte-croix.forumgratuit.org/h9-roy-esperides" />
    <area shape="poly" title="Mines de charbon" coords="559,65,570,74,574,83,542,83,559,65" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
    <area shape="poly" title="Mines de fer" coords="358,263,370,275,329,275,339,265,346,270,350,263,358,263" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
    <area shape="poly" title="Les Provinces-Unies" coords="485, 42, 403, 133, 311, 273, 309, 291, 399, 368, 461, 277, 565, 311, 713, 169, 692, 84, 647, 57, 525, 31, 497, 33, 485, 42" href="http://sainte-croix.forumgratuit.org/h8-provinces-unies" />
    <area shape="poly" title="Delta ensablé" coords="536,543,531,540,520,539,506,551,505,556,520,559,536,552,536,543" href="http://sainte-croix.forumgratuit.org/h6-grandes-terres" />
    <area shape="poly" title="Royaume des grandes Terres" coords="677, 356, 504, 452, 465, 486, 452, 505, 445, 621, 506, 787, 598, 875, 683, 904, 798, 918, 874, 917, 917, 897, 928, 854, 928, 454, 915, 430, 863, 399, 718, 361, 677, 356" href="http://sainte-croix.forumgratuit.org/h6-grandes-terres" />
    <area shape="poly" title="Les îles désertes" coords="244, 550, 196, 573, 184, 601, 183, 625, 198, 655, 230, 680, 283, 692, 291, 689, 351, 636, 344, 553, 244, 550" href="http://sainte-croix.forumgratuit.org/h1-" />
    <area shape="poly" title="L'île de la Flibuste" coords="139, 741, 109, 756, 94, 769, 49, 773, 33, 784, 33, 808, 37, 811, 100, 824, 130, 825, 182, 799, 189, 786, 182, 774, 148, 745, 139, 741" href="http://sainte-croix.forumgratuit.org/h1-" />
    </map>
    <style type="text/css">
    <!--
    /* forme des participants */
   
    .ship{
    background:url('http://img11.hostingpics.net/pics/642136pictovoilier.png') center no-repeat;
    width:59px;height:59px;
    border:1px solid #bbb;opacity:0.8;
    position:absolute;
    -moz-border-radius:0 30px 30px;
    -webkit-border-radius:0 30px 30px;
    border-radius:0 30px 30px;
    }   
    .ship div{
    background:url('http://img11.hostingpics.net/pics/642136pictovoilier.png') center no-repeat;
    width:55px;height:55px;
    border:1px solid #bbb;margin:1px;
    -moz-border-radius:30px;
    -webkit-border-radius:30px;
    border-radius:30px;
    }
   
    /* position des participants */
   
    .exemple{
      background-color:#ffffff;
    top:405px;left:317px;
    }
    .Henri{
    background-color:#760606;
    top:881px;left:378px;
    }
    .Philippe{
    background-color:#b000c4;
    top:220px;left:203px;
    }
    .Guillaume{
    background-color:#eb1a3d;
    top:213px;left:500px;
    }
    .François{
    background-color:#0617af;
    top:260px;left:857px;
    }
    .Charles{
    background-color:#0c6921;
    top:655px;left:700px;
    }
    .Psychee{
    background-color:#111111;
    top:10px;left:10px;
    }
   
    /* forme des lieux */
   
    .lieu{
    background-color:#febe7e;
    width:8px;height:8px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    position:absolute;
    z-index:2;
    }
   
    /* position des lieux */
   
    .Kanaye{
    left:204px;top:63px;
    }
    .PortRoyal{
    top:541px;left:537px;
    }
    .SainteCroix{
    top:67px;left:862px;
    }
    .Collense{
    top:239px;left:555px;
    }
    .BassesMines{
    top:77px;left:506px;
    }
    .LesForges{
    top:371px;left:808px;
    z-index:4;
    }
    .LesForges img{
    display:none;
    }
    .LesForges:hover img{
    display:block;
    position:absolute;
    top:10px;left:-570px;
    }
    .Esperide{
    top:279px;left:208px;
    }
    .Tisserie{
    top:400px;left:312px;
    }
    .Scieries{
    top:304px;left:362px;
    }
    .HautMarche{
    top:954px;left:385px;
    }
    .AubergePendu{
    top:598px;left:261px;
    z-index:4;
    }
    .AubergePendu img{
    display:none;
    }
    .AubergePendu:hover img{
    display:block;
    position:absolute;
    top:10px;left:-220px;
    }
    .Esperide{
    top:279px;left:208px;
    }
    .ChantiersNavals{
    top:744px;left:498px;
    }
    .PuitsBouc{
    top:520px;left:100px;
    }
    .PasLevant{
    top:740px;left:991px;
    }
    .Hospital{
    top:512px;left:924px;
    }
    .BaieGeoles{
    top:66px;left:623px;
    }
    .CapNord{
    top:788px;left:329px;
    }
    .Chenaux{
    top:277px;left:862px;
    }
    -->
    </style>
    <div class="lieu Kanaye" title="Kanayé"></div>
    <div class="lieu PortRoyal" title="Port-Royal"></div>
    <div class="lieu SainteCroix" title="Sainte-Croix"></div>
    <div class="lieu Collense" title="Collense"></div>
    <div class="lieu BassesMines" title="Basses-mines"></div>
      <div class="lieu LesForges" title="Les-Forges"><img src="http://i44.servimg.com/u/f44/16/74/01/20/nonjvi10.jpg" /></div>
    <div class="lieu Esperide" title="Espéride"></div>
    <div class="lieu Tisserie" title="La-Tisserie"></div>
    <div class="lieu Scieries" title="Les-Scieries"></div>
    <div class="lieu HautMarche" title="Haut-Marché"></div>
    <div class="lieu AubergePendu" title="Auberge du pendu"><img src="http://i34.servimg.com/u/f34/16/74/01/20/auberg10.jpg" /></div>
    <div class="lieu ChantiersNavals" title="Les chantiers navals"></div>
    <div class="lieu PuitsBouc" title="Puits-du-Bouc"></div>
    <div class="lieu PasLevant" title="Pas-du-Levant"></div>
    <div class="lieu Hospital" title="Hospital"></div>
    <div class="lieu BaieGeoles" title="Baie-des-geoles"></div>
    <div class="lieu CapNord" title="Cap Nord"></div>
    <div class="lieu Chenaux" title="Les-Chenaux"></div>

      <div class="ship exemple" title="exemple"><div></div></div>
    <div class="ship Henri" title="Henri le fol"><div></div></div>
    <div class="ship Philippe" title="Philippe II d'Hespérides"><div></div></div>
    <div class="ship Guillaume" title="Guillaume le navigateur"><div></div></div>
    <div class="ship François" title="François l'envahisseur"><div></div></div>
    <div class="ship Charles" title="Charles le sauvage"><div></div></div>
    <div class="ship Psychee" title="Psychée de gor et gone"><div></div></div>
    </div>

[emc2]

Oui, ainsi cela fonctionne. Je comprends donc que c'est le CSS qui donne le protocole d'affichage.
Je ne vais donc pas mettre tous les ports en image pour ne pas alourdir le CSS inutilement. Seront illustrés ceux sur lesquels il y aura une actualité dans le jeu.
Une tonne de travail se profile pour les prochains jours !
Pour moi, c'est parfait, je balise donc le fil. Et respect à vous ! C'est effrayant cette maîtrise du html !