Changer couleur de background

**amani1** · 31/01/2014, 10h05

bonjour
je cherche a changer le fond de ma page on cliquant sur un lien , le lien est dynamique il change selon 2 variables mois et annee je travaille avec jsp

voici le code de mon jsp

Code jsp :

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
<%
    String annee = (String)session.getAttribute("annee") == null ? "":(String)session.getAttribute("annee");
    String mois= (String)session.getAttribute("mois") == null ? "" : (String)session.getAttribute("mois");
   
    LinkedList liste = null;
    if(session.getAttribute("list_mois_annee") != null){
        liste = (LinkedList)session.getAttribute("list_mois_annee");
    }
   (LinkedList)session.getAttribute("list_mois_annee");   
    if(liste == null) liste = new LinkedList();
   
%>
 
<li> 
 <span><%=mois%>/<%=mois%></span> 
	<ul id="bg_menu"> 
 <%  
 Iterator itAnnee = liste.iterator();
 while(itAnnee.hasNext()) 
 { 
        HashMap hAnnee = (HashMap)itAnnee.next(); 
        String mois_tmp = (String)hAnnee.get("mois"); 
        String annee_tmp = (String)hAnnee.get("annee"); 
                
 %>  
 
	<li><a href="authentification?mois=<%=mois_tmp%>&amp;annee=<%=annee_tmp%>" target="_self" onclick="changeCouleur(this.couleur)"><%=mois_tmp%> / <%=annee_tmp%></a></li> 
 
 <% }%>

les menus sont stocké dans une liste ils semblent à janvier 2014,fevrier 2014....
je cherche lorsque je choisi le lien janvier 2014 le couleur du fond de ma page sera rouge si je choisi fevrier 2014 la couleur change en bleu

j'ai essayer de faire une fonction java script

Code js :

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

1
2
3
4
5
6
7
8
9
10
11
function changeCouleur(couleur){
 
    if(mois=="janvier" && annee==2014){
        document.body.style.backgroundcolor='red';
    }
    else if(mois=="fevrier" && annee==2014){
            document.body.style.backgroundcolor='bleu';
    }
 
 
}

mais lorsque j'appelle cette fonction rien ne change

**jeffray03** · 31/01/2014, 10h23

tu dois faire un truc de ce genre:

Code :

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

<body style='background-color: ${summary.color}'>

et changer simplement la valeur de summary.color

Eric

**amani1** · 31/01/2014, 10h49

j'ai essayer ça mais le menu disparait

**jeffray03** · 31/01/2014, 10h51

comment est ce que tu l´as fait?
est ce possible de voir le code?
Eric

**jeffray03** · 31/01/2014, 10h58

ah je viens de m´apercevoir du probleme:
question:
comment est ce que tu lui transmet la valeur du mois et de l´année?
sinon il n´entrera jamais dans tes ifs.
et du coup rien ne changera.

Eric

**amani1** · 31/01/2014, 10h59

j'ai ajouté ça a ma page JSP

Code jsp :

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

1
2
3
<li><a href="authentification?mois=<%=mois_tmp%>&amp;annee=<%=annee_tmp%>" target="_self" onclick="changeCouleur(this.couleur)"><%=mois_tmp%> / <%=annee_tmp%></a></li> 
 
<body style='background-color: red;'>

j'ai pas compris en fait ${summary.color} est qu'il s'agit d'une variable java script??

**amani1** · 31/01/2014, 11h05

le mois et l'annee son transmet a partir de servlet d'authentification

au niveau de ma page jsp j'ai recuperer ces 2 variables

Code jsp :

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

1
2
String annee = (String)session.getAttribute("annee") == null ? "":(String)session.getAttribute("annee");
    String mois= (String)session.getAttribute("mois") == null ? "" : (String)session.getAttribute("mois");

**jeffray03** · 31/01/2014, 11h28

voici un exemple que j´ai fait avec que du html, tu devrais pouvoir l´adapter avec du jsp:

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
 
  <html>
  <head>
     <script language="javascript" type="text/javascript">
     var param = getURLParam("param");
 
 
   function getURLParam(strParamName) {
      var strReturn = "";
      var strHref = window.location.href;
      if ( strHref.indexOf("?") > -1 ) {
         var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
         var aQueryString = strQueryString.split("&");
         for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
            if (aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ) {
               var aParam = aQueryString[iParam].split("=");
               strReturn = aParam[1];
               break;
            }
         }
      }
      return unescape(strReturn);
   }
   
    function chngebg ()
    {
           
            document.body.bgColor = param;
       
    }
   </script>
  </head>
  <body onload="chngebg()">
 
   <h1>Eine kleine Verweissammlung</h1>
 
<p>
  <a href="index.html?param=red">Rot</a> Nachrichten<br>
  <a href="index.html?param=blue">Blau</a> Nachrichten<br>
  <a href="index.html?param=yellow">Gelb</a> Nachrichten<br>
 
</p>
 
  </body>
</html>

et si tu n´y arrive pas peux-tu nous envoyer ton code (javascript et jsp)
Eric

**VirgApps** · 31/01/2014, 11h35

Bonjour,
il faut que tu passes tes variable "mois" et "annee" dans ta fonction javascript.

Code :

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

1
2
3
4
5
6
7
8
function changeCouleur(mois, annee){
    if(mois=="janvier" && annee==2014){
        document.body.style.backgroundcolor='red';
    }
    else if(mois=="fevrier" && annee==2014){
            document.body.style.backgroundcolor='bleu';
    }
}

