Enregistrement du choix d'image de fond

Enregistrement du choix d'image de fond - HTML/CSS - Programmation

Marsh Posté le 27-05-2014 à 12:55:18    

Bonjour à tous !
 
 
Suite à l'utilisation d'un tutoriel de ce forum intitulé Selecteur d'image de fond, et le mélange d'un autre trouver sur le net j'ai pu obtenir ce que je souhaitais mais un seul hic ! Le choix ne s'enregistre pas et je ne m'y connait pas en script et coockie.
 
Et également, comment faire pour en sélectionné une par défaut ?
 
 
Voici mon code :
 
 

Code :
  1.  <form>
  2. <script language="JavaScript">
  4. function ChangeBackGround(fichier) {
  6. document.body.background=fichier
  8. }
  10. </script>
  13. <input type="button" value="Fond 1" onClick="ChangeBackGround('fond1.jpg')">
  15. <input type="button" value="Fond 2" onClick="ChangeBackGround('fond2.jpg')">
  17. <input type="button" value="Fond 3" onClick="ChangeBackGround('fond3.jpg')">
  19. <input type="button" value="Fond 4" onClick="ChangeBackGround('fond4.jpg')">
  21. </form>


 
 
 
 
Je sais qu'il y a pas grand chose à rajouter dans le script pour que le choix de l'utilisateur reste enregistré dans les coockies alors si vous pouviez m'aider, merci !

Reply

Marsh Posté le 27-05-2014 à 12:55:18   

Reply

Marsh Posté le 27-05-2014 à 15:40:36    

Bonjour,
 
Alors pour que ce soit définitif ( sauf nouveau changement de l'utilisateur ) le mieux c'est de passé par une sauvegarde dans un fichier ou BDD.
 
Car les cookie ne sauvegarde que le temps d'une session
 
Sinon si tu veux déjà faire un test avec des cookie voici comment en créé un  
 

Code :
  1. // un cookie qui s'apelle fond, qui a pour valeur fon1.jpg, qui dure 7200sec et se situe à la racine de ton projet
  2. setcookie('fond','fond1.jpg' , time() + 7200,'/');


 
et voici comment l'utiliser
 

Code :
  1. $_COOKIE['fond']


 
Le mieux c'est de faire une function avec un paramètre et la valeur de ton cookie prendrait ce paramètre
 
Bon courage :D
 


---------------
Made you your own sentence without believing that of the others...
Reply

Marsh Posté le 27-05-2014 à 16:25:29    

Je ne suis pas sûr qu'il se soit lancé dans du PHP...
d'ailleurs la selection du fond est fait en Javascript.
 
Il existe des tutos sur internet sur comment gérer des cookies depuis du javascript (via la variable document.cookie). Par exemple : le lien http://www.w3schools.com/js/js_cookies.asp en parle...

Reply

Marsh Posté le 27-05-2014 à 18:00:24    

Merci pour vos réponses !
 
Un cookie peut durer bien plus longtemps que ça.
 
Le problème est que je n'arrive pas du tout à intégrer le cookie en javascript :/
 
Je précise que je suis sur un forum type : forumactif ou encore xooit donc je n'utilise pas de php

Reply

Marsh Posté le 28-05-2014 à 08:50:06    

Je l'ai pas fait en javascript ( déjà j'ai eu du mal en php xD )
 
est-ce que tu as déjà une bride de code pour ton cookie en JS ( je pense qu'au niveau paramétrage ça doit être la même chose qu'en php )
 
Et oui je sais que tu peux le laisser plus longtemps


---------------
Made you your own sentence without believing that of the others...
Reply

Marsh Posté le 28-05-2014 à 09:38:01    

J'ai donné un lien qui donne des bouts de code pour gérer des cookies en JS dans le browser...

Reply

Marsh Posté le 28-05-2014 à 11:00:17    

Voilà le script avec le code cookie ajouté mais j'arrive pas à le paramétrer :
 
 
 
<form>
<script language="JavaScript">
 
var expdate = new Date();
expdate.setTime(expdate.getTime() + (1000*3600*24*365));
document.cookie = 'ChangeBackGround' + newstyle + '; expires=' + expdate.toGMTString() + '; path=/';
self.location = self.location;
   
