Positioner des images sur une autre image

31 mars 2009, 19:54

Bonjour,

J'ai une carte fixe sur laquelle j'aimerai ajouter une image sur différentes positions, qui varient. Actuellement, je génére une nouvelle image à la volée en PHP pour incorporer les petites images dans la grande.

Le problème, c'est que la grande image est assez grande (a peu près 2000*2000). Comme elle est générée à la volée, on ne peut pas la mettre en cache. Y a t il un moyen de rajouter en HTML les petites images par dessus la grande, sachant que j'utilise en plus un map pour avoir des liens ?

31 mars 2009, 21:09

Un exemple de piste :

Code XHTML

Code : Tout sélectionner

<div id="superposition">
  <img src="chemin-de-ton-enorme-image.jpg" alt="Ton énorme image" />
  <img id="petite-image-1" class="petite-image" src="chemin-de-ta-petite-image-1.jpg alt="Petite image 1" />
  <img id="petite-image-2" class="petite-image" src="chemin-de-ta-petite-image-2.jpg alt="Petite image 2" />
  <img id="petite-image-3" class="petite-image" src="chemin-de-ta-petite-image-3.jpg alt="Petite image 3" />
</div>

CSS

Code : Tout sélectionner

#superposition {
  position: relative;
}
/* L'ensemble des petites images est positionné par rapport au div parent */
.petite-image {
  position: absolute;
}
/* Avec les id, on peut jongler avec le positionnement précis de chaque image */
#petite-image-1 {
  top: 0;
  left: 0;
}
#petite-image-2 {
  top: 200px;
  right: 0;
}
#petite-image-3 {
  bottom: 0;
  left: 0;
}

31 mars 2009, 22:11

J'ai quelques petits problèmes. D'une part, je perd le lien associé à la zone et les actions javascripts. Enfin, je peux faire doublon, même si c'est pas trop propre. Mon gros problème est que l'image est plus grande que l'égrand, et qu'avec un poisitionnement relative, je perd les barres de défilements sur IE. Y a t il un moyen de forcer leur présence ?

EDIT : En fait, ca marche, je ne sais pas pourquoi ca marchait pas avant...

Enfin, je me retrouve toujours à faire quelque chose d'un peu sale, à superposer une image un map, une image et un autre map... N'y a t il pas moyen d'intercaller l'image entre la grosse image et le map ?

Positioner des images sur une autre image

Qui est en ligne