Tester la couleur de background et appliquer un script selon le résultat renvoyé

**Jean Claude Tergal** · 28/01/2010, 15h00

Hello

Mon but est le suivant : Sur mon site web, la couleur d'arrière-plan par défaut doit être le blanc. SAUF pour quelques pages que j'aimerais avoir en noir. L'idée est donc de faire une transition entre les pages à fond blanc (et inversement) et celles à fond noir pas trop violente.

Je pensais utiliser l'effet jQuery simple et efficace $(this).animate({ backgroundColor: "black" }, 1000); mais mon problème est le suivant : comment faire en sorte que, lorsqu'on sort de la page "à fond noir" pour aller vers une page "à fond blanc", l'effet s'inverse.

En d'autres termes, je souhaiterais pouvoir écrire un script qui dise :
- "Si backgroundColor est "black" et que j'ouvre une des pages "a", "b" ou "c", alors exécuter script x" (les pages a, b ou c auront un fond blanc, vous l'aurez compris)
- "Si backgroundColor est "white" et que j'ouvre une des pages "d", "e" ou "f", alors exécuter script y" (l'inverse, bien sûr)
- "Sinon, ben... rien"

Je ne sais pas si je me fais bien comprendre... J'espère...

Quelqu'un pourrait-il me donner quelques pistes de réflexion sur ce problème ?

Soit je me fourvoie complètement dans mon raisonnement, soit je dois :
1. Tester quelle est la couleur de fond de la page actuelle
2. Garder cette info dans une variable var("black" ou "white")
3. A l'ouverture d'une nouvelle page, exécuter la fonction $(this).animate({ backgroundColor: "white" }, 1000); si la variable est "black" ou la fonction $(this).animate({ backgroundColor: "black" }, 1000); si la variable est "white".

Cela vous semble-t-il logique ?
Si oui, quelqu'un peut-il me donner des pistes de réflexion pour réaliser ce script car je suis débutant en javascript et je me casse la tête sur ce problème.

Merci d'avance.

**nours312** · 28/01/2010, 16h04

je ne maitrise pas bien jQuery mais tu dois pouvoir faire un truc du style :

Code :

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

1
2
3
4
5
6
7
8
 
if($(this).css("background-color") == "black") {
  $(this).animate({ backgroundColor: "white" }, 1000);
} else if($(this).css("background-color") == "white"){
  $(this).animate({ backgroundColor: "black" }, 1000);
} else {
  $(this).css("background-color", "white");
}

non ??

**Jean Claude Tergal** · 28/01/2010, 17h53

Salut Nours,

tout d'abord un grand merci de t'être penché sur mon problème... C'est cool !

A la lecture de ton script, il me semble bien que ça doit être quelque chose dans cette idée là, pas besoin de créer une variable...

J'ai donc testé et... ça marche mais...
que sous IE... bouh !

FF, chrome ou opéra ne semblent pas accepter je ne sais quoi... seraient-ce les valeurs "white" ou "black" qui ne sont pas reconnues ? Pourtant $(this).animate({ backgroundColor: "white" }, 1000); c'est bien reconnu...

Si quelqu'un a une idée de ce que pourrait être le problème...

Bon je mets quand même le code en entier pour une meilleure vue d'ensemble :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titre de la page</title>
 
 
<script type="text/javascript" src="jquery-1.4.1.js"></script>	
<script type="text/javascript" src="effects.core.js" ></script>
 
<script type="text/javascript">
  $(document).ready(function(){
  $("body").append(function() {
		if($(this).css("background-color") == "black") {
			$(this).animate({ backgroundColor: "white" }, 1000);
		} else if($(this).css("background-color") == "white"){
			$(this).animate({ backgroundColor: "black" }, 1000);
		} else {
			$(this).css("background-color", "white");
		}
    });
  });
</script>
 
<style type="text/css">
body {background-color:black}
</style>
 
</head>
 
<body>
<p><a href="test.php" class="texte">Voyons voir si ça marche dans un sens</a></p>
</body>
</html>