que tu appelleras par

Code :

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

1
2
 
onclick="changeCouleur('${mois}', ${annee});"

Ensuite je te conseille plutot d'appliquer une classe à ton body, ca te permettra de définir la couleur avec une feuille de style

Code :

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

1
2
3
4
5
6
7
8
9
function changeCouleur(mois, anneer) {
 
    if(mois=="janvier" && annee==2014){
        document.body.className = 'couleur1';
    }
    else if(mois=="fevrier" && annee==2014){
         document.body.className = 'couleur2';
    }
}

et dans ta feuille de style

Code :

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

1
2
3
4
5
6
7
body.couleur1 {
    background-color: red;
}
 
body.couleur2 {
    background-color: blue;
}

**amani1** · 31/01/2014, 12h06

j'ai essayer de changer mais rien ne change ma page jsp n'execute pas le code java script j'ai mis mes 2 fichiers dans la même repertoire et j'ai ajouter ça a ma page JSP

Code jsp :

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

1
2
3
4
5
<head>
 
	<script type="text/javascript" src="changecouleur.js"></script>
 
</head>

**jeffray03** · 31/01/2014, 12h14

est ce que ton fichier .js, se trouve dans le meme repertoire que ton application ton fichier jsp?

**amani1** · 31/01/2014, 12h21

oui dans le même répertoire

**amani1** · 31/01/2014, 15h48

j'ai essayer de faire en sorte que les liens soient statique et du coup j'ai changer

Code jsp :

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

1
2
<li ><a href="authentification?mois=Janvier&amp;annee=2014" target="_self"  onclick="{  document.body.className = 'couleur2';}" >Janvier / 2014</a></li>  
<li><a href="authentification?=fevrier&amp;annee=2014" target="_self"  onclick="{  document.body.className = 'couleur3';}">fevrier/ 2014</a></li>

mais lorsque je clique sur le lien la couleur du fond change mais disparu et moi je veut qu'elle reste mais je sais pas pourquoi est ce que je dois changer le onclick par un autre evenements??

**VirgApps** · 31/01/2014, 15h54

Ce qui peut poser problème c'est que tu as une fonction javascript sur une balise lien.
Autrement dit la fonction javascript va s’exécuter (la couleur change) puis tu seras redirigé sur une autre page (exécution du lien) et du coup tu perd le changement de couleur.

Les liens dans ta liste ne servent qu'à changer la couleur de fond ou également à changer de page ?

**amani1** · 31/01/2014, 16h03

non il servent seulement a changer la couleur pas de redirection vers d'autres pages.
j'ai essayer de mettre mon code java script dans la balise li au lieu de celle de lien mais le resultat est le même la couleur disparu

**VirgApps** · 31/01/2014, 16h18

Oui il faut mettre le JavaScript sur le li mais également supprimer la balise <a> car le lien sera tout de même exécuté.

Code :

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

1
2
<li onclick="document.body.className = 'couleur2';" >Janvier / 2014</li> 
<li onclick="{ document.body.className = 'couleur3';}">fevrier/ 2014</li>

**amani1** · 31/01/2014, 17h06

oui j'ai essayer ça mais le probléme c'est lorsque je clique sur un lien le nom de ce dernier s'affiche dans l'url une fois le <a> est supprimer le lien ne sera pas afficher et du coup je vais perdre l'information sur le lien affiché y'a t'il d'autre solution qui me permet de récupérer le nom de lien choisi

**VirgApps** · 31/01/2014, 17h33

En fait ce qui va déterminer quelle méthode utilisée c'est de savoir si tu repasses côté serveur quand tu cliques sur ta liste.
Si non : un javascript fera l'affaire
Si oui : il faut que tu récupères les paramètres durant ton traitement côté serveur puis que tu les retournes lors de ton retour client puis avec un if en jstl tu peux définir quelle classe ajouter à ton body.

**amani1** · 02/02/2014, 02h56

mon probleme est lorsque j'appelle mon fichier java script lors de l’exécution rien ne change on dirait que le code java script ne s’exécute pas malgré que j'ai mis
ça et les 2 fichiers jsp et js se trouvent dans la même repertoire

Code html :

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

1
2
3
4
5
6
 
<head>
 
	<script type="text/javascript" src="changecouleur.js"></script>
 
</head>

et j'ai essayé d’écrire mon code java script dans le fichier jsp en dure entre les balise

Code jsp :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 <body>
<script type="text/javascript">
function changeCouleur(mois, anneer) {
 
    if(mois=="janvier" && annee==2014){
        document.body.className = 'couleur1';
    }
    else if(mois=="fevrier" && annee==2014){
         document.body.className = 'couleur2';
    }
}
</script>
</body>

toujours je rencontre le même probléme

**-Dici-** · 02/02/2014, 18h43

Dans les paramètres de la fonction tu as mis anneer au lieu d'annee. Par ailleurs je ne m'y connais pas moi-même en JS mais je sais que c'est très chiant à débuguer car quand ça plante il ne se passe tout simplement rien en général.

Il faut utiliser des outils de débugage (je pense que tous les navigateurs en embarquent si on cherche un peu) mais j'en dirai pas plus là-dessus car je ne les utilise pas.

Changer couleur de background

Servlets/JSP Java

Discussions similaires

Partager

Partager