Superposition d'images positionnées

Rendu

Code

<div id="groupe-images">
  <-- image de fond -->
  <img src="images/france-regions.png" alt="Régions de france">
  <-- images positionnées -->
  <img src="images/marker.png" style="top:415px;left:210px;" alt="Bordeaux" title="Bordeaux">
  <img src="images/marker.png" style="top:405px;left:550px;" alt="Grenoble" title="Grenoble">
  <img src="images/marker.png" style="top:362px;left:508px;" alt="Lyon" title="Lyon">
  <img src="images/marker.png" style="top:550px;left:537px;" alt="Marseille" title="Marseille">
  <img src="images/marker.png" style="top:128px;left:372px;" alt="Paris" title="Paris">
</div>

Quelques remarques

Le conteneur doit être positionné pour servir de référent.

Le conteneur et l'image « principale » doivent avoir les mêmes dimensions, fixes ou relatives.

L'image « principale » doit être en display:block afin de ne pas présenter d'espace en dessous d'elle. Les images « secondaires » étant redimensionnées par rapport à celle-ci mais positionnées par rapport au conteneur il pourrait donc apparaître un décalage dans le positionnement.

Les dimensions des images « secondaires » doivent également être exprimées en pourcentage afin d'éviter les distorsions et décalages lors d'un redimensionnement.