<div style="position:relative">
   <img src="bg_galerie.jpg" alt="" />
   <img src="premiere_image.jpg" alt="" style="position:absolute; top: 40px; left: 20px; width: 200px; height:150px; " />
</div>

Hello !

Phpfrance est un forum d'entraide où chacun tente d'aider les autres en fonction de son temps et de ses compétences (tant sur le plan technique que pédagogique ;)). Si la solution que tu retiens est en css, le forum css est effectivement plus adapté pour trouver quelqu'un qui t'aidera à superposer tes images. Pour une solution en php, si tu es parvenu à générer l'image souhaité avec imagecopymerge, tu peux l'utiliser pour toutes tes galeries, il faut sans doute juste adapter ton script et lui passer quelques paramètres :)

En php, il te faut faire un script qui va merger ton image de fond avec la première image de ta galerie. Ce script devrait être indépendant de ta page afin de pouvoir être appelé plusieurs fois (pour chacune de tes galeries et retourner l'image générée (avec un header adapté pour que le navigateur considère qu'il appelle et affiche une image)

Tu aurais ainsi dans ton script principale des balises img du genre : <img src="couverture_galerie.php?image=premiere_image.jpg" alt="" />, et le script couverture_galerie.php récupérerais le nom de l'image à transformer (ou un id, ou n'importe quoi qui te permette de générer l'image souhaité et renverrai l'image mergée :)

En css, il faut jouer avec les positions relatives et absolute de ton image et de son fond pour pouvoir les superposer au pixels près :

[html]<div style="position:relative">
<img src="bg_galerie.jpg" alt="" />
<img src="premiere_image.jpg" alt="" style="position:absolute; top: 40px; left: 20px; width: 200px; height:150px; " />
</div>[/html]
Le mieux étant d'utiliser des classes, mais au moins tu as le principe : le div permet de définir un élément de référence (position relative) pour placer les images.
la première image est ton bg qui occupera tout le div et définira sa taille.
la seconde image est la première image de ta galerie, positionnée en absolue par rapport à notre div de référence, dont le coin supérieur gauche est placé à 40px du haut du div, et à 20px de la gauche du div (à ajuster pour correspondre à l'emplacement souhaité de ton bg). Les height/width (ou max-height / max-width) permettent de définir la taille de l'image de façon à ce qu'elle corresponde à l'espace à occuper au dessus de ton bg.

Bon courage et n'hésite pas à nous montrer ta progression, c'est toujours plus facile pour te guider de voir ce que tu as déjà fait :)

Bon j’abandonne pour l'instant, j'ai réussi à les superposer, mais pas à les caler comme il faut.

Sur le coup, je vous remercie pas vraiment, hormis me dire d'apprendre le php et le css, vous m'avez pas été d'une super aide. Heureusement encore que j'ai posté dans le php pour les débutants, sinon je sais pas ce que ça aurait donné. La participation à mes autres postes a été bien plus instructive.

Je reviendrai là-dessus plus tard.

@+

Et c'est là que je suis vraiment mauvais...

J'ai trouvé une parade avec imagecopymerge, pour créer une image dans une image, mais évidement après je ne peux pas l'afficher, ou alors dans une page seule. Je continue à chercher.

en l’occurrence, ce n'est pas le php qu'il faut maitriser mais le css.

Bah le php, j'en apprends tous les jours, dès que j'ai besoin de faire un truc précis. En général j'arrive à me débrouiller seul, mais là :D

Bon j'avoue, tu m'as parlé chinois^^, je vais déjà essayer de faire des recherches google avec les termes que tu donnes, et regarder la vidéo.

Merci ;)

Ton problème parait tellement simple que du coup, il y a 1000 facon de trouver un solution.
[list][*]Tu incrutes l'image dans le cadre. Si le cadre s'agrandi, l'image étant incrusté le ratio suit.
[*]Tu redimensionne l'image en la croppant au ratio du cadre de base. Une fois placé au bon endroit (Par exemple avec le cadre en background d'un div, si tu agrandis la page, l'image suit le ratio.[/list]

Quoi qu'il arrive il faut que tu fasses une image au ratio du cadre.

Si t'es motivé, regarde cette vidéo : http://www.grafikart.fr/tutoriels/php/intervention-image-375
Sinon apprend PHP :)

Bonjour à tous,

je développe un hébergeur d'image (pour les forums) qui est parfaitement fonctionnel. Mais il faut le dire, il était franchement moche (le design, c'est pas trop mon truc) ^^. Je suis loin d'être un pro, j'apprends sur le tas, il y a 1 an, je ne connaissais rien au php (ça, ça veut dire soyez gentils avec moi :D ).

Donc je m'attaque au design. Un ami m'a tout fait, à son idée, et je n'ai plus qu'à intégrer. Mais il a eu une super idée, et j'avoue que je sèche.

Sur une page, qui affiche les albums que les membres acceptent de mettre en public, je dois afficher un cadre pour chaque personne, avec dedans, l'image du premier album venu, pour illustrer. Tout fonctionnera sur ce principe (une fois cliqué sur l'image, j'affiche la liste des albums du membre avec la encore la première photo qui se trouve dans l'album, dans le cadre).

Mais son cadre est pas conventionnel, du coup, je n'ai aucune idée pour intégrer l'image, et mes quelques essais sont un échec.

[img]http://www.tigra-vision.fr/Utilisateurs/Bipbip/Sans_titre456.jpg[/img]

Le cadre est un fichier png, en un seul fichier donc. Si vous avez une piste (après, avec une piste, je peux chercher) car là je ne vois pas. il faut non seulement que l'image tombe au milieu du cadre (donc légèrement décalée en bas à gauche), mais en plus que cela ne se déforme pas selon les résolutions d'écran (les width des cadres sont en %).

Je suis à un doigt de lui demander de faire un truc standard, mais c'est dommage, je trouvais ça joli. Donc avant de jeter l'éponge...

Merci ;)


EDIT : ou à défaut, peut il rendre ce cadre "standard", c'est à dire que le fichier serait bien vu comme un cadre, ou n'importe quelle autre façon de tricher avec l'image pour me simplifier la vie (j'avais pensé à le couper en 4, faire une image pour la gauche, pour la droite, le haut et le bas et coller avec des :

[code]div.spacer
{
font-size: 0;
height: 0px;
line-height: 0;
}[/code]

Mais bon, c'est franchement pas terrible, et je sais même pas si c'est réalisable...