background / résolution utilisateur

Version imprimable

28/02/2007, 15h44
Dr_Fureur

background / résolution utilisateur

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
28/02/2007, 15h53
SpaceFrog
fais toi une class par resolution...
Code:

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:

document.getElementById('imagebackground').className='grand'
28/02/2007, 16h08
Dr_Fureur

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
28/02/2007, 16h25
SpaceFrog

non tu le mets dasn le onload après la focntion qui récupère la taille ecran ...
28/02/2007, 16h41
Dr_Fureur

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

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

Code:

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

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 :cry:

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

non switch est une instruction javascript !!!

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

01/03/2007, 16h00
Dr_Fureur

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:

<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
01/03/2007, 17h02
SpaceFrog

Code:

<SCRIPT type='text/javascript'>
01/03/2007, 17h54
Dr_Fureur

:cry: 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
01/03/2007, 18h32
Dr_Fureur

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:

<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
05/03/2007, 08h39
SpaceFrog

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)