Bonsoir a tous, je suis en train de me faire un site, et je voudrais faire un truc qui me parait tres complexe mais qui pour vous est sans doute tres simple. Pour tout vous dire, je ne connais que le html, je suis completement largué pour l'instant avec toutes les nouveautés, feuilles de style, css, etc...
 
La problematique est la suivante :
J'ai une image gif avec fond transparent que je voudrais mettre en haut a gauche de la page, mais je voudrais qu'elle soit "au premier plan", de sorte qu'on voit par les endroits transparents du gif le contenu de la page qui est derriere.
Ensuite, le top ca serait que quand on descend l'ascenseur, l'image reste en place en haut a gauche de l'ecran. Mais bon si l'image disparait au fur et a mesure qu'on descend dans la page, ca n'est pas tres grave, ca sera deja un bon debut.
 
Une idée ?
 
Merci a tous !

J'ai reussi a pondre quelque chose : http://chaenel.free.fr
 
Ce qui est curieux, c'est que l'image n'est pas collée au bord de gauche et sur le haut de la page. Est ce normal ? Il y'a environ une dizaine de pixel d'ecart ! Il y'a un moyen d'eviter cela ?
 
Et sinon pour faire en sorte que l'image reste a cette place meme si on bouge l'ascenseur, c'est chaud a faire ?

Arggghh ! J'ai du virer mon image, car ca pose un probleme de plus : tous les liens qui se trouvent en dessous ne fonctionnent plus ! Il y a moyen que l'image soit au 1er plan mais qu'on puisse quand meme cliquer les liens qui se trouvent derriere ? Ca devient chaud là non ?

essaye avec:
position:fixed;top:0;left:0;z-index:100;
pour le div de l'image fixe
et
z-index:0;
pour le div de tout le reste
Ca doit marcher avec Firefox mais pas avec IE

Joli !
Par contre il reste le probleme des liens qui se trouvent en dessous de l'image, ils ne sont plus cliquables....
J'imagine qu'il n'y a pas de solution pour ca ?
 
 
 

 
Ca m'aurait etonné   Quelle m***e ce IE    

Ben oui et (peut-être) non . Ya pas de solution puisque c'est dessous c'est dessous donc pas accessible.
Mais... Si t'aimes bricoler un max :
 - tu découpe ton image en petits carrés
 - tu fais une table sans bord avec autant de cellules que t'as de carrés
 - tu mets chaque bout d'image dans la cellule correspondante SAUF les bouts transparents. Ca fait des trous réels dans l'image donc t'as accés aux trucs en dessous. Tu peux cliquer sur les bouts de liens qui passent par là.
Enfin si je suis clair.
Avec des colspan et des  rowspan tu dois pouvoir bien modeler tes trous.
C'est un truc de fou que j'ai jamais essayé mais ça devrait marcher

Oui j'ai compris !
Mais en effet c'est beaucoup de boulot. Et comme le tableau contenant les images resterait fixe, si on bouge l'ascenseur de la page, il se peut quand meme qu'un lien a un moment se retrouve derriere une image
 
Non la solution c'est que je mette mon image en haut a droite, je n'aurais jamais de lien a cet endroit puisque mon menu est a gauche. A moins que je passe le menu a droite ?? ))
 
Ca sera peut etre plus facile de passer le menu a droite car pour caser l'image correctement a droite ca doit etre une galere avec les differentes resolutions d'ecran

Non le menu a droite ca va pas, il y'aurait d'autres liens de toutes facon Et l'image a droite idem, il y aurait des liens a un moment ou a un autre.
 
J'ai peut etre une autre idée. Est ce qu'il serait possible en javascript de recuperer en permanence l'ascisse et l'ordonnée de la souris, et passer l'image en arriere plan quand le pointeur est dans la zone ou se situe l'image ? Puis remettre l'image en avant plan quand le pointeur sort de la zone ?

Quoique tu mettes à droite ce sera dur à positioner sauf avec des frames.
Comme tu le dis ya tellement de définitions d'écrans et de taille de fenêtres possibles que t'es obligé de faire ça avec du Javascript avec un onload dans le body pour lancer une fonction qui recalcule tout et modifie dynamiquement les left et right de tous les div concernés.
Ou alors tu figes les positions de tes trucs comme tu veux dans ta page et ça oblige le visiteur à bidouiller sa fenêtre ou à jouer avec les ascenceurs.
Bref ya qu'a attendre que les développeurs de navigateurs nous pondent une nouvelle version avec prise en compte de tout ça.
Mais là on peut réver!

Pour récuperer la position de la souris c'est tout à fait possible tu trouveras sur le net des javascript qui font ça trés bien. J'en ai un mais là je n'ai pas accés à mes fichiers du boulot.
Effectivement tu peux écrire un javascript qui récupère la position de la souris et qui passe le z-index de l'image à 0 quand tu entres dans l'image et monte l'autre, puis fait le contraire quand tu sors de l'image.
Mais ça risque de masquer l'image par le reste et viceversa à chaque fois que la souris passe par là.
Regarde la doc des évenements onMouseOver et onMouseOut sur les liens.
Bonne chance.
 

Ok pour la souris, je note le truc, j'essaierai de voir ca demain.
Mais je crain que ca ne soit pas tres beau de voir un truc apparaitre ou disparaitre.
Je crois que je vais mettre une image plus petite comme ca elle se casera dans la marge de gauche, et ca ne genera pas les liens.
 

Bon, là je suis plus réveillé je rectifie ma bourde de cette nuit:
C'est trés facile de caler quelque chose à droite ou en bas d'une fenêtre. et que ça y reste quand on change la taille de la fenêtre ou qu'on joue avec les ascenceurs.
 
Dans le style du machin à positioner tu mets;
 - position: fixed; right: 0%; pour caler toujours à droite
 - position; fixed; bottom:0%; pour caler en bas.
 
En jouant sur les % tu peux caler où tu veux dans la page, ça y restera.
T'as 4 paramétres disponibles:
 - top: x%; pour caler le haut du truc sur le haut de la page (0% le haut tout en haut, 100% le haut plus bas que le bas -donc invisible)
 - bottom: x%; pour caler le bas du truc sur le bas de la page (0% le bas en bas, 100% le bas du truc plus haut que le haut de la page -donc invisible)
 - left (idem mais à gauche)
 - right: (itou à droite)
 
Bien sûr ça ne marche pas sous IE !

Merci stokjes, c'est genial !
 
IE : Grrrr, donc c'est pas la peine que je fasse ca sur le site. Est ce qu'un jour ils comptent respecter les standards ?        

Bon c'est reglé, j'ai fais une image assez petite, ca n'empiete pas sur les menus, merci a tous !

Apres une multitude d'essais, ceci fonctionne aussi sous IE :
 
position:absolute; top:0px; left:0px; z-index:10; visibility:visible;
 
Par contre, l'image bouge avec la page lorqu'on descend l'ascenseur :-/
Le position:fixed ne veut pas marcher, IE ne superpose pas l'image a la page, mais decale la page vers le bas

Bon ben j'ai rajouté un test javascript, pour que les BONS navigateurs puissent afficher l'image en position fixe.
 
Tant pis pour les utilisateurs de IE, ils n'ont qu'a utiliser des navigateurs qui respectent les standards !
Mais ca fait chier de devoir passer du temps a adapter une page pour que ca puisse se lire sous IE