Background / CSS aleatoire, suis perdu

Bonjour,

Je suis perdu, 2heures que je recherche mais tonight, Google n'est pas mon ami !

Voila, je fais principalement de l'integration html/php et suis nul en dev (je precise mon niveau)

J'ai un script PHP qui marche avec des template, ainsi

index.php s'affiche selon le choix en utilisant
'templates/1ertemplate/index.htm'
ou
'templates/2emetemplate/index.htm'

tout ça pour dire que je ne peux mettre de PHP dans mes fichiers de template htm (cette structure ne doit pas etre changée)

mon souci est le suivant, j'ai 4 images pour un background que je souhaite charger aleatoirement dans un div de ce fameux index.htm

Je ne sais vraiment pas comment faire
J'avais penser faire 4 fichiers css differents avec juste 1 style et charger aleatoirement 1 de ces 4 fichiers css .
Mais ça me parrait un peu tordu.

Si quelqu'un a un idée, elle serait la bienvenue..
F.
Modifié par Ferris (06 Sep 2008 - 22:29)

Salut,

tu pourrais faire comme ça :

* tout d'abord il faut renommer les fichiers index.htm en index.php.

* rajouter après la déclaration de ta (tes) feuille(s) CSS

<?php include('img_shuffle.css.php'); ?>

* Le fichier img_shuffle.css.php

<?php
$images_shuffle = array('include/images/image1.gif', 'include/images/image2.gif', 'include/images/image3.gif', 'include/images/image4.gif');
srand((float)microtime() * 1000000);
shuffle($images_shuffle);
?>
<style type="text/css" media="screen"><!--
/* Contenu du bloc CSS */
.class1 {
	background-image: url(<?php echo $images_shuffle[0]; ?>);
}
.class2 {
	background-image: url(<?php echo $images_shuffle[1]; ?>);
}
.class3 {
	background-image: url(<?php echo $images_shuffle[2]; ?>);
}
.class4 {
	background-image: url(<?php echo $images_shuffle[3]; ?>);
}
--></style>

A+

Heyoan a écrit :
Salut,

tu pourrais faire comme ça :

* tout d'abord il faut renommer les fichiers index.htm en index.php.

* rajouter après la déclaration de ta (tes) feuille(s) CSS

<?php include('img_shuffle.css.php'); ?>

* Le fichier img_shuffle.css.php

<?php
$images_shuffle = array('include/images/image1.gif', 'include/images/image2.gif', 'include/images/image3.gif', 'include/images/image4.gif');
srand((float)microtime() * 1000000);
shuffle($images_shuffle);
?>
<style type="text/css" media="screen"><!--
/* Contenu du bloc CSS */
.class1 {
	background-image: url(<?php echo $images_shuffle[0]; ?>);
}
.class2 {
	background-image: url(<?php echo $images_shuffle[1]; ?>);
}
.class3 {
	background-image: url(<?php echo $images_shuffle[2]; ?>);
}
.class4 {
	background-image: url(<?php echo $images_shuffle[3]; ?>);
}
--></style>

A+

Merci de ta reponse, mais dans ton exemple, tu defini bien les images dans le array mais apres tu as 4 class ??

donc dans mon div final, je ne vois pas quel id ou class indiquer avec ta solution?

Ferris a écrit :


Merci de ta reponse, mais dans ton exemple, tu defini bien les images dans le array mais apres tu as 4 class ??

donc dans mon div final, je ne vois pas quel id ou class indiquer avec ta solution?

Ben c'est à remplacer par les id ou class actuels que tu utilises pour positionner les images en background dans tes 4 éléments.

Heyoan a écrit :
Ben c'est à remplacer par les id ou class actuels que tu utilises pour positionner les images en background dans tes 4 éléments.

Hello Heyoan, il me semble avoir compris qu'il s'agit de 4 images à faire défiler de façon aléatoire (ou à chaque rechargement de la page) en background d'un div.

Il s'agit de la fonction rand, non ?
Je ta laisse la suite, tu es largement plus compétent que moi, en PHP

6l20 a écrit :

Il s'agit de la fonction rand, non ?

Comme dirait l'ami Florent : Lisez les specs boudiou !

oppps je me suis mal expliqué..

J'ai 1 div et plusieurs images de fonds (4), je souhaite que dans ce div, au chargement, une image parmi les 4 soit choisie.