function ChangeBackGround(fichier) {
   
document.body.background=fichier
   
}
   
</script>
   
   
<input type="button" value="Fond 1" onClick="ChangeBackGround('fond1.jpg')">
   
<input type="button" value="Fond 2" onClick="ChangeBackGround('fond2.jpg')">
   
<input type="button" value="Fond 3" onClick="ChangeBackGround('fond3.jpg')">
   
<input type="button" value="Fond 4" onClick="ChangeBackGround('fond4.jpg')">
   
</form>
 
 
Mais ça ne marche pas :/
 
 

Reply

Marsh Posté le 28-05-2014 à 11:54:58    

Il faut reprendre les fonctions setCookie et getCookie du lien en question.
 
Le code pourrait ressembler à qq chose du style :  

Code :
  1. function ChangeBackGround(fichier) {
  2.     document.body.background=fichier;
  3.     setCookie("backgroundFile",fichier, XXXX);
  4. }
  5. var savedFile = getCookie("backgroundFile" );
  6. if((savedFile !=null) && (savedFile !="" )){
  7.      ChangeBackGround(savedFile );
  8. }
  9. else{
  10.      ChangeBackGround("[fond par defaut].jpg" );
  11. }


Message édité par dreameddeath le 28-05-2014 à 11:55:27
Reply

Marsh Posté le 28-05-2014 à 16:16:01    

ça ne fonctionne pas :/
 
Est ce le code exact ou il y a encore des modifications à apporter ? Je dois dire que je suis paumé avec ce script, les cookies ce n'est pas aussi facile que ce que l'on croit.

Reply

Marsh Posté le 28-05-2014 à 16:32:03    

tu as intégré le code des fonctions setCookie et getCookie du lien :
http://www.w3schools.com/js/js_cookies.asp ????
 
J'ai fait un test Unitaire et ça marche pas trop mal (changement de contenu d'un div+boutons pour changer de valeur)

Reply

Marsh Posté le 28-05-2014 à 16:32:03   

Reply

Marsh Posté le 31-05-2014 à 14:43:48    

Bon voilà ce que ça donne !
 
 

Code :
  1. <body onload="ChangeBackGround(getCookie('ChangeBackGround'))">
  2.     <form> 
  3.         <input type="button" value="Fond 1" onClick="ChangeBackGround('fond1.jpg')">
  4.         <input type="button" value="Fond 2" onClick="ChangeBackGround('fond2.jpg')">
  5.         <input type="button" value="Fond 3" onClick="ChangeBackGround('fond3.jpg')">
  6.         <input type="button" value="Fond 4" onClick="ChangeBackGround('fond4.jpg')">
  7.     </form>
  9.     <script language="JavaScript"> 
  10.         function ChangeBackGround(fichier) {
  11.             document.body.background=fichier
  12.             var expdate = new Date();
  13.             expdate.setTime(expdate.getTime() + (1000*3600*24*365));
  14.             document.cookie = "ChangeBackGround=" + fichier + ';expires='+expdate.toGMTString() + ';path=/';
  15.         }
  17.         function getCookie(cname){
  18.           var name = cname + "=";
  19.           var ca = document.cookie.split(';');
  20.           for(var i=0; i<ca.length; i++) {
  21.             var c = ca[i].trim();
  22.             if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  23.           }
  24.           return "";
  25.         }
  26.     </script>
  27. </body>


 
 
ça fonctionne bien sauf que le hic c'est que l'image de fond vient se charger en dernier, ce qui n'est pas térrible, il faudra que le premier élément à charger sur la page soit le fond ....
 
Savez vous comment y remédier ?

Reply

Marsh Posté le 31-05-2014 à 20:13:43    

Le plus simple est d'aller regarder du côté de jquery et la fonction $(document).ready

Reply

Marsh Posté le 31-05-2014 à 21:55:45    

Je m'y connais malheureusement pas assez :/
 
Puis jQuery il y a longtemps que j'essaye mais sans succès trop complexe à prendre en main pour moi ...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed