Voila, j'ai fait un effet de transition d'images (avec fadein/fadeout) mais j'ai un problème :
 
Dams ma page, j'ai :
* une grande image principale
* plusieurs petites images (des boutons pour faire simple) qui apparaissent au dessus selon la position du pointeur. Chaque image est donc dans un calque.
 
j'ai utilisé des calques (avec DIV) en position absolue pour placer mes boutons mais c'est pas top si je veux centrer l'image principale. J'aimerais pouvoir placer mes boutons relativement à l'image principale d'où problème.
 
Comment procéder ? Utiliser Javascript pour calculer les positions absolues (comment ?) ? Découper les images dans des tableaux (beuark) ?  Faire carremment un applet java plutôt qu'une solution magouillée javascript+html ?
 
(à noter : je prévois de tout générer en PHP par la suite)
 
Merci d'avance pour vos réponses et vos avis.

Le but c'est que les petites images se déplacent en suivant le curseur
 
J'ai pas tout compris en fait...

gm_superstar a écrit a écrit : Le but c'est que les petites images se déplacent en suivant le curseur   J'ai pas tout compris en fait...

 
Non. Les positions sont fixes (puisque les calques sont en position absolue) mais les boutons apparaissent lorsque le pointeur (de la souris bien entendu) passe au dessus (utilisation des onMouseOver et OnMouseOut)

Bon si je résume, tu as plein de petites images et tu veux mettre une grande image dessous. Comme ça :

 
Le tout centré dans la page.
 
Les images c'est comme du texte, donc on les centre avec text-align: center;
 
donc ce que tu peux faire c'est créer un premier <div> qui fait 100% de la largeur et qui a la propriété text-align: center;
 
Ensuite, dans ce <div> tu crées un deuxième <div> qui fait lui aussi 100% de la largeur et dans lequel tu mets tes petites images.
Après ce deuxième <div> tu mets la grande image.
 
Pas besoin de positionnement absolu ou relatif, tout rentre dans le flux normal, ou alors j'ai loupé un épisode...

 
Tu fais exprès de pas comprendre : j'ai dit que mes boutons etaient au DESSUS de l'image pas en HAUT de l'image.
J'ai bien précisé qu'il s'agissant d'une transition.
 

tu fais un <div> / une <table> de la taille de ton image, tu mets celle-ci en fond (css background-image: url('..'), tu mets tes images par-dessus ... en utilisant une table si tu veux des trucs bien spécifiques.
 
sinon oui, tu peux faire du js. mais va falloir être plus précis sur ta façon de positionner tes images.

Oui oui je fais exprès de pas comprendre et de me taper un dessin et d'essayer de déchiffrer ce que tu dis...
 
Bref... si tu veux utiliser le postionnement relatif, tu pars de ce que j'ai dit et tu applique ces propriétés de style à ta grande image :
 

 
Il faudra peut-être utiliser un z-index pour mettre DESSUS les boutons.
 
Le positionnement relatif permet de déplacer des boîtes par rapport à la position qu'elles aurait eu si elle n'avaient pas été déplacées.

youdontcare a écrit a écrit : tu fais un <div> / une <table> de la taille de ton image, tu mets celle-ci en fond (css background-image: url('..'), tu mets tes images par-dessus ... en utilisant une table si tu veux des trucs bien spécifiques.   sinon oui, tu peux faire du js. mais va falloir être plus précis sur ta façon de positionner tes images.

 
C'est bon, j'ai enfin trouvé la propriété pour récuperer la position absolue d'une image (offsetLeft et offsetTop). Ca me permet ensuite de positionner les calques relativement à l'image avec un p'tit coup de javascript.