Crédits
Les images utilisées pour la démo proviennent toutes de cet excellent site, que je vous recommande et qui propose tout une série de motifs vraiment sobres et sympathiques pour habiller vos pages/forums : Subtle Patterns
Le principe
Pour pouvoir réaliser notre effet, réfléchissons à ce que nous devons faire :
- Tout d'abord, il nous faut une série d'images de fond (au moins 2, cela va de soi).
- Ensuite, il va falloir prendre une de ces images au hasard ! Ça va être drôle...
- Enfin, il faut appliquer cette image en tant que background de notre forum, donc sur la balise
<body>.
Pour réaliser cela, nous allons simplement utiliser un petit script en JS. En fait, c'est impératif pour la seconde étape. C'est un peu sortir des sentiers battus que de faire un tutoriel sur du Javascript finalement, mais l'essentiel est assez simple et l'effet assuré.
Au pire, considérez cela comme un "
Code à Copier/Coller" détaillé !
- Et pourquoi on peut pas le faire en CSS ?:
En fait, le CSS n'est pas véritablement un langage de programmation.
Il s'agit plus exactement d'un langage de description. Il n'y a pas, comme en Javascript, de notions de boucles, de conditions et autres concepts alambiqués ! Il s'agit juste d'affecter des valeurs aux propriétés de sélecteurs.
Le problème, c'est qu'on ne peut pas générer de nombre aléatoire. C'est la raison pour laquelle il va nous falloir utiliser le Javascript, tout simplement !
Les images
Avant toute chose, il vous faudra disposer d'au moins 2 images de fond (entre lesquelles votre coeur balance, raison pour laquelle vous êtes assurément en train de lire ce tutoriel).
Il faut les héberger sur Internet pour disposer de leur URL. Pour cela, servez-vous de votre hébergeur habituel. Si vous n'en avez pas, vous en trouverez à la pelle sur le web. Servimg et ImageShack sont très prisés des utilisateurs de ForumActif, ou encore imgur par exemple (merci
'Christa).
Quelque soit votre hébergeur, prenez juste garde aux conditions d'utilisation. Notamment, vérifiez bien combien de temps l'hébergeur stocke vos images si vous ne voulez pas vous retrouver avec un lien cassé dans 2 semaines !
Vous avez hébergé vos images ? Vous avez vos URLs ? Bien, passons au script...
Le Javascript
Rendez-vous dans votre
Panneau d'Administration > Modules > Gestion des codes javascript.
Créez une nouvelle feuille, donnez-lui un nom (
background-aleatoire par exemple) et veillez à ce qu'elle s'affiche
sur toutes les pages du forum en cochant cette option.
Enfin, placez-y le code suivant pour commencer :
- Code:
-
var bg = new Array(); // Crée un tableau pour stocker nos URLs
bg.push('URL-IMAGE-1'); // Ajoute l'URL de notre premier background
bg.push('URL-IMAGE-2');
bg.push('URL-IMAGE-3');
// ... autant d'images que vous le souhaitez
// On change le background du body une fois seulement que tout le DOM est chargé
$(function() {
var urlBg = bg[Math.floor(Math.random()*bg.length)]; // Prend l'une des URLs du tableau au hasard
$('body').css('background-image','url('+urlBg+')'); // L'affecte comme background-image au body
});
Mais qu'est-ce-que c'est que ce charabia ?
Alooooors, étant donné que nous sommes ici dans un tutoriel, je vais m'efforcer de vous expliquer le principe de chaque ligne pour vous faire comprendre le principe. L'idée, c'est que vous adaptiez ce code à autre chose que le background de votre forum si vous vous sentez à l'aise.
Vu qu'il s'agit de Javascript, il est normal que vous ne saisissiez pas forcément certaines notions. Ne vous inquiétez pas, ce n'est pas grave.
Cependant, je vais faire de mon mieux pour vous décortiquer ce petit script qui est, vous allez le voir, tout simple !
var bg = new Array() : tout d'abord, nous allons
créer un tableau (
array en anglais). Pourquoi ? Et bien pour y stocker les URLs de nos images. L'avantage du tableau, c'est qu'il peut contenir autant de variables (d'URLs d'images) que nous le voulons !
bg.push('URL-IMAGE-1') : ça veut juste dire qu'on
rajoute un élément à notre tableau. Notre élément, c'est l'URL de notre image. On ajoute donc autant d'éléments qu'on a d'images !
Prenez bien garde à ne pas oublier les guillemets ' autour de vos URLs, sinon ça ne marchera pas !$(function() { ... } : c'est un peu plus compliqué, vous n'êtes pas obligé de retenir ce que ça signifie. En fait, ça va dire au reste du script de s'exécuter
tout à la fin du chargement de la page. Pourquoi ? Parce-que si on essaie de modifier le
<body> avant qu'il ne soit chargé (donc quand il n'existe pas), ben ça marche pas ! Cette petite ligne nous permet juste de dire : "
Ok, attends que les éléments de la page soient chargés, et ensuite tu pourras les triturer !".
var urlBg = bg[Math.floor(Math.random()*bg.length)] : beurk ! En fait, retenez que
l'on stocke dans une variable (que l'on appelle
urlBg)
l'une des URLs du tableau.
bg[...] va en effet sélectionner l'un des éléments du tableau
bg. C'est la formule qu'il y a dedans (
Math.floor(Math.random()*bg.length)) qui va prendre un chiffre au hasard entre 0 et le numéro du dernier élément du tableau.
$('body') : va
sélectionner notre balise
<body>. C'est un sélecteur, comme ceux du CSS ! Par exemple, si on avait voulu sélectionner un élément ayant comme identifiant
toto, nous aurions fait
$('#toto') !
.css('background-image','url('+urlBg+')') :
applique du CSS sur notre élément sélectionné ! Ici, nous affectons la valeur de notre variable
urlBg à la propriété
background-image de notre élément. Concrètement, on dit à notre
<body> que son background sera notre image, choisie aléatoirement dans notre tableau d'images.
En CSS, cela reviendrait à faire :
- Code:
-
body {
background-image: url('NOTRE_URL_CHOISIE_ALEATOIREMENT');
}
Nous sommes justes obligés d'utiliser le Javascript pour
choisir cette image de manière aléatoire.
Voilà pour les explications et ce tutoriel. J'espère que ce n'était pas trop déroutant et que vous ferez bon usage de ce code et de ces explications.
Sam 30 Mar 2024, 22:07 par 
