Choix de résolution d'image background

Version imprimable

Bonjour je n'arrive pas à ecrire mon code javascript pour que mon bandeau de ma page html s'adapte à la résolution du client.
ci-dessous un bout de mon code html et le code css concerné:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
<script type="text/javascript">
if (screen.width<=800) {
document.getElementById ('en_tete').className = 'res1';
} else if (screen.width>=1024) {
document.getElementById ('en_tete').className = 'res2';
} else if (screen.width>=1200) {
document.getElementById ('en_tete').className = 'res3';
}
</script>
</head>
 
<body>
<div id="en_tete">
 
</div>
  </body>
</html>

le CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#en_tete
{
   width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle3.jpg");
 
}
.res1 /*800*/
{
	width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle1.jpg");
 
}
.res2 /*1024*/
{
	width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle2.jpg");
 
}
.res3 /*1200*/
{
	width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle3.jpg");
 
}

Voila je galère grandement car pour firefox j'ai palié au problème via la fonction "@media screen and (max-device-width: 1024px)" mais mon problème concerne IE8.
Espérant que quelqu'un puisse m'aider, merci par avance.

07/01/2012, 17h23
Bovino

Ouais... j'imagine que tu dois avoir des problèmes pour entrer dans la 3e condition :aie:
Ensuite, il se passe quoi si la résolution est entre 800 et 1024 ? :whistle:
07/01/2012, 17h38
sserpentio

ok entre 800 et 1024 juste à modifier ma première condition, mais enfin de compte je ne comprends pas pourquoi mes "class" dans mon css ne sont pas appelées par les conditions écrites en javascript.
07/01/2012, 20h22
NoSmoking

Bonsoir,
tu utilises l'élément en_tete avant qu'il ne soit DOMesquement construit.

Citation:

Envoyé par sserpentio

ok entre 800 et 1024 juste à modifier ma première condition, mais enfin de compte je ne comprends pas pourquoi mes "class" dans mon css ne sont pas appelées par les conditions écrites en javascript.

Bon après quelques galères j'ai trouvé ma solution.....:D

Il fallait simplement mettre mon code javascript juste avant la fin de body pour que la page soit chargée et mes "div" reconnus et non pas entre les balises Head.

donc:
-code html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <body>
<div id="en_tete">
</div>
<script type="text/javascript">
        
                        if (screen.width<=800) {
                        document.getElementById ('en_tete').className = 'res1';
                        } else if (screen.width<=1024) {
                        document.getElementById ('en_tete').className = 'res2';
                        } else {document.getElementById ('en_tete').className = 'res3';
                        }
                                
</script>
 
   </body>
</html>

et le bout de code CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
#en_tete
{
	width: 100%;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle3.jpg");
 
}
#en_tete.res1 /*800*/
{
	width: 800px;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle1.jpg");
 
}
#en_tete.res2 /*1024*/
{
	width: 1024px;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle2.jpg");
 
}
#en_tete.res3 /*1280*/
{
	width: 1280px;
   height: 180px;
   position: fixed;
   right: 0px;
   top: -50px;
   margin: auto;
   margin-top: 1px;
   margin-bottom: auto; 
   background-image: url("top backgroundtitle3.jpg");
 
}

Bon ce n'est probablement pas la meilleure méthode mais ça fonctionne...
J'aurai aimé mettre ce script dans mon fichier.js mais je n'arrive pas à ce que les div soit chargés donc il me renvoit une erreur comme quoi mon "getElementById" est vide...:?

Citation:

Il fallait simplement mettre mon code javascript juste avant la fin de body pour que la page soit chargée et mes "div" reconnus et non pas entre les balises Head.

Citation:

Envoyé par NoSmoking

Bonsoir,
tu utilises l'élément en_tete avant qu'il ne soit DOMesquement construit.

c'est en fait ce que cela veut dire...;)

Citation:

J'aurai aimé mettre ce script dans mon fichier.js mais je n'arrive pas à ce que les div soit chargés donc il me renvoit une erreur comme quoi mon "getElementById" est vide...:?

appel ta fonction sur le onload de la page
Code:

1 2 3 4 5 6 7 8 9 10 11 window.onload = function(){ if( screen.width <= 800) { document.getElementById ('en_tete').className = 'res1'; } else if( screen.width <= 1024) { document.getElementById ('en_tete').className = 'res2'; } else { document.getElementById ('en_tete').className = 'res1'; } }
tout ceci est factorisable.