Afficher une image aléatoirement avec du PHP et CSS.

Attention, depuis PHP 5.5.0, certaines extensions SQL sans doute utilisées dans ce tutoriel peuvent être obsolètes et seront supprimées dans le futur, vous devez donc adapter les codes! Exemples ici.
Suite à une question posé sur le forum sur :"Comment afficher une image de fond d'un site aléatoirement", je me suis penché un peut sur le sujet pour répondre à cette question et par la même occasion, écrire un petit tutoriel dessus.
Supposons que votre site utilise donc une image de fond et que vous souhaitez afficher une image de fond aléatoire. Soit vous utilisez une feuille de style, soit vous utilisez la balise <body>. Dans le cas ou vous utilisez la balise <body>, votre code devrait ressembler à quelque chose comme ça :
<body style="background: url('mon-image.jpg');">
Pour afficher une image de fond aléatoire, nous allons concevoir un petit code en PHP qui va, dans un premier temps, utiliser un tableau :
$image = array("image1.jpg","image2.jpg","image3.jpg","image4.jpg");
Si nous effectuons un print_r($image); de notre tableau, nous obtenons le résultat suivant :
Array
(
    [0] => image1.jpg
    [1] => image2.jpg
    [2] => image3.jpg
    [3] => image4.jpg
)
Dans un seconde temps, nous utilisons la fonction rand() qui permet de générer une valeur aléatoire et qui se présente de cette façon :

rand(valeur minimal,valeur maximal);

Nous avons vue qu'un print_r($image); nous renvoyais comme première clé "0" et comme dernière clé "3". Nous pouvons donc écrire comme valeur mini. et maxi. :
rand(0,3);
Ce qui nous donne donc sous forme de variable :
$affichage_aleatoire = $image[rand(0,3)];
Sinon dit, notre tableau sous forme aléatoire. A la final, nous obtenons donc le code suivant :
<?php
//On classe les images dans un tableau
$image = array("image1.jpg","image2.jpg","image3.jpg","image4.jpg");
//on fait un trie aléatoire
$affichage_aleatoire = $image[rand(0,3)]; 
?>
Ceci fait, il nous reste plus qu'à intégrer notre code à la balise <body> :
<body style="background: url('<?php echo $affichage_alleatoire; ?>');">
Voila, c'est simple et fonctionnelle mais dans le cas ou vous ajouteriez d'autres images dans le temps, il vous faudrat à chaque fois modifier manuellement la valeur max. de la fonction rand() et nous allons donc en profiter pour ne pas avoir à intervenir dans cette partie du code à chaque changement ... Nous savons que les valeurs de la fonction rand() sont comprit entre "0" et "3" grace à un print_r($image); qui nous retourne la valeur des clés et nous savons également que nous avons précisément 4 images dans notre tableau.

Et si on comptait tout simplement nos images grace à une nouvelle fonction ??

Pour ce faire, on va utiliser la fonction count() qui va nous permettre de compter le nombre d'images contenu dans le tableau :
count($image);
Faite le teste suivant suite au tableau :
$result = count($image);
echo $result;
Vous obtenez le chiffre 4. Il nous reste juste à intégrer cette fonction dans notre code :
$image[rand(0,count($image))];
Soit :
$affichage_aleatoire = $image[rand(0,count($image))];
Oui mais .... parce qu'il y à un "mais..." ..!

Si vous avez bien suivit, count($image) nous renvoit le chiffre "4" hors, notre tableau, lui nous renvoie comme chiffre (clé) maximum, le chifrre "3" ... ce qui signifie qu'a un moment donné nous allons être hors de notre tableau, donc pas d'image (puisque que 4 n'est pas une clé du tableau) ! Il faut donc tout bêtement soustraire "1" à la valeur max. de count($image) soit :
$image[rand(0,count($image)-1)];
Le code final nous donne donc :
<?php
//On classe les images dans un tableau
$image = array("image1.jpg","image2.jpg","image3.jpg","image4.jpg");
//on fait un trie aléatoire et on compte les éléments du tableau moins 1
$affichage_aleatoire = $image[rand(0,count($image)-1)]; 
?>
<body style="background: url('<?php echo $affichage_aleatoire; ?>');">
Sympa la prise de tête pour si peut de chose ^^ et ce n'est pas finit ! Nous allons voir maintenant comment intégrer directement ce code dans une feuille de style css.

Intégrer du PHP dans une feuille de style

Pas de panique, c'est très simple et nous avons qu'une seule ligne de code à ajouter ;).

Explication :

Chaque page au format HTML transmise par le serveur comprend un entête. Cet entête contient entre autres un code HTTP indiquant le statut de la page. Par exemple, pour une page HTML, le serveur renvoie dans l'entête HTTP la valeur suivante :
Content-Type: text/html
Pour une application javascript :
Content-Type: application/javascript
Pour une feuille de style :
Content-Type: text/css
Nous allons donc tout simplement modifier la "valeur" de cette entête pour indiquer au serveur que notre fichier php est en faite du css en ajoutant une simple ligne :
header("Content-type: text/css");
Vous pouvez donc réaliser en PHP une feuille de style CSS :
<?php
// On modifie l'entête HTTP et on indique que c'est du css
header("Content-type: text/css");  
//On classe les images dans un tableau
$image = array("image1.jpg","image2.jpg","image3.jpg","image4.jpg");
//on fait un trie aléatoire
$affichage_aleatoire = $image[rand(0,count($image)-1)]; 
?>
body {
background: url('<?php echo $affichage_aleatoire; ?>') no-repeat;
}
/*reste de votre feuille de style*/
Si vous possédez un vrai nom de domaine, vous pouvez également effectuer une ré écriture d'url via le fichier .htaccess :
RewriteRule ^style\.css$ style.php [L]

Voir/déposer un commentaire (0) | Signaler un problème