Changement aléatoire d'une image de fond dans un div de template

Question

Bonjour à tous ! Je viens solliciter votre aide parce que je suis en train de m'arracher les cheveux !! Je suis en train de créer mon site (bientôt en ligne). J'ai utilisé un template et une feuille de style externe pour définir toutes mes pages. Dans la div centrale de ma page, j'ai défini par CSS une image de fond et j'aimerai que celle-ci puisse changer au chargement des pages. J'avais trouvé un petit script qui marchait pas trop mal mais impossible de l'adapter pour mon template... Je vous explique ce que je voulais faire et puis je vous mets le code, vous allez peut-être (certainement !!) réussir à éclairer ma lanterne, je suis une bille en javascript !! Ce que je voulais définir en javascript : - var = aller chercher la class 'centrale' dans la feuille de style externe modele.css - var = new Array avec les images de remplacement -Fonction à l'ouverture de la page si l'image background de la div 'centrale' = image1.jpg alors choisir une autre image dans new array Ca c'était l'idée.... Et mon code où il manque des trucs, c'est ça (je l'ai trouvé sur un site) : Vous n'auriez pas une idée pour m'aider ??? Merci d'avance, Kalanna

ChasseurDeChimeres · Answer

Je suis pas bien sur d'avoir compris, mais pas à pas ça donne ça : Mais c'est pas très logique car dans ce cas là l'image soldat1.jpg ne sert strictement à rien, juste ça ne suffirais pas? : /code

kalanna79 · Answer

Je ne comprends pas... ca ne marche toujours pas !!

Je suis vraiment une bille en programmation... Ca m'affiche mon image soldat1.jpg et c'est tout... Je comprends rien ! lol
Mon image soldat1.jpg est définie comme backgroundImage dans ma feuille de style externe. Est ce que ce serait pour ca que ca ne fonctionne pas ??

ChasseurDeChimeres · Answer

Normalement ça ne devrais pas poser de problème... on peut voir l'ensemble du code? sinon essai aussi d'installer ça : 
https://addons.mozilla.org/en-US/firefox/addon/60 
ça aide pas mal pour le javascript et le css.

kalanna79 · Answer

Là, c'est la dernière version avec ton code... Je ne vois pas pourquoi ca ne marche pas... Peut etre à cause de ma feuille de style externe... j'en sais rien...





Document sans nom





var fond = new Array("url(../img/soldat1.jpg)", "url(../img/soldat2.jpg)", "url(../img/soldat3.jpg)");

window.onload = function (){
var rand = Math.floor(Math.random() * fond.length);
document.getElementById('centrale').style.backgroundImage=fond[rand];
}
 







  


  
 
  
        
                [../accueil.html accueil]        
         [../presentation.html Présentation]
                
                        [# Plume et Mémoires]
                        [# Qui suis-je ?]
                
        
         [../ouvrages.html Ouvrages]
                
                          [# Déjà parus] 
                         [# A paraître] 
                
        
         [../liens.html Liens]        
         [../contact.html Contact]

ChasseurDeChimeres · Answer

Salut;
En fait tu utilise un "getDocumentById" sur la div "centrale" or celle-ci n'a qu'une classe "centrale" et pas d'id, il te faut donc lui attribuer aussi lui rajouter l'attribut : id="centrale"

bonne continuation

@karamel · Answer

essai en attribuant une class


tu cree dans le css plusieur class avec un background different il ne restera plus qu'a attribuer une des class  grace au script

window.onload = function (){
var rand = Math.floor(Math.random() * fond.length);
document.getElementById('centrale').className=fond[rand];
}

ChasseurDeChimeres · Answer

tu cree dans le css plusieur class avec un background different il ne restera plus qu'a attribuer une des class grace au script

Je pense que s'il créer un tableau c'est qu'il a l'intention de rajouter d'autres images, dans ce cas ça peu être relou de devoir créer une nouvelle classe à chaque fois.

kalanna79 · Answer

Alors, alors... Ca fonctionne !! J'ai pris ta méthode ChasseurdeChimeres, et c'est nickel... sauf que... j'ai encore besoin de vos lumières !!! Je m'explique : j'ai un menu en css qui fonctionne avec une fonction javascript... et qui rentre en conflit avec ce script-là... Je vous mets le code de mes deux fonctions, vous croyez qu'il y a moyen de les combiner pour qu'elles fonctionnent toutes les deux ?? MErci d'avance :)

kalanna79 · Answer

Effectivement, Kazma, l'idée est que je puisse rajouter d'autres images au fur et à mesure... C'est pourquoi cette solution me paraissait entre guillemets la plus simple ! Enfin... plus simple si on sait programmer, ce qui n'est pas mon cas : je bidouille et encore je ne vais pas loin !!! lol

ChasseurDeChimeres · Answer

Re;
J'ai beau chercher je ne vois pas comment ces 2 scripts peuvent entrer en conflit, plus de précisions?

kalanna79 · Answer

Re,
Non désolée, erreur de ma part... Le cache de mes navigateurs a buggué et du coup ca ne m'affichait pas tout. J'ai redémarré et tout est revenu à la normale !!

Merci beaucoup pour ton aide :)

kalanna79 · Answer

Euh... fausse joie... mon menu disparaît sous Internet explorer, tu vois pourquoi ??

ChasseurDeChimeres · Answer

Salut;
Comme ça pas du tout, t'as pas une adresse où on peut voir ç?

kalanna79 · Answer

Salut !!

Après quelques bidouillages et autres manips, en fait, c'était mes déclarations de classe qui mettaient le bazar... a force de trifouiller le code, j'avais tout flingué !!! (vraiment pas douée! ...)

Merci de ton aide et bonne soirée,

Changement aléatoire d'une image de fond dans un div de template

14 réponses

Votre réponse