18041 sujets

Questions générales et questions de débutants

Background aleatoire

Pages :
Bonjour à tous et à toutes

Je cherche a integrer aleatoirement une image en background disons d'un header. A chaque changement de pages, une nouvelle image.
J'imagine que cela doit être gérable enPHP, mais comment faire pour que se soit ma feuille de style qui détermine cela (puisque cela reste une image de décoration)?

Merci des pistes que vous pourriez me laisser entrevoir ... Smiley langue
Salut !
Entre <head> et </head>(si tu le fais entre <body> et </body> ça marche aussi mais ça passe pas la validation) tu places ta fonction php qui se charge d'insérer une petite feuille de style définissant ton background.
exemple:
	<head>
<? php
$random=(un nombre au hasard);
echo"<style type='text/css'>
<!--
@import url(style$random.css);
--></style>";
?>
</head>

Je n'ai pas vérifié mais normalement ça fonctionne.
Il doit y avoir plus simple, mais bon. Smiley smile
Tes feuilles de style s'appeleront style0.css style1.css style2.css etc
Modifié par Ralfman68 (02 May 2006 - 07:11)
Merci à toi !

Mais est-ce que cela ne nuit pas au systeme de mise en cache de la feuille de style ? A chaque nouvelle page le navigateur va recharger la feuille, non ?
Ou sinon juste spécifié le background dans cette feuille est avoir une autre feuille pour tout le reste, peut-etre ...
Je faid des tests et je vous tiens au courant .... si cela interresse quelqu'un !!
Salut,

a écrit :
Ou sinon juste spécifié le background dans cette feuille est avoir une autre feuille pour tout le reste, peut-etre

J'aurais fais de cette façon afin de bénéficier du cache de la feuille de style. Mais ce n'est pas bien important puisque les images, elles seront bien gardée en cache (si le cache des images est bien géré, evidement) (non?)


<head>
<link rel="stylesheet" type="text/css" href="ecran.css" media="screen" title="ecran" />
<? php
$random=(un nombre au hasard);
echo"<style type='text/css'>
div#header {background: fond_$random.png ... ; }
</style>";
?>
</head>
Bonjour,
je me retrouve avec cette erreur quand j'utilise ce script:
[code]Parse error: syntax error, unexpected T_VARIABLE in /mnt/109/sdb/8/5/xxsighxx/I/index.php3 on line 11

Est-ce dû à une erreur dans le script ?

Merci
Bonjour,

Pourquoi pas direct dans le code? du style:

<?php
$numero = rand(0, 5);// un numero aléatoire de 0 à 5
?> 
<div id="header" style="background: url(image_fond_<?php echo $numero;?>.jpg)"></div>


Avec tes images : image_fond_0.jpg, image_fond_1.jpg ........image_fond_5.jpg

le reste du style du bloc dans le css

Si tu utilises encore php3 il faut initialiser la fonction rand() avec srand()
Modifié par ghost (30 Dec 2006 - 00:13)
Pour ma part, j'utilise quelque chose comme ça (ça se rapporche évidemment des autres méthodes citées ci-dessus):


[#black][b]PHP[/b][/#]
<div id="header" class="b<?php echo rand(1, 5);?>">

[#black][b]CSS[/b][/#]
#header.b1 {background:url(/img/header/1.png);}
#header.b2 {background:url(/img/header/2.png);}
#header.b3 {background:url(/img/header/3.png);}
#header.b4 {background:url(/img/header/4.png);}
#header.b5 {background:url(/img/header/5.png);}
Benjamin D.C. a écrit :
Pour ma part, j'utilise quelque chose comme ça (ça se rapporche évidemment des autres méthodes citées ci-dessus):


[#black][b]PHP[/b][/#]
<div id="header" class="b<?php echo rand(1, 5);?>">

[#black][b]CSS[/b][/#]
#header.b1 {background:url(/img/header/1.png);}
#header.b2 {background:url(/img/header/2.png);}
#header.b3 {background:url(/img/header/3.png);}
#header.b4 {background:url(/img/header/4.png);}
#header.b5 {background:url(/img/header/5.png);}

C'est effectivement se qui semble être la meilleure des solutions Smiley smile et surtout la plus simple à mettre en place Smiley cligne
Bonsoir,

voilà, je viens de tester deux des techniques décrites ci-dessus(je précise que je n'y connais rien aux langages dynamiques).

Y a absolument pas de résultat(j'ai bien testé les fichiers de manière distante sur mon serveur). Rien ne s'affiche, la page reste blanche. Smiley confus

Touvert

ps : Ah oui, j'oubliais, les techniques que j'ai utilisé sont celles de Binjamin DC et Ghost.
Modifié par touvert (30 Dec 2006 - 19:01)
Bonjour,

Quelle extension du a donné à tes fichiers ?
Du moment ou il y a du php à interpreter il faut les nommer ma_page.php et non ma_page.html et les appeller de la même manière.
ghost a écrit :
Bonjour,

Quelle extension du a donné à tes fichiers ?
Du moment ou il y a du php à interpreter il faut les nommer ma_page.php et non ma_page.html et les appeller de la même manière.


Oups Smiley confused héhé

On reconnait les vite les vrais noobs en php Smiley langue lol

Bon, ben je vais réessayer ça alors, merci en tout cas. Smiley cligne

Touvert
Bah, voilà, j'ai inséré une extension en .php comme indiqué par Ghost, j'ai tout mis en ligne, mais ça marche po Smiley confus

J'ai l'impression d'avoir foiré un truc moi-même, pourtant, à voir le code, c'est extrêmement simple.

En fait, une fois la page et les images mises en ligne, je fais des refresh et la commande en php à l'air de bien fonctionner puisque je vérifie à chaque fois le code source de ma page et je vois le chiffre de l'image aléatoire qui change donc de ce côté là ça fonctionne, c'est pour l'affichage de ces images que ça foire Smiley decu

Touvert
Re,

Il faut faire attention à tes repertoires, si l'image est dans un dossier images par exemple, il faut spécifier le chemin.

essayes de taper dans ton navigateur l'adresse de ton image récupérée dans le source pour voir si elle est trouvée ...
Bonsoir à tous,

oui, en fait, voici l'adresse : cliquez ici

Sinon, voici les codes que j'ai utilisé :

1 ère méthode(pour les deux méthodes, j'ai adapté les chiffres pour descendre à trois photos) :
<body>
        <?php

$numero = rand(0, 2);// un numero aléatoire de 0 à 2

?> 

<div id="header" style="background: url(image_fond_<?php echo $numero;?>.jpg)"></div>
    </body>


2 ème méthode :

xhtml et php
<div id="header" class="b<?php echo rand(1, 3);?>">


et pour les css
#header.b1 {background:url(header/1.jpg);}

#header.b2 {background:url(header/2.jpg);}

#header.b3 {background:url(header/3.jpg);}


Voilà, merci beaucoup pour votre aide Smiley cligne
Touvert

ps : Si vous ne voyez pas de réaction à vos réponse, c'est normal, je ne serai pas là à partir de demain après-midi jusque lundi soir(j'imagine que vous aussi mais bon). à+ Smiley cligne
Modifié par touvert (31 Dec 2006 - 01:46)
Je suis presque certain qu'il s'agit d'une erreur de chemin, vérifie bien... Le code que tu donnes (pour ma méthode) implique qu'à l'endroit où se trouve ta feuille de style, il y a un dossier nommé "header" qui contient les 3 images. Je doute que tu aies opté pour une arborescence fourre-tout comme celle-là...
Re,

oui, pour le moment, c'est bien comme tu dis, j'ai le fichier php et les images dans le même dossier, donc, on peut déjà dire qu'il y a une erreur de chemin, mais comme j'avais déjà vu au tout début que l'url insérée dans le code l'était de cette manière, j'avais justement mis les images dans un dossier intitulé "header" et j'avais toujours une page aussi blanche. Donc, à mon avis, il doit peut-être y avoir autre chose en plus.

à plus tard Smiley cligne
Re,

Ben, comme tu travailles sur un background, il vaudrait mieux donner un width et un height à ton bloc pour pouvoir l'afficher !! Smiley cligne 
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <style type="text/css" media="screen">
<!--
#header {
margin-top:50px;
width: 400px;
height: 266px;
}
-->        
</style>	
    </head>
    <body>
<?php

$numero = rand(0, 2);// un numero aléatoire de 0 à 3

?> 

<div id="header" style="background: url(http://www.spdesign.be/lightbox2/image_fond_<?php echo $numero;?>.jpg)"></div>         


    </body>
</html>


Sinon, il serait judicieux de prendre des images de même dimension (c'est possible quelles ne le soient pas si besoin mais ça risque de perturber ta mise en page !!)

$numero = rand(0, 2);// un numero aléatoire de 0 à 3 
if ($numero == 0)
{$width = 400; $height= 266;}
if ($numero == 1)
{$width = 400; $height= 267;}
if ($numero == 2)
{$width = 680; $height= 253;}
$style = 'background: url(http://www.spdesign.be/lightbox2/image_fond_'.$numero.'); width:'.$width.'px; height: '.$height.'px';
?> 

<div id="header" style="<?php echo $style;?>"></div>
SUPER Smiley biggrin

Franchement, c'est génial, le script fonctionne super bien.

Encore merci à tous pour votre aide Smiley cligne

Touvert

ps : ah oui, j'ai mis la même taille pour toutes les images comme tu me l'as conseillé Smiley cligne
Modifié par touvert (31 Dec 2006 - 04:34)
Pages :
Sujet clos
Aller à