background / résolution utilisateur

**Dr_Fureur** · 28/02/2007, 15h44

Tous d'abord bonjour à tous

Voila un petit moment, que je suis en train de me coder un petit site web perso.
Dans le lequel j'ai placer mis en background un gif annimé (taille 1280*1024)

a pas de pb a par qu'il est long a chargé, il fait 3 Méga, mais c'est aps la le pb (enfin si c génant mais bon ...).

J'ai remarque que si je surfais sur le site avec une résolution supérieur le gif ne faisait pas toute la page (normal me direr vous) donc j'ai cherché s'il y avait moyen de l'étirer ( comme le papier paint de windows par ex ) mais echec ...

J'ai donc décider de d'afficher une image à la place du gif si la taille de l'écran est suppérieur a la taille du gif .
J'utilise donc le code javascript suivant pour récupérer la résolution de l'écran

dans mon <head>
<SCRIPT LANGUAGE="JavaScript">
EcranHaut = screen.height;
EcranLarg = screen.width;
Ecran = EcranLarg + " x " + EcranHaut;
</SCRIPT>

dans mon <body>
<SCRIPT LANGUAGE="JavaScript">
document.write(Ecran);
</SCRIPT>

Mais une fois que j'ai les dimensions comment je peux l'utiliser pour lui dire aficher l'image ou le gif (sachant que je gére tout ou presque dans un css)

aurriez vous une piste ou carrément un idée qui pourais me débloquer?
Peut être que je me plante carément dans le chemin a prendre ?

Merci d'avance

**SpaceFrog** · 28/02/2007, 15h53

fais toi une class par resolution...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
.petit {height:600px;
          width:800px;}
 
.grand {height:1280px;
           width:1024px;}

puis en focntion du resultat de ton scrennsniffer tu modifies le className de ton image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('imagebackground').className='grand'

**Dr_Fureur** · 28/02/2007, 16h08

Merci pour ta réponse

par contre je ne comprend pas comment l'utiliser

document.getElementById('imagebackground').className='grand'

faut que je le mette dans le css ?

je dois la mettre ou l'adresse de mon fichier ? a la place de imagebackground?

dsl mais je début aussi bien avec le javascript que avec le css .

Merci encore

**SpaceFrog** · 28/02/2007, 16h25

non tu le mets dasn le onload après la focntion qui récupère la taille ecran ...

**Dr_Fureur** · 28/02/2007, 16h41

Je suis désolé mais je ne vois toujours pas ce que tu me dis , y dois y avoir un étape que j'ai zapé

Es ce que tu pourrais me le re expliquer

je comprend pas en fait comment marche la fonction pour lui dire :
si taille = petit alor background =fond.gif
si taille = grand alor background = fond.jpeg

Merci beaucoup pour ta patience

**SpaceFrog** · 28/02/2007, 16h53

ha ...
ben en fait moi je modifiais la taille d'une seule et même image ...
on ne s'etait pas compris ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
switch (screen.width){
     case(800) : document.body.style.backgroundImage="url('petit.jpg')";
                      break;
     case(1024) : document.body.style.backgroundImage="url('grand.jpg.jpg')";
                      break;
                              }

dans le onload du body ...

background / résolution utilisateur

JavaScript

Vue hybride

Discussions similaires

Partager

Partager