background / résolution utilisateur

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

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, 16h53

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, 17h08

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, 17h25

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

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

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, 17h53

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 ...

**Dr_Fureur** · 28/02/2007, 19h17

merci beaucoup
mais apparament ca ne marche toujours pas

y a sans doute une eurreur dans mon code car le fond reste désespérément blanc

Code :

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

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site web</title>
 
<link href="css.css" rel="stylesheet" type="text/css" />
 
<SCRIPT LANGUAGE="JavaScript">
function switch (screen.width){
     case(1280) : document.body.style.background="url("fond_ecran.gif")";
                     break;
 
     case(1024) : document.body.style.background="url("image/fond_ecran.jpg")";
                      break;
 }
</SCRIPT>
 
</head>
 
<body onload="switch (screen.width)">
 
 
	<div id="haut">
	<?
	include("haut.php");
	?>
	</div>	
 
<div id="corps2" align="center">
 
	<table width="100%">
  <tr>
    <td width="25%"><div align="center" class="Style4"><a href="acceuil.php" class="Style9">Accueil</a> </div></td>
    <td bgcolor="#0000FF"><div align="center"><span class="Style5">BIENVENUE</span></div></td>
    <td width="25%"><div align="center"><a href="contact.php" class="Style10">Nous contacter</a> </td>
  </tr>
</table>
</div>
 
</body>
</html>

voila le code de ma page , ya pourant rien de compliquer a par le javascript qui est tout nouveau pour moi .

Merci d'avance pr votre aide

**SpaceFrog** · 01/03/2007, 09h35

non switch est une instruction javascript !!!

Code :

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

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site web</title>
 
<link href="css.css" rel="stylesheet" type="text/css" />
 
<SCRIPT LANGUAGE="JavaScript">
function resol(){
switch (screen.width){
     case(1280) : document.body.style.background="url("fond_ecran.gif")";
                     break;
 
     case(1024) : document.body.style.background="url("image/fond_ecran.jpg")";
                      break;
 }
}
</SCRIPT>
 
</head>
 
<body onload="resol ()">
 
 
	<div id="haut">
	<?
	include("haut.php");
	?>
	</div>	
 
<div id="corps2" align="center">
 
	<table width="100%">
  <tr>
    <td width="25%"><div align="center" class="Style4"><a href="acceuil.php" class="Style9">Accueil</a> </div></td>
    <td bgcolor="#0000FF"><div align="center"><span class="Style5">BIENVENUE</span></div></td>
    <td width="25%"><div align="center"><a href="contact.php" class="Style10">Nous contacter</a> </td>
  </tr>
</table>
</div>
 
</body>
</html>

**Dr_Fureur** · 01/03/2007, 17h00

Merci encore pour ton aide

j'avais essayé un truc dans le même genre , et la je viens de reessayé mais encore sans succés .( toujours un fond blanc )

Ie me dit même que j'ai une erreur au niveau de mon include , alors que si je supprime le javascript je n'ai plus d'erreur .

Est ce que le pb de la baground reste tjr blanc ne viendrai pas du fait que je suis en local grace a easy php .

Ce problème devient de plus en plus mistèrieu.

J'ai testé de créer un bouton sur ma page avec comme action

Code :

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

<input type="button" value="test"  onclick="resol ()"  />

et j'ai donc supprimer le resol () qui était dans le body.

en fesant ca ie ne me détecte plus d'érreur, mais dès que je clique sur le bouton pour tester, ie redétecte la meme erreur ( sur mon include ca na rien a voir), et le background reste blanc

ce problème reste un mystère pour moi

je viens de voir avec la console javascript de firefox que j'avais pas mal d'erreurs tel que :
-resol is not defined
-baground in not defined

on va dire que ces messages sont les cerises sur le gateaux
Merci d'avance et merci pour le temps que je te prends

**SpaceFrog** · 01/03/2007, 18h02

Code :

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

<SCRIPT type='text/javascript'>

**Dr_Fureur** · 01/03/2007, 18h54

non ca ne change toujour rien !!

est ce que ce que je veux faire est techniquement fesable au moins.

j'ai aussi une petite question désolé d'abuser mais pourquoi il dit que la fonction n'est pas défini , ya rien a dfinir pourtant ( a par dire que c'est du javascript)

Encore merci de tocuper de mon cas

**Dr_Fureur** · 01/03/2007, 19h32

c'est bon j'ai réussi a résoudre le problème
effectivement il fallait changer ce que tu m'avais dans le code

Code :

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

<SCRIPT type='text/javascript'>

Mais c'étais pas tout
il y avait un pb avec ma balise background ( confusion entre le css et le javascript )
backgroundImage =/=background-image

alors merci beaucoup a toi SpaceFrog

**SpaceFrog** · 05/03/2007, 09h39

il doit y avoir un truc dans notre FAQ à ce sujet

La règle de base étant que les propriétés CSS avec trait d'union se traduisent en javascript en supprimant le trait d'union et en mettant la première lettre de la seconde partie en majuscule.
Il y a une ou deux exceptions mais de propriétés très peu usitées (tellement peu que je les ai oubliées)

background / résolution utilisateur

JavaScript

Discussions similaires

Partager

Partager