Se connecter

**Jippé** · Dim. 01 Oct. 2006, 13:20

0			0

je voudrais adapter la taille d'une image en arriere plan sur une page web suivant la taille de l'ecran de l'utilisateur

bien entendu j'ai deja fait des recherches google

**Acmo** · Dim. 01 Oct. 2006, 13:38

0			0

J'avais deja eu le meme probleme et si je me souviens bien c'est pas faisable en php la resolution de l'ecran n'est pas envoyé au serveur par le navigateur...
Donc en fait il faut que tu fasses ca en javascript c'est tres simple
avec
screen.width et screen.height qui te renvoye la largeur et la hauteur du panneau de l'utilisateur.
<a class="postlink" href="http://fr.selfhtml.org/javascript/objets/screen.htm">http://fr.selfhtml.org/javascript/objets/screen.htm</a>
un petit test a la c** et c'est bon.
Et puis si tu veux adapter ton image a chaque connexion avec PHP, la librairie GD est assez lourde a utilisée, si il ya bcp de monde sur le serveur ca va bien ramé.
Sinon autre piste: css je ne sais pas si il ya pas un coup a joué avec l'attribut media je me souviens pas bien de ce qu'il fait...
Ou sinon en proprietés de body je me demande si tu peux pas mettre background: repeat, 20%; ou fixed, 100%; un truc du genre

PS: en tout cas ton explorateur PHP est très bien fait felicitation!

**h2o** · Dim. 01 Oct. 2006, 14:39

0			0

Jippé a écrit :je voudrais adapter la taille d'une image en arriere plan sur une page web suivant la taille de l'ecran de l'utilisateur

bien entendu j'ai deja fait des recherches google

Tu cree les images suivantes:
640x480.jpg, 800x600.jpg, 1024x768.jpg, 1152x864.jpg et 1280x1024.jpg.

Tu places le script juste avant le </head> de ta page html.

Code :
tabw=new Array(640, 800, 1024, 1152, 1280);

tabh=new Array(480, 600, 768, 864, 1024);

if(!document.all){ w=window.innerWidth; h=window.innerHeight; }

else { w=document.documentElement.offsetWidth;

h=document.documentElement.offsetHeight; }

for(i=tabw.length-1;i>=0;i--) if((w>=tabw[i])||(h>=tabh[i])) break;

if(i<tabw.length-1) i++;

document.write('<body style="background-image:url('+tabw[i]+'x'+tabh[i]+'.jpg);">');

**Jippé** · Dim. 01 Oct. 2006, 15:13

0			0

ok h2o je vais tester ton truc

sinon, ça ne marche pas j'ai fait une erreur ?

Code :
<ZZZscript type="text/javascript">

if (screen.width == 1280 and screen.height == 768)

BackgroundImage = "http://kelazer.free.fr/1280x768.jpg"

Else If (screen.width == 1024 and screen.height == 768)

BackgroundImage = "http://kelazer.free.fr/1024x768.jpg"

</script>

pour voir le code faites citer

**h2o** · Dim. 01 Oct. 2006, 15:55

0			0

pfff, je javascript passe pas dans les "quotes"...

je te decortique le code:

il faut d'abord determiner comment le navigateur est capable de determiner la taille de l'affichage (s'il ne comprend pas "document.all"), et on donne aux variables "w" et "h" la largeur et la hauteur.

if(!document.all)
{ w=window.innerWidth; h=window.innerHeight; }
else { w=document.documentElement.offsetWidth; h=document.documentElement.offsetHeight; }

Mais ça va te donner la dimention de la fenetre, pas celle de l'ecran...
Ces valeur vont changer si tu redimentionnes la fenetre de ton exploreur...

tu peux faire un truc du genre:

if(w <= 800 AND h<= 600)...

et repeter pour chaque taille...

**h2o** · Dim. 01 Oct. 2006, 16:15

0			0

je dit une connerie, j'avais pas vu ton code.
Tu peux tenter qq chose comme ça:

Code :
function aff_fond() 

{

    if (screen.width<800) {document.write('<body style="background-image:url('640.jpg')";}

    if (screen.width==800) {document.write('<body style="background-image:url('800.jpg')";}

    if (screen.width==1024) {document.write('<body style="background-image:url('1024.jpg')";}        

    if (screen.width==1152) {document.write('<body style="background-image:url('1152.jpg')";}            

    if (screen.width>1152) {document.write('<body style="background-image:url('1600.jpg')";}                

}

putain c'est chiant, l'affichage decone avec ce code.

fetardalyon · Dim. 01 Oct. 2006, 19:40

0			0

h2o a écrit :je dit une connerie, j'avais pas vu ton code.
Tu peux tenter qq chose comme ça:

Code :
function aff_fond() { if (screen.width<800) {document.write('<body style="background-image:url('640.jpg')";} if (screen.width==800) {document.write('<body style="background-image:url('800.jpg')";} if (screen.width==1024) {document.write('<body style="background-image:url('1024.jpg')";} if (screen.width==1152) {document.write('<body style="background-image:url('1152.jpg')";} if (screen.width>1152) {document.write('<body style="background-image:url('1600.jpg')";} }

putain c'est chiant, l'affichage decone avec ce code.

A la place des document.write, tu peux utiliser :

Code :
document.getElementById(body).style.backgroundImage=sphere.jpg

(en rajoutant id="body" dans ta balise BODY et des ' autour de body dans la ligne au dessus)

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	zoomer et scroller en ligne une grande image...	hcl	2	3 383	Jeu. 19 Oct. 2006, 14:40 Dernier message: Oxs