[EXEMPLE 1]

<style type="text/css">
.Wrapper { padding:0; margin:0; position:relative; }
#Map { overflow:hidden; }
#Image1 { position:absolute; top:30px; left:28px;}
</style>
<div class="Wrapper">
<img alt="dd" src="http://www.dotnetnuke.fr/Portals/0/DNN.FR.gif" id="Map" />
<img alt="0" src="http://www.dotnetnuke.fr/DesktopModules/Forum/Themes/DNNSilver/Images/s_offline.gif" id="Image1" />
</div>

L'objet positionné en ABSOLUTE va prendre pour référence le premier objet parent positionné. Par défaut, il utilisera la fenêtre. J'inclue donc les images à positionner dans une DIV (Wrapper) que je positionne relativement à son environnement. Ensuite je rend l'overflow de l'image Map en caché au flux principal pour que les autres objets (les drapeaux (ici des ordis)) ne tiennent pas compte du display:Block qui va de pair avec l'utilisation d'une image, et je positionne le drapeau (le positionnement a donc lieu par rapport au Wrapper). J'aurai aussi pu mettre l'image Map en Background de Wrapper mais cette technique d'overFlow:hiden peut t'être utile si deux de tes drapeaux se chevauchent.
Ici  il n'y a que des images, mais j'imagine que tu veux mettre des liens sur les drapeaux... il va donc falloir utiliser des DIV plutôt que de simples images, comme ça tu pourras coller ce que tu veux dedans (LinkButton ...)

Le même exemple avec plusieurs DIV positionnées.

<style type="text/css">
.Wrapper3 { padding:0; margin:0; position:relative; }
.Wrapper3 IMG { border:0; }
.Wrapper3 a, .Wrapper3 a:link, .Wrapper3 a:hover { text-decoration:none; border:0; }
#Map3 { overflow:hidden; }
.Volante0 { position:absolute; top:30px; left:28px;}
.Volante1 { position:absolute; top:10px; left:50px;}
.Volante2 { position:absolute; top:50px; left:50px;}
.Volante3 { position:absolute; top:30px; left:208px;}
.Volante4 { position:absolute; top:10px; left:195px;}
.Volante5 { position:absolute; top:50px; left:195px;}
</style>
<div class="Wrapper3"> <img alt="dd" src="http://www.dotnetnuke.fr/Portals/0/DNN.FR.gif" id="Ma32" />
  <div class="Volante0"> <a href="#nogo"> <img alt="0" src="http://www.dotnetnuke.fr/DesktopModules/Forum/Themes/DNNSilver/Images/s_offline.gif" /> </a> </div>
  <div class="Volante1"> <a href="#nogo"> <img alt="0" src="http://www.dotnetnuke.fr/DesktopModules/Forum/Themes/DNNSilver/Images/s_offline.gif" /> </a> </div>
  <div class="Volante2"> <a href="#nogo"> <img alt="0" src="http://www.dotnetnuke.fr/DesktopModules/Forum/Themes/DNNSilver/Images/s_offline.gif" /> </a> </div>
  <div class="Volante3"> <a href="#nogo"> <img alt="0" src="http://www.dotnetnuke.fr/DesktopModules/Forum/Themes/DNNSilver/Images/s_offline.gif" /> </a> </div>
  <div class="Volante4"> <a href="#nogo"> <img alt="0" src="http://www.dotnetnuke.fr/DesktopModules/Forum/Themes/DNNSilver/Images/s_offline.gif" /> </a> </div>
  <div class="Volante5"> <a href="#nogo"> <img alt="0" src="http://www.dotnetnuke.fr/DesktopModules/Forum/Themes/DNNSilver/Images/s_offline.gif" /> </a> </div>
</div>

SUPER !

Merci Seb pour toutes ces explications.
Effectivement c'est du CSS...

Je ne sais pas pourquoi je suis passé a coté de ca. C'est le coté ASP qui me perturbe...

Bon tel quel je n'ai pas réussi a faire fonctionné ton exemple (Le 1 ou le 2)... Certainement parceque le ASP nécéssite quelques adaptations.

Voici donc ce que j'ai écrit pour parvenir a mes fins

<style type="text/css>
.wrapper {padding:0;margin:0;position:relative
#map {overflow:hidden}
.pos59 { position:absolute; top:13px; left:68px; }
.pos93 { position:absolute; top:33px; left:72px; }
</style>

<div class="wrapper">
<Img src="/DotNetNuke/DesktopModules/MonModule/Images/France.jpg" id="map">
<asp:image ID="pos13" runat="serveur" ImageUrl="~/DesktopModule/MonModule/Image/Fanion.jpg" CssClass="pos59" />
<asp:image ID="pos93" runat="serveur" ImageUrl="~/DesktopModule/MonModule/Image/Fanion.jpg" CssClass="pos93" />
</div>

En fait la grande différence vient du fait que je suis obligé de spécifier le style CSS pour chacune de mes images, contrairement a tes exemples.

Je crois que j'ai encore beaucoup à apprendre !

Ouarff... Dans VS2005 j'ai bien mis server et non pas serveur comme indiqué dans mon message.

Pas d'URL pour voir mais ce que j'ai écrit fonctionne bien.

La seule chose c'est que manquant de recul sur ASP je serais curieux de savoir pourquoi je suis obligé de spécifier la cssClass, alors que toi dans tes exemples tu t'en passes.

Bon j'y ai cru, mais c'est pas encore ca.

En effet sous IE pas de probleme mes points sont bien positionnés sur la carte de france

En revance sous Firefox (2.0.5) c'est la cata. Les points sont alignés a droite et la carte sort du container.
(Ci dessous la capture)

Pourquoi ?

Je connais votre module, meme si je n'ai pas regarder son source.

Mais mon but n'est pas de placer des drapaux sur une carte.

Ce que je tente c'est de m'initier à la programmation ASP/VB/DNN/Et meme AJAX

Et aborder tout cela en Autodidacte ce n'est pas évident car l'ancien programmeur que je suis ne connais que Delphi et HTML.

Donc la petite carte de france, et les petits drapeaux n'est qu'un exercice. Le deuxième en fait aprés le classique "Hello Word !". Je n'ose meme pas imaginer la difficulté quand je vais aborder la base de données, ou encore les sécurité.

La difficulté est de plus amplifier par le manque de documentation. En dehors de ce qu'écrit M.Washington je ne trouve pas grand chose et en plus j'ai un peu de mal a comprendre ce qu'il écrit.

J'aimerais bien allé en formation chez Aricie

Dans le message dont tu parle je n'avais pas fait un copier/coller mais j'avais retaper a la va-vite mon code. Cela explique les nombreuses fautes.

J'ai suivi ton conseil, helas avec un container DNN_Blue c'est pareil. L'affichage sous Firefox n'est pas bon.

Effectivement pas moyen de te donner accés a ce site qui est pour le moment en local sur mon poste.

Sinon au niveau du code ca donne ca (là c'est du copier/collé)

<%@ Control Language="VB" AutoEventWireup="false" Inherits="AFI.Ping.view" CodeFile="ping.ascx.vb"  %>
<%@ Register Assembly="RadAjax.Net2" Namespace="Telerik.WebControls" TagPrefix="radA" %>
<style type="text/css">
.wrapper {padding:0;margin:0;position:relative;}
#map {overflow:hidden;}
.Pos59 {position:absolute;top:13px;left=68px;}
.Pos93 {position:absolute;top:33px;left=72px;}
.Pos44 {position:absolute;top:53px;left=30px;}
.Pos69 {position:absolute;top:90px;left=100px;}
.Pos13 {position:absolute;top:115px;left=95px;}
</style>

<div class="wrapper">
<radA:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="116px"  Width="169px">
<asp:Image ID="map"  runat="server"   ImageUrl="~/DesktopModules/AFIPing/Images/small-france.gif"/>
<asp:Image ID="Pos59"  runat="server"  ImageUrl="~/DesktopModules/AFIPing/Images/test.gif" CssClass="Pos59"  style="z-index: 100"/>
<asp:Image ID="Pos93"  runat="server"  ImageUrl="~/DesktopModules/AFIPing/Images/test.gif" CssClass="Pos93" style="z-index: 101"/>
<asp:Image ID="Pos44"  runat="server"  ImageUrl="~/DesktopModules/AFIPing/Images/test.gif" CssClass="Pos44" style="z-index: 102"/>
    <radA:AjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Height="75px" Style="z-index: 106;
        left: 0px; position: absolute; top: 0px" Width="75px">
        &nbsp;
            <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/DesktopModules/AFIPing/Images/LoadingProgressBar.gif" style="z-index: 100; left: 35px; position: absolute; top: 139px" />
     </radA:AjaxLoadingPanel>
<asp:Image ID="Pos69"  runat="server"  ImageUrl="~/DesktopModules/AFIPing/Images/test.gif" CssClass="Pos69"  style="z-index: 104"/>
<asp:Image ID="Pos13"  runat="server"  ImageUrl="~/DesktopModules/AFIPing/Images/test.gif" CssClass="Pos13" style="z-index: 105"/>

</div>
</radA:RadAjaxPanel>

Bon comme tu le vois j'utilise les controle RadTelerik pour ajaxifier mon machin.

</radA:RadAjaxPanel> est le panel qui va etre raffraichi en Ajax 

<radA:AjaxLoadingPanel> est une image qui s'affiche pendant le raffraichissement du panel. (On ne la voit pas car c'est trop rapide, mais c'est obligatoire pour utiliser un RadAjaxPanel)

Bon bien vu pour le chevauchement. Une fois cela corrigé, le container arrive bien en dessous de la carte. C'est déjà ca.

Par contre cela ne change rien concernant les points. J'ai essayé pas mal de manips, y compris les positions relatives... en vain.

Ce qui est bizare, c'est que quand on regarde la capture que j'ai publié, on voit bien que les points sont correctements positionnés sur l'axe Y.

Mais pas sur l'axe X ! En fait sur cet axe, les points viennent s'aligner a coter de l'image mais pas sur l'image.

Je suspecte donc le #map {overflow:hidden;} Enfin j'ai l'impression que le overflow ne fonctionne pas

Mais si je supprime ma carte de france, dans ce cas les points sont alignés a gauche (toujours avec les bonnes coordonnées Y)

Je n'y comprends plus rien.

Je vais essayé d'imbriquer des div...