Pour l'instant, j'ai renommé mon index.htm en PHP

puis j'ai fait mon div comme suit :
<div id="accueil" class="b<?php echo rand(1, 4);?>">

Dans mon css j'ai placé :
#accueil.b1 { background:url(../images/a01.jpg)}
#accueil.b2 { background:url(../images/a02.jpg)}
#accueil.b3 { background:url(../images/a03.jpg)}
#accueil.b4 { background:url(../images/a04.jpg)}

Marche pas,
alors j'ai essayé :

<div class="accueil" style="background:url(../images/a0<?php echo rand(1, 4);?>.jpg) no-repeat">

marche pas non plus.
Modifié par Ferris (07 Sep 2008 - 00:14)

Ferris a écrit :
oppps je me suis mal expliqué..

J'ai 1 div et plusieurs images de fonds (4), je souhaite que dans ce div, au chargement, une image parmi les 4 soit choisie.

hihihi ! Alors c'est Sylvain qui avait raison !

Ton dernier code devrait fonctionner... à condition qu'il soit bien interprété comme étant du PHP. C'est pour ça que je te disais de faire un include d'un fichier en .php

Pour t'en assurer il suffit d'afficher la source de la page générée (soit ta page index.php, soit ta css quelquechose.php)
Modifié par Heyoan (07 Sep 2008 - 00:20)

Heyoan a écrit :
Comme dirait l'ami Florent : Lisez les specs boudiou !

Heyoan a écrit :
hihihi ! Alors c'est Sylvain qui avait raison !

De toute façon t'es méchant

A part cela, tu me donnes des cours PHP quand tu veux

Ma page htm renommée en php n'est pas interpreté PHP car avec mon dernier code + afficher la source, j'ai :

<div class="accueil" style="background:url(../images/a0<?php echo rand(1, 4);?>.jpg) no-repeat">

C'est pour cela, je me demandais si je pouvais garder mon index.htm et mettre ces 4 variantes de style dans 4 fichiers css et utiliser java pour appeler aléatoirement un de ces 4 fichiers css.

Ben tu pourrais effectivement le faire en Javascript (à ne pas confondre avec Java) mais puisque tu utilises un moteur de templates PHP il suffit de trouver pourquoi ce n'est pas interprété. Peut-être parce que la page index.php n'est pas incluse à l'aide d'include (qui va interpréter PHP) mais à l'aide de readfile (qui ne va pas l'interpréter)...

Il faut chercher et toi seul peut voir la structure.

Bonjour à tous, je me permets d'écrire à la suite de ce sujet, puisque mon problème traite du background-image aléatoire.

En fait, mon problème, c'est que dans tous les exemples du forum d'Alsacréation, vous utilisez tous de nouvelles balises avec un générateur de nombre du type: #mabalise1 ; #mabalise2 ; #mabalise3 ; #mabalise4, etc.

Mon soucis, c'est que je souhaite faire un background-image dynamique sur la balise body, pour avoir un background aléatoire à chaque fois que l'on se connecte sur mon site (http://seeane.free.fr /!\ en construction).

Hors, je doute qu'il soit possible de mettre des chiffres après la balise body, ou d'en faire plusieurs...

J'ai beau faire des tests, cela marche pour un header, mais pas pour un body...
J'avoue être assez "largué" sur le PHP, surtout s'il y a un crossover sur le CSS...

Donc, serait-il possible de faire appel à l'un de vous pour me dire quoi mettre dans mon fichier.html et mon fichier.css?

Cordialement, seeane.

Re-bonjour,

mettons j'utilise ce code-ci dans ma page xhhtml/php appelée accueil.php :
<body style="background:url(/images/<?= "design/ds_site_".rand(0,1).".png"; ?>) repeat top left;">

CONTENU

</body>


et le style.css suivant :

body
{
width: 768px;
margin: auto;
[b]background-image: url("design/ds_site_.png");[/i]
margin-top: 16px;
margin-bottom: 16px;
font-family: "palatino linotype";
}


Par quoi dois-je remplacer ma ligne background-image de mon css?

Sachant que mes 2 images son nommées : ds_site_1.png et ds_site_2.png, qu'elles sont dans le dossier design.

Je suis totalement largué pour le coup :S