[JS] changer aléatoirement une image affichée en css

GregK84 · Message par **GregK84** » 26 févr. 2007, 14:44

Bonjour,

j'ai une image de fond qui est affichée en css et je voudrais qu'elle change aléatoirement ...

J'ai trouvé quelques méthodes, mais je ne les trouve pas forcément optimisée ou utilisant du php quand il serait possible de le faire en Java Script ...

Que pouvez vous me conseiller ???

Merci beaucoup

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

calimo · Message par **calimo** » 26 févr. 2007, 16:47

Math.random() ? Retourne un nombre aléatoire compris dans l'intervalle [0, 1[
Tu n'as plus qu'à le multiplier par le nombre d'images disponibles puis appeler Math.floor pour avoir un entier

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

GregK84 · Message par **GregK84** » 26 févr. 2007, 17:35

Le seul problème, c'est que mon image est affichée par une css !

Je ne peux pas faire directement un random dans ma css ... ou alors, je fais ma fonction js qui s'active au chargement de la page et qui charge une class css aléatoire. Mais il faut que je crée autant de class css qu'il n'y a d'image ... mais je trouve que mon code sera fortement alourdit.

Code : Tout sélectionner

.bck01 {
...
}
.bck02 {
...
}
....

Est-il possible via javascript de modifier l'url d'une image directement dans un fichier css ? Ou de lui indiquer un autre src par exemple en allant le chercher par un document.getElementById ?

merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

calimo · Message par **calimo** » 26 févr. 2007, 17:44

GregK84 a écrit :Est-il possible via javascript de modifier l'url d'une image directement dans un fichier css ? Ou de lui indiquer un autre src !

Tu t'en fiches du fichier CSS, il a été chargé au début et après on l'oublie. Ce qui compte, c'est l'arbre DOM chargé. Et évidemment que tu peux changer l'image de fond d'un élément

Si c'est des classes, un document.getElementsByClassName, une boucle for, et à chaque itération tu change [element].style

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

GregK84 · Message par **GregK84** » 26 févr. 2007, 21:51

je vais essayer d'écrire un petit script ... on verra ce que cela donne si j'ai des soucis je viendrai encore ... poser des questions

en tout cas, un très grand merci pour tes réponses rapides

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

GregK84 · Message par **GregK84** » 28 févr. 2007, 19:07

voici mon script ! mais il doit savoir faire encore plus optimisé !

Code : Tout sélectionner

function aleatoireImage() {
	var nbrimg = 2 ;
	var links;
	
	numimage = Math.floor(Math.random() * (nbrimg - 1 + 1) + 1);
	links = '<link rel="stylesheet" type="text/css" href="styles/style_layout_bandeau_0'+numimage+'.css" />';
	
	return (links);
}

autant de fichier css que d'image !

et dans le head on affiche :

Code : Tout sélectionner

<script type="text/javascript">
			document.write(aleatoireImage());
		</script>

je suis preneur d'une solution qui prendrait juste 1 seul et unique fichier css et/ou d'un script qui changerait l'url du background dans mon css !

J'espere que vous avez +- compris

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

calimo · Message par **calimo** » 01 mars 2007, 10:03

Tu n'as pas besoin d'avoir plusieurs CSS

Insère ta CSS normalement. Ensuite de quoi tu fais un getElementById sur l'élément voulu et tu en changes simplement le style

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

GregK84 · Message par **GregK84** » 02 mars 2007, 19:03

le js ce n'est pas mon dada :p je vais essaye de réécrire ma fonction ^^

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

alain47 · Message par **alain47** » 04 mars 2007, 10:00

Merci de nous preciser l'adresse de ton site, pour qu on puisse voir le resultat.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

GregK84 · Message par **GregK84** » 05 mars 2007, 23:26

www.arbeaumont.be (tjr en développement ...)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

calimo · Message par **calimo** » 06 mars 2007, 09:16

Code : Tout sélectionner

<div class="bandeau">

Tu comptes avoir plusieurs bandeaux sur la page ?

Si ce n'est pas le cas, mets un id à la place de la classe, puis tu pourras faire document.getElementById('bandeau').style='...'

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

PS : <div class="header"></div> ne définit pas un titre... l'image qui contient le titre, c'est du contenu, donc elle ne doit pas être dans la CSS

alain47 · Message par **alain47** » 07 mars 2007, 22:04

Bonjour Gregory,

Je viens d'aller voir ton site. Je le trouve sobre et efficace, j'aime bien.

Mais en regardant le code source de ta page d'accueil, je note que tu as mis le titre sous l'onglet sous forme de lien qui dirige... vers lui meme (au niveau du H1).

Code : Tout sélectionner

</div>
	
	<h1><a href="index.htm"><span class="guillemet">&lsquo;&lsquo;</span> Athénée Royal de Beaumont <span class="guillemet">&rsquo;&rsquo;</span></a><span class="sousmenu"> &raquo; Accueil</span></h1>

	
	<div id="col_content">

		<h2 class="titre">Notre projet d'école : apprendre à devenir ...</h2>

Y a t il une raison particuliere ? a priori, ca ne sert à rien, où du moins je ne vois pas.

En ce qui concerne l image de fond, il semble que tu aies 2 bandeaux identiques avec la couleur du texte qui change d'un bandeau à l'autre. Ai je raison ?

Il me semble également, que ces 2 bandeaux changent qu'après avoir clicker sur un lien :

Code : Tout sélectionner

<li><a  onclick="aleatoireImage()" title="Lien vers la conférence extramadour" href="index.htm">

Il est peut etre possible egalement de passer de l'un à l'autre , par un timer. Comme cela, les bandeaux alterneraient pendant que le visiteur lit le texte de la page, sans qu il ait à clicker sur un lien.
Je pense que c'est ce que disait calimo lorsqu'il parlait de "boucle for".

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

GregK84 · Message par **GregK84** » 08 mars 2007, 13:53

calimo a écrit :
Code : Tout sélectionner
<div class="bandeau">
Tu comptes avoir plusieurs bandeaux sur la page ?
Si ce n'est pas le cas, mets un id à la place de la classe, puis tu pourras faire document.getElementById('bandeau').style='...'

Je prend bonne note

alain47 a écrit :Bonjour Gregory,

Je viens d'aller voir ton site. Je le trouve sobre et efficace, j'aime bien.

Mais en regardant le code source de ta page d'accueil, je note que tu as mis le titre sous l'onglet sous forme de lien qui dirige... vers lui meme (au niveau du H1).
Code : Tout sélectionner
</div>
	
	<h1><a href="index.htm"><span class="guillemet">&lsquo;&lsquo;</span> Athénée Royal de Beaumont <span class="guillemet">&rsquo;&rsquo;</span></a><span class="sousmenu"> &raquo; Accueil</span></h1>

	
	<div id="col_content">

		<h2 class="titre">Notre projet d'école : apprendre à devenir ...</h2> 
Y a t il une raison particuliere ? a priori, ca ne sert à rien, où du moins je ne vois pas.

Merci pour le site !

La raison est que mon H1 fait office d'historique pour déterminer la rubrique ou l'on se trouve ...

Normalement, je dois le changer et mettre seulement le titre en H1 et l'historique dans un P ou div ...

alain47 a écrit :En ce qui concerne l image de fond, il semble que tu aies 2 bandeaux identiques avec la couleur du texte qui change d'un bandeau à l'autre. Ai je raison ?

Tout a fait ! Normalement, je dois mettre d'autre image, ici c'était pour tester le fonctionnement de mon script très light ...

alain47 a écrit :Il me semble également, que ces 2 bandeaux changent qu'après avoir clicker sur un lien :
Code : Tout sélectionner
<li><a  onclick="aleatoireImage()" title="Lien vers la conférence extramadour" href="index.htm">

Merci de me le faire remarqué ! c'est une erreur de ma part ! La fonction doit être appelée via onpreload="" sur le body !

alain47 a écrit :Il est peut etre possible egalement de passer de l'un à l'autre , par un timer. Comme cela, les bandeaux alterneraient pendant que le visiteur lit le texte de la page, sans qu il ait à clicker sur un lien.
Je pense que c'est ce que disait calimo lorsqu'il parlait de "boucle for".

C'est effectivement une très bonne idée, je vais "essaye" de réaliser un script de ce type que je publierai ensuite ... mais j'ai très peux de connaissance en javascript !

a bientôt

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

alain47 · Message par **alain47** » 08 mars 2007, 19:27

Salut Greg,

J'ai consulté ma doc (oui je sais, elle date d'avant la guerre, comme me l'a rappelé HP

) et voila ce que je te propose :

Code : Tout sélectionner

<html>

 <head>
  <title>Essai</title>
    <script>
          function timer()
              { alert('Et voila');}
    </script>
 </head>

 <body onLoad="setInterval(timer,3000)">
     essai timer
 </body>

</html>

Toutes les 3 secondes environ (il faut marquer 3000 parce que ca marche en millisecondes) , la minuterie ira dans la fonction indiquee (ici, 'timer' donc pour toi il faudra changer timer par 'image_aleatoire' par exemple).

Je l'ai essayé sur mon portable (Windows XP), et ca marche. Je l'ai essayé sur IE et FF 2.0 : ca marche comme tel sur les deux.

Si ca peut t'aider.

Une dernier chose : ce timer marche sur la page. Donc, dès que tu changes de page, ca s'arrête. Il te faudra donc copier la ligne <body ..> et la coller sur chaque page , et mettre le script que j'ai mis dans le <HEAD> dans un fichier javascript externe pour que chaque page puisse y avoir accès.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

GregK84 · Message par **GregK84** » 09 mars 2007, 16:48

merci

je regarderai a ca ce weekend

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

Geckozone

[JS] changer aléatoirement une image affichée en css

[JS] changer aléatoirement une image affichée en css

Qui est en ligne ?