Changement de fond via un bouton

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Changement de fond via un bouton

Message par TheoO le Sam 9 Aoû 2014 - 14:46

Salut a toutes et tous,
suite a maintes discussion sur le fond du forum, j'essaie de trouver une solution qui puisse satisfaire les gouts de tout le monde.
Avoir la possibilite via un bouton poussoir ou une ligne dans son profil de changer le fond du forum reglerais le probleme.

Pour le moment j'en suis a ca en message d'acceuil :

<input type="button" value="Click!" onclick="document.body.style.backgroundImage = 'url(url de l image)'" />

qui me fait bien changer le fond, mais des que l'on recharge la page ou que l'on change de section on doit clicker.
J'en appel donc a votre aide pour trouver une solution miracle, soit creer un bouton qui garde en memoire sa valeur booleene, Soit avoir une ligne dans le profil pour selectionner un des fonds disponible. ou autre.

Je suis ouvert aux solutions javascript (trouve deux trois truc avec ca sans grand succes) Html ou CSS.

Merci de laide.


Dernière édition par TheoO le Dim 10 Aoû 2014 - 6:05, édité 1 fois

TheoO
Nouveau membre

Messages : 3
Inscrit(e) le : 09/08/2014

http://antaresofwulin.forumactif.org/
TheoO a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de fond via un bouton

Message par Ea le Sam 9 Aoû 2014 - 20:07

Bonjour,


Vous pouvez ajouter ceci en script sur toutes les pages ( voir ce tutoriel ) :

Code:
function _change_bg(i){
    $('body').css('background','url('+i+')');
    if(window.localStorage)
        localStorage.setItem('_body_bg', i);
}
if(window.localStorage && localStorage.getItem('_body_bg'))
    $(function(){_change_bg(localStorage.getItem('_body_bg'))});

ou bien peut-être que ceci est plus expéditif étant donné qu'on attend pas que la page soit ouverte pour changer le fond :

Code:
function _change_bg(i){
  $('#_style_bg').replaceWith('<style id="_style_bg">body{background:url('+i+')}</style>');
    $('body').css('background','url('+i+')');
    if(window.localStorage)
        localStorage.setItem('_body_bg', i);
}
$('<style id="_style_bg"></style>').appendTo( "head" );
if(window.localStorage && localStorage.getItem('_body_bg'))
    _change_bg(localStorage.getItem('_body_bg'));

Et puis vous pourrez mettre où vous souhaitez :

Code:
<input type="button" value="Click!" onclick="_change_bg('http://illiweb.com/fa/fdf3/sujet11.png')" />

pour avoir un bouton,

Code:
<select onchange="_change_bg(this.value)">
  <option value="http://illiweb.com/fa/i/smiles/icon_smile.gif">=)</option>
  <option value="http://illiweb.com/fa/i/smiles/icon_biggrin.png">=D</option>
</select>

pour avoir une liste déroulante,

Code:
<input type="text" onchange="_change_bg(this.value)" />

pour que le membre puisse mettre sa propre url d'image.

Vous pouvez ajouter ces codes où vous souhaitez, mais pour l'ajouter aux profils il faudrait soit une édition de template, soit un script.

Par exemple pour ajouter la liste déroulante sur la page Préférences du profil en phpbb2 :

Code:
$(function(){
  $('#register tr:last').before('<tr><td class="row1"><span class="gen">Image de fond&nbsp;:</span></td><td class="row2"><select onchange="_change_bg(this.value)"><option value="http://illiweb.com/fa/i/smiles/icon_smile.gif">=)</option><option value="http://illiweb.com/fa/i/smiles/icon_biggrin.png">=D</option></select></td></tr>');
});

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23447
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de fond via un bouton

Message par TheoO le Sam 9 Aoû 2014 - 23:17

Bonjour,
Merci pour la reaction rapide.

Je suis parti sur l option presente sur la fin.
la liste déroulante sur la page Préférences"

Deux soucis se presentent :
- Pour une raison qui m echappe, bien que le menu deroulant apparaisse correctement (je peux le configure comme je veux), il ne suavegarde pas la valeur mise apres avoir appuye le bouton enregistre.
- Le BG n'est pas affecte par la fonction. J'ai peut etre loupe une marche a un moment.
J ai tente :
Code:
     <tr>
             <td class="row1"><span class="gen">Image de fond&nbsp;:</span></td>
             <td class="row2"><select onchange="_change_bg(this.value)">
                           <option value="http://i39.servimg.com/u/f39/18/95/28/14/antare14.jpg">Fond etoile</option>
                           <option value="http://i39.servimg.com/u/f39/18/95/28/14/fond10.png">Fond neutre</option>
                        </select></td>
     </tr>
et
Code:
     $(function(){
  $('#register tr:last').before('
<tr>
             <td class="row1"><span class="gen">Image de fond&nbsp;:</span></td>
             <td class="row2"><select onchange="_change_bg(this.value)">
                           <option value="http://i39.servimg.com/u/f39/18/95/28/14/antare14.jpg">Fond etoile</option>
                           <option value="http://i39.servimg.com/u/f39/18/95/28/14/fond10.png">Fond neutre</option>
                        </select></td>
     </tr>
);
});

TheoO
Nouveau membre

Messages : 3
Inscrit(e) le : 09/08/2014

http://antaresofwulin.forumactif.org/
TheoO a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de fond via un bouton

Message par Ea le Dim 10 Aoû 2014 - 0:11

Il faut obligatoirement soit ce code :

Code:
function _change_bg(i){
    $('body').css('background','url('+i+')');
    if(window.localStorage)
        localStorage.setItem('_body_bg', i);
}
if(window.localStorage && localStorage.getItem('_body_bg'))
    $(function(){_change_bg(localStorage.getItem('_body_bg'))});

soit ce code :

Code:
function _change_bg(i){
  $('#_style_bg').replaceWith('<style id="_style_bg">body{background:url('+i+')}</style>');
    $('body').css('background','url('+i+')');
    if(window.localStorage)
        localStorage.setItem('_body_bg', i);
}
$('<style id="_style_bg"></style>').appendTo( "head" );
if(window.localStorage && localStorage.getItem('_body_bg'))
    _change_bg(localStorage.getItem('_body_bg'));

sur toutes les pages.

C'est la partie qui sauvegarde, modifie et restaure le fond.

Les codes qui suivent on besoin de ce code là.

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23447
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Changement de fond via un bouton

Message par TheoO le Dim 10 Aoû 2014 - 6:04

Merci bien du coup de main je tag en resolu, Smile

Bonne journee

TheoO
Nouveau membre

Messages : 3
Inscrit(e) le : 09/08/2014

http://antaresofwulin.forumactif.org/
TheoO a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum