1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

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

Signaler
Messages postés
8
Date d'inscription
jeudi 5 mars 2009
Statut
Membre
Dernière intervention
25 février 2010
 -
Messages postés
8
Date d'inscription
jeudi 5 mars 2009
Statut
Membre
Dernière intervention
25 février 2010
 -
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) :
<script type="text/javascript">
<!--
var fond = new Array("url(img/soldat1.jpg)", "url(img/soldat2.jpg)", "url(img/soldat3.jpg)");
function rand() {
return Math.floor(Math.random() * fond.length) ;
}
window.onload = function (){
document.getElementById('centrale').style.backgroundImage=fond[rand()];
}
//-->
</script>


Vous n'auriez pas une idée pour m'aider ???
Merci d'avance,

Kalanna

14 réponses

Réponse 1 / 14
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
 3
Je suis pas bien sur d'avoir compris, mais pas à pas ça donne ça : 

<script type="text/javascript">
var fond = new Array("url(img/soldat1.jpg)", "url(img/soldat2.jpg)", "url(img/soldat3.jpg)");

window.onload = function (){
  if (document.getElementById('centrale').style.backgroundImage == "url(img/soldat1.jpg)") {
       var rand = Math.floor(Math.random() * fond.length);
document.getElementById('centrale').style.backgroundImage=fond[rand];
}
</script>


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? : 
<script type="text/javascript">
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];
}
</script>
/code
Réponse 2 / 14
Messages postés
8
Date d'inscription
jeudi 5 mars 2009
Statut
Membre
Dernière intervention
25 février 2010
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 ??
Réponse 3 / 14
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
 3
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.
Réponse 4 / 14
Messages postés
8
Date d'inscription
jeudi 5 mars 2009
Statut
Membre
Dernière intervention
25 février 2010
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]















Réponse 5 / 14
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
 3
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
Réponse 6 / 14
Messages postés
1802
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
12 janvier 2022
 141
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];
}
Réponse 7 / 14
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
 3
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.
Réponse 8 / 14
Messages postés
8
Date d'inscription
jeudi 5 mars 2009
Statut
Membre
Dernière intervention
25 février 2010
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 ??


<script type="text/javascript">
<!--
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//-->
</script>

<script type="text/javascript">
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];
}
</script>


MErci d'avance :)
Réponse 9 / 14
Messages postés
8
Date d'inscription
jeudi 5 mars 2009
Statut
Membre
Dernière intervention
25 février 2010
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
Réponse 10 / 14
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
 3
Re;
J'ai beau chercher je ne vois pas comment ces 2 scripts peuvent entrer en conflit, plus de précisions?
Réponse 11 / 14
Messages postés
8
Date d'inscription
jeudi 5 mars 2009
Statut
Membre
Dernière intervention
25 février 2010
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 :)
Réponse 12 / 14
Messages postés
8
Date d'inscription
jeudi 5 mars 2009
Statut
Membre
Dernière intervention
25 février 2010
Euh... fausse joie... mon menu disparaît sous Internet explorer, tu vois pourquoi ??
Réponse 13 / 14
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
 3
Salut;
Comme ça pas du tout, t'as pas une adresse où on peut voir ç?
Réponse 14 / 14
Messages postés
8
Date d'inscription
jeudi 5 mars 2009
Statut
Membre
Dernière intervention
25 février 2010
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,
Répondre Posez votre question