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, 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** · 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");

**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?

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

Changer couleur de background

Servlets/JSP Java

Vue hybride

Discussions similaires

Partager

Partager