Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1287 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [résolu] Image gif avec fond transparent en premier plan

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[résolu] Image gif avec fond transparent en premier plan

n°1303939
nlc
Le mieux est l'ennemi du bien
Posté le 12-02-2006 à 23:09:19  profilanswer
 

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 ! :hello:


Message édité par nlc le 13-02-2006 à 11:14:04
mood
Publicité
Posté le 12-02-2006 à 23:09:19  profilanswer
 

n°1303958
nlc
Le mieux est l'ennemi du bien
Posté le 12-02-2006 à 23:34:24  profilanswer
 

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 ?

n°1303962
nlc
Le mieux est l'ennemi du bien
Posté le 12-02-2006 à 23:40:50  profilanswer
 

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 ?


Message édité par nlc le 12-02-2006 à 23:44:02
n°1303965
stokjes
Posté le 12-02-2006 à 23:47:57  profilanswer
 

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

n°1303967
nlc
Le mieux est l'ennemi du bien
Posté le 12-02-2006 à 23:54:17  profilanswer
 

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 ?
 
 
 

n°1303968
nlc
Le mieux est l'ennemi du bien
Posté le 12-02-2006 à 23:56:16  profilanswer
 

stokjes a écrit :


Ca doit marcher avec Firefox mais pas avec IE


 
Ca m'aurait etonné  :( Quelle m***e ce IE  :fou:  

n°1303977
stokjes
Posté le 13-02-2006 à 00:28:48  profilanswer
 

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

n°1303979
nlc
Le mieux est l'ennemi du bien
Posté le 13-02-2006 à 00:34:21  profilanswer
 

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 :/

n°1303982
nlc
Le mieux est l'ennemi du bien
Posté le 13-02-2006 à 00:43:30  profilanswer
 

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 ?

n°1303986
stokjes
Posté le 13-02-2006 à 01:17:22  profilanswer
 

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!

mood
Publicité
Posté le 13-02-2006 à 01:17:22  profilanswer
 

n°1303987
stokjes
Posté le 13-02-2006 à 01:31:30  profilanswer
 

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.
 

n°1303988
nlc
Le mieux est l'ennemi du bien
Posté le 13-02-2006 à 01:34:02  profilanswer
 

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.
 

n°1304029
stokjes
Posté le 13-02-2006 à 09:53:05  profilanswer
 

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 !

n°1304052
nlc
Le mieux est l'ennemi du bien
Posté le 13-02-2006 à 10:13:02  profilanswer
 

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 ?   :fou:  :fou:  :fou:  :fou:

n°1304143
nlc
Le mieux est l'ennemi du bien
Posté le 13-02-2006 à 11:13:44  profilanswer
 

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

n°1304345
nlc
Le mieux est l'ennemi du bien
Posté le 13-02-2006 à 14:27:16  profilanswer
 

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 :(

n°1305320
nlc
Le mieux est l'ennemi du bien
Posté le 14-02-2006 à 15:36:06  profilanswer
 

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  :fou:  :fou:  :fou:  :fou:  :fou:  :fou:  :fou:


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [résolu] Image gif avec fond transparent en premier plan

 

Sujets relatifs
Image a la place d'un bouton[PHP Centrer du texte dans une image GD
[QST] Sur un script [RESOLU][Résolu] Donner le "focus" à une div, possible ?
getSelection sur textbox enJavascript sur Firefox ? [RESOLU]probleme avec mediawiki [resolu]
[Resolu] Probleme avec une CSS de Background sous Firefox[resolu] getword
[VBScript] [RESOLU] erreur lors de la suppression de fichierafficher une image dans un JPanel imbriqué
Plus de sujets relatifs à : [résolu] Image gif avec fond transparent en premier plan


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR