Se connecter avec
S'enregistrer | Connectez-vous

Image fixe en bas à droite de la page

Dernière réponse : dans Programmation

Bonjour.

J'espère que vous pourrez m'aider.


Je suis entrain de refaire le design de mon site internet ( simonrobic.com ) et j'ai perdu un code html que j'avais utilisé autre fois ( peut-être était-ce du javascript... ).

Ce code consistait à fixer une image dans le coin droit en bas de la page.

C'est ce que je voudrais refaire sur la nouvelle version de mon site internet.

J'ai trouvé ce code javascript :

  1. <script language="JavaScript">
    

  2. <!--
    

  3. //PLF-<a href="http://www.jejavascript.net/" target="_blank">http://www.jejavascript.net/</a>
    

  4. var hauteur=0;
    

  5. var temps=30;
    

  6. var max=30;
    

  7. function position(left,top,width,height,contenu) {
    

  8. hauteur=height;
    

  9. var Z="<DIV id='CalqueImage' style='position:absolute;left:"+left+"; top:"+top+";width:"+width+"; height:"+height+"'>"+contenu+"</DIV>";
    

  10. document.write(Z);
    

  11. setTimeout("Start()",temps);
    

  12. }
    

  13. function Start() {
    

  14. DeplacerImage("CalqueImage",Postionimage("CalqueImage"));
    

  15. setTimeout("Start()",temps);
    

  16. }
    

  17. function DeplacerImage(nom,top) {
    

  18. document.getElementById(nom).style.top = top;
    

  19. }
    

  20. function Postionimage(nom) {
    

  21. var pos=parseInt(document.getElementById(nom).style.top);
    

  22. var wintop=parseInt(document.body.scrollTop);
    

  23. var dispo=document.body.clientHeight;
    

  24. var diff=Math.ceil((pos-(wintop+dispo-hauteur)));
    

  25. if (diff>max) {diff=max;}
    

  26. if (diff<-1*max) {diff=-1*max;}
    

  27. var top=pos-diff;
    

  28. return top;
    

  29. }
    

  30. //-->
    

  31. </script>


A mettre entre <head> et </head>, et celui ci :

  1. <script language="JavaScript">
    

  2. <!--
    

  3. //PLF-<a href="http://www.jejavascript.net/" target="_blank">http://www.jejavascript.net/</a>
    

  4. //position(marge,1,largeur,hauteur(>H image),'image');
    

  5. position(10,1,100,120,'<img src="monimage.gif" width="88" height="32">');
    

  6. //-->
    

  7. </script>


à mettre après </head>.

Quels réglages effectuer pour que mon image apparaisse en bas à droite de la page, en mode fixe ? Le fait que j'ai déjà une image en background jouera-t-il ?


Merci d'avance pour votre réponse :) 


Simon.

Autres pages sur : image fixe bas droite page

Lassé par la pub ? Créez un compte

Je suis pas expert en Javascript, mais ne serait-ce pas les paramètres de la fonction à modifier ? Entre les balises <body>, essayes de transformer la ligne 

  1. position(10,1,100,120,'<img src="monimage.gif" width="88" height="32">');


par

  1. position(650,450,100,120,'<img src="monimage.gif" width="88" height="32">');


Si ce n'est toujours pas bien placé, tu bidouilles un peu les deux premières valeurs.

Gros bémol cependant : ça va dépendre de la résolution de l'internaute... :-(

j'ai remplacé la ligne que tu m'avais indiquée par celle que tu m'as donnée. J'ai aussi mis ces même valeurs ici : 
  1. var Z="<DIV id='CalqueImage' style='position:absolute;left:"+left+"; top:"+top+";width:"+width+"; height:"+height+"'>"+contenu+"</DIV>"
à la place de left, top, width et height entre les +, car rien ne se passait en touchant juste à la ligne que tu m'avais donnée. En fesant ceci, l'image apparait bien, mais en haut à gauche ( alors que je voudrias qu'elle soit en bas à droite ), et si je change les chiffres, elle ne bouge pas...

Une idée ? :) 

J'ai pensé à un truc vraiment tout con ! Et ça marche ! Au lieu de passer par un code javascript, pourquoi ne pas utiliser une des propriétés du CSS ? 

  1. <img src="ton_image.gif" style="position: fixed; top: 800px; left: 600px;"/>


Par exemple. Remarque que ça ne prend toujours pas en compte la résolution du visiteur. J'ai vu qu'en Javascript, on pouvait la récupérer (screen.width et screen.height). Vois si tu peux faire avec.
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde