begin process at 2012 05 28 23:52:42
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Divers

 > 

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


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

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

mercredi 24 février 2010 à 11:30:40 | Changement aléatoire d'une image de fond dans un div de template

kalanna79

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
mercredi 24 février 2010 à 17:25:22 | Re : Changement aléatoire d'une image de fond dans un div de template

ChasseurDeChimeres

Je suis pas bien sur d'avoir compris, mais pas à pas ça donne ça :

Code Javascript :
<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? :
Code Javascript :
<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]
mercredi 24 février 2010 à 19:27:15 | Re : Changement aléatoire d'une image de fond dans un div de template

kalanna79

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 ??
mercredi 24 février 2010 à 20:00:30 | Re : Changement aléatoire d'une image de fond dans un div de template

ChasseurDeChimeres

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.
mercredi 24 février 2010 à 20:24:20 | Re : Changement aléatoire d'une image de fond dans un div de template

kalanna79

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Document sans nom</title>
<!-- TemplateEndEditable -->
<link href="../modele.css" rel="stylesheet" type="text/css">


<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>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>

<body>

<div class="div_conteneur">
<div class="entete" align="center"><img src="../img/images/images/site2_01.jpg"></div>
<div class="menu">
<ul>
<li>
<a href="../accueil.html">accueil</a> </li>
<li> <a href="../presentation.html">Présentation</a>
<ul>
<li><a href="#">Plume et Mémoires</a></li>
<li><a href="#">Qui suis-je ?</a></li>
</ul>
</li>
<li> <a href="../ouvrages.html">Ouvrages</a>
<ul>
<li> <a href="#">Déjà parus</a> </li>
<li> <a href="#">A paraître</a> </li>
</ul>
</li>
<li> <a href="../liens.html">Liens</a> </li>
<li> <a href="../contact.html">Contact</a> </li>
</ul>
</div>
<div class="centrale" ><!-- TemplateBeginEditable name="contenuTXT" -->
<div class="texte">
<!-- TemplateEndEditable --> </div>
<div class="pied"></div>
</div>
</body>
</html>
mercredi 24 février 2010 à 20:56:45 | Re : Changement aléatoire d'une image de fond dans un div de template

ChasseurDeChimeres

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
mercredi 24 février 2010 à 21:10:45 | Re : Changement aléatoire d'une image de fond dans un div de template

kazma

Administrateur CodeS-SourceS
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

Code Javascript :
window.onload = function (){
var rand = Math.floor(Math.random() * fond.length);
document.getElementById('centrale').className=fond[rand];
} 
mercredi 24 février 2010 à 21:52:51 | Re : Changement aléatoire d'une image de fond dans un div de template

ChasseurDeChimeres

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.
mercredi 24 février 2010 à 23:04:31 | Re : Changement aléatoire d'une image de fond dans un div de template

kalanna79

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 :)
mercredi 24 février 2010 à 23:07:58 | Re : Changement aléatoire d'une image de fond dans un div de template

kalanna79

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

1 2

Cette discussion est classée dans : image, fond, template, div, centrale


Répondre à ce message

Sujets en rapport avec ce message

Image de fond non duplicable [ par GLTRADE ] Bonjours à tou(te)s, je rencontre un problème avec un fond d'écran pour ma page web. Mon client voudrait que l'image de fond ne se duplique pas (et ce Un SEUL background [ par floflotz ] bonjour à tous,je souhaite mettre une image en background sur mon site. Le problème est que quand j'applique la propriété background à mon body, il mu image background et redimensionnement [ par evilfrog83 ] Comment puis-je faire pour qu'une image positionnée en temps que fond d'un tableau puisse s'agrandir et se rétrécir en fonction de la taille de celui- Image centrée en fond de tableau... [ par orelien ] Bonjour,J'aimerais placer une image en fond d'un tableau mais centrée...Merci.Orélien. repertoire de base (root) [ par SemBy ] existe-il une fonction qui permet de definir un repertoire de base?problem:je developpe un editeur de site web en utilisant un div editable,d'abord je donner un fond transparent à une image [ par cz1702 ] Comment faire pour que le fond d'une image (blanc par exemple) soit transparent sur une page web (si on a une image en arrière plan ) ? changer l image de fond d une cellule d un tableau dans une frame [ par Poulipe ] Bonjour,je suis incapable de trouver comment changer l image de fond d une cellule dans ma frame du haut....j ai essayer plusieurs trucs style :parent Changer le fond de la page dans une fonction js [ par edelendil ] voila le ptit pb j'essaye avec cette fonction de changer le fond d'un pop-up// On récupère le nom de l'image ds la barre d'adressevar chaine=window.lo Déplacer un DIV avec une image à l'intérieur [ par flexx ] BonjourJe souhaite déplacer un div avec la souris en cliquant à l'intérieur (glisser-déplacer)Le problème, c'est que quand le div contient une image ( charger image dans un DIV [ par putch ] salut à tous !voila mon soucij'ai une liste deroulante contenant des noms d'imagesje souhaiterai que lorsque l'on selectionne un element cela affiche


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,218 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales