ICI header("Location: http://www.mytesting.fr ");

COMMENT SUPERPOSER DES IMAGES POUR FAIRE UNE MOSAÏQUE.

par André Marini 18 Février 2015, 10:09 Images

COMMENT SUPERPOSER DES IMAGES POUR FAIRE UNE MOSAÏQUE.

Avec ce code, on peut superposer des images.

 

A noter que rien n'empêche de superposer des images de taille différente puisque chacune d'entre elles possède sa propre définition en largeur et en hauteur.

 

Par contre, il ne faut pas sortir du cadre défini par <div style="position:relative; width:550px; height:380px;">  mais on peut le modifier.

 

Ainsi grâce à ce système, on peut mettre une image aux dimensions maximum puis mettre d'autres images plus petites pour faire un patch.

 

Dans ce cas, l'image de fond doit avoir comme "top"=0 et comme"left"=0 puisque ce sont les marges définies par rapport au haut et à gauche du cadre.

 

Puis, ensuite, rien n'empêche de positionner les autres images de taille plus petite pour faire un patch.

 

Pour ajouter des images, il suffit d'ajouter, autant de fois que nécessaire, le code compris entre <div style="..."> et </div>

 

<div style="z-index:10; border:solid 1px black; position:absolute; 
      top:20px; left:20px; width:389px; height:129px;">
<img src="http://img.over-blog-kiwi.com/1/30/51/51/20150218/ob_4e6d16_telechargement-1.jpg" /></div>

 

CODE

<div style="position:relative; width:550px; height:380px;">


<div style="z-index:10; border:solid 1px black; position:absolute; 
      top:20px; left:20px; width:389px; height:129px;">
<img src="http://img.over-blog-kiwi.com/1/30/51/51/20150218/ob_4e6d16_telechargement-1.jpg" /></div>


<div style="z-index:30; border:solid 1px black; position:absolute; 
      top:50px; left:50px; width:389px; height:129px;">
<img src="http://img.over-blog-kiwi.com/1/30/51/51/20150218/ob_dafd6a_telechargement.jpg" /></div>


<div style="z-index:20; border:solid 1px black; position:absolute; 
      top:80px; left:80px; width:389px; height:129px;">
<img src="http://img.over-blog-kiwi.com/1/30/51/51/20150218/ob_465a78_images.jpg" /></div>
</div>

 

RESULTAT

commentaires

Haut de page