📰 La Revue de TheRaphit.com Article n° 56 [25 septembre 2026] [Article au hasard 🎲] [Précédent]  Dernier 

Ajoutez du contenu aléatoire à vos pages

 Très simplement, avec seulement JavaScript

Et pour exemple les (très) charmantes illustrations de la mascotte du site...


[Flag GB]  [English version]  [Flag GB]





Envie de partager vos créations sur le Web ? Vous allez rapidement vous poser la question de savoir quelles sont les meilleures de vos images à proposer sur votre page d'accueil. Si vous avez beaucoup de contenu et que vous n'affichez que le plus récent, vous pourriez manquer d'intéresser un visiteur à vos plus anciennes créations. Et si vous faites une sélection vous-même, vous n'êtes jamais sûr de savoir ce qui plaira le plus.

La solution ? Essayez l'aléatoire !

Epargnez-vous la corvée de devoir mettre à jour régulièrement votre site, et laissez sa chance à la chance ! Si vous disposez déjà d'une belle quantité de contenu, c'est une très bonne façon de mieux accrocher vos visiteurs. Pour l'avoir pratiqué sur mon propre site, cela fonctionne plutôt bien.

Il y a de nombreuses façons de faire cela, mais comme souvent les pages traitant le sujet sur Internet sont souvent incomplètes ou passent à côté des informations les plus importantes. Cette page est là pour tout clarifier afin que ce soit le simple possible, même pour les débutants !

Pourquoi utiliser JavaScript ?



Ajouter du JavaScript (JS) à une page Web ne nécessite rien d'autre que le code du script ! Pas de module serveur, pas d'extension de navigateur. Le JS existe depuis maintenant plus de 30 ans, et il est littéralement supporté partout. L'interprétation du script est faite par le navigateur du visiteur : cela signifie que même avec un plan d'hébergement facturé au temps CPU ou à la bande passante, l'ajout du JS n'entraîne aucun coût supplémentaire.

Ici sur TheRaphit.com, il est employé un design quelque peu vieux jeu avec pratiquement que du HTML et sans contenu généré par PHP ou d'autres outils similaires. Cela permet notamment de garder une configuration serveur très simple (et stupide).

Cela ne veut pas dire pour autant qu'il n'est pas possible de faire quelques petites choses rigolotes, comme sur la page principale de la Pink Zone 2025 où les échantillons de fonds d'écran pour chacune des résolutions sont choisis aléatoirement au chargement de la page.

[Screenshot 'TheRaphit's Manga Pink Zone 2025']

Ce n'est pas limité aux images. JS peut être employé pour afficher des textes aléatoires ou des liens HTML, le tout avec du code très similaire.

Les bases de l'intégration de JavaScript et HTML



[ Vous pouvez passer cette section si vous êtes déjà à l'aise avec cela - ou vous rendre directement au téléchargement des scripts si vous êtes pressé ! ]


La structure générale d'une page HTML incluant de petits blocs de code JavaScript ressemble à ceci :
<html>
  <head>
    <script type="text/javascript">
      ... Le code du script s'insère ici ...
    </script>
  </head>
  <body>
    ... HTML statique ...
    <script type="text/javascript">
      ... Code d'un autre script ...
    </script>
    ... HTML statique, suite ...
  </body>
</html>
Oui, il est possible d'ajouter du JS à différents endroits d'un fichier HTML. Généralement on définit les fonctions dans la section <head>...</head>, et les appels à ces fonctions directement dans le corps de la page. Mais ce n'est pas une règle absolue - si ce n'est que cela n'aurait pas beaucoup de sens d'écrire quelque chose avec un script dans l'en-tête HTML.

Une autre manière de faire est de créer un fichier .js séparé, comme cela sera expliqué plus loin dans la partie alternatives de ce guide.

Supposons que l'on définisse une fonction JS Contenu_Aleatoire(content_type) dans notre en-tête HTML. Pour l'appeler depuis le corps de la page, on y ajoute ceci :
<script type="text/javascript">
  Contenu_Aleatoire("texte");
</script>
Et c'est tout ! Cependant, une bonne pratique est de prévoir une alternative en HTML pur, au cas où JavaScript n'est pas disponible. Cela peut notamment être utile pour les robots d'indexation, qui n'interprètent pas le code JS la plupart du temps. Ainsi, afficher un « contenu par défaut » pour les visiteurs non-humains est important afin de garantir le bon référencement des pages sur les moteurs de recherche.

Cela se fait avec la balise HTML <noscript>...</noscript>. Tout ce qu'elle délimite sera en effet ignoré par les navigateurs dans leur configuration standard, où ils exécutent les scripts.

Pour résumer, la structure du <body> de la page HTML ressemblera à ceci :
<body>
  ... Corps de la page HTML ...
  <noscript>
    Activez le JavaScript dans votre navigateur pour voir mon splendide contenu aléatoire !
  </noscript>
  <script type="text/javascript">
    Contenu_Aleatoire("texte");
  </script>
  ... Corps de la page HTML, suite ...
</body>
Cela n'a pas d'importance si la déclaration <noscript> est ajoutée avant ou après l'appel du script dans la page HTML.

C'est parti pour de l'alétoire !



Commençons tranquillement avec un script qui affiche aléatoirement une ligne de texte prédéfinie. Tout d'abord, on définit la fonction :
<script type="text/javascript">

    function Citation_Aleatoire() {

        var total_messages = 4;
        var text_to_display = new Array(total_messages);

        text_to_display[0] = "Ce <a href=\"/\">site</a> est incroyab' n'est-ce pas ?";
        text_to_display[1] = "La mascotte détient de très beaux actifs... <a href=\"rev50.html#galerie\">Cliquez ici</a> pour en voir davantage !";
        text_to_display[2] = "Une question à propos du site ? Lisez la <a href=\"../faq.html\">FAQ</a> !";
        text_to_display[3] = "Il faut que j'ajoute davantage de textes aléatoires ici... Revenez prochainement !";

        n = Math.floor(Math.random() * total_messages + 1);

        document.write("<b>Citation aléatoire n° " + n + "</b> : " + text_to_display[n-1]);

    }

</script>
Ce bloc est a insérer dans la partie <head>...</head> de la page.

La fonction définit un tableau de quatre citations pouvant être affichées, écrites exactement comme si elles devaient être incluses directement dans n'importe quel document HTML. Les phrases peuvent donc contenir n'importe quel balise et notamment des liens. Etatnt donné qu'une chaîne de caractères doit être délimitée par "..." en JS, il est nécessaire d'utiliser le backslash '\' lorsqu'un double-quote doit faire partie de la chaîne en question.

L'étape suivante consiste à choisir un entier aléatoire (parmi 4), et enfin de faire afficher le texte par le navigateur avec le document.write final. Il y a une petite subtilité à relever : les tableaux sont numérotés à partir de 0 en JavaScript mais écrire « Citation n° 0 » serait quelque peu étrange... Pour arranger cela, on génère un décalage de + 1 pour les nombres aléatoires, qu'on compense par un − 1 à la dernière ligne. En changeant la valeur de total_messages puis en complétant le tableau text_to_display il est possible d'ajouter autant de citations que l'on veut.

Il n'y a plus qu'à appeler maintenant la fonction ainsi définie dans le corps de la page HTML, tout en prévoyant le petit message au cas où JavaScript ne serait pas disponible.
<center>
  <noscript>
    <font size="+2"><i>JavaScript désactivé ! Vous ne pouvez pas voir cet exemple en action...</i></font>
  </noscript>
  <script type="text/javascript">
    Citation_Aleatoire();
  </script>
</center>
Pour voir ce que cela donne en pratique, n'hésitez pas à recharger la page !


Eh oui, c'est aussi simple que cela.


Après cette petite mise en bouche, il est temps de passer au plat principal : les images !

Pour commencer, il convient de faire un minimum d'organisation. Et le mieux c'est que les images (et leurs miniatures) utilisent un schéma de nommage numéroté commme image-1.png, image-2.png, ... Il vaut mieux également préférer image-42.png à image-0042.png par exemple, car cela simplifie grandement l'écriture du code JavaScript.

S'il n'est pas possible de renommer les fichiers image, il reste une solution lorsque le serveur Web fonctionne sous UNIX : créer des liens symboliques.
% ln -s paysage_argentine_2012_1.png image-1.png
% ln -s oiseaux_australie_2015_4.png image-2.png
% ...
Si cela est également impossible, il y toutefois une solution, bien que moins commode.

Plusieurs visuels (16 au total) avec la mascotte sur le thème « Matrix » (avec des ordinateurs et du texte vert fictionnel) sont disponibles sur le site à titre d'exemple pour cette page, nommés main-matrix-1-big.png, main-matrix-2-big.png, ... Avec leurs miniatures associées main-matrix-1.jpg, main-matrix-2.jpg, ... Tous sont logés dans le répertoire de l'article n° 40, dont une sous-page est justement celle de la mascotte. Ajouter un lien vers l'image en grand format sous forme d'une vignette dans un document HTML ressemblerait à ceci :
<a href="images/rev40/main-matrix-1-big.png" target="_blank">
  <img width="256" height="144" border="0" alt="[Mascotte dans la Matrice - n° 1]" src="images/rev40/main-matrix-1.jpg">
</a>
On va donc écrire un script qui va produire à répétition des blocs de HTML similaires, mais avec à chaque fois une image et la vignette associée différentes, et choisies aléatoirement. De plus, on va s'assurer qu'une même miniature ne sera affichée qu'une seule fois.

Voici le script ; les explications sont disponibles juste après.
<script type="text/javascript">

    function Images_Aleatoires(total_images, display_images, joined_images) {

        var images_index = [];

        // Etape 1
        for (let k = 0; k < display_images; k++) {
            let a = true, n;

            while(a) {
                n = Math.floor(Math.random() * total_images + 1);
                a = images_index.includes(n);
            }

            images_index.push(n);
        }

        // Etape 2
        for (let p = 0; p < display_images; p++) {
            document.write("<a href=\"images/rev40/main-matrix-" + images_index[p] + "-big.png\" target=\"_blank\"><img width=\"256\" height=\"144\" border=\"0\" title=\"Mascotte dans la Matrice - n° " + images_index[p] + "\" src=\"images/rev40/main-matrix-" + images_index[p] + ".jpg\"></a>");

            if (((p + 1) % joined_images) == 0) {
                document.write("<br>");
            } else {
                document.write("&nbsp;");
            }

        }

        // Le grand final
        document.write("<br><i>Cliquez sur une miniature pour ouvrir l'image en grand !</i>");

    }

  </script>
L'idée consiste à découper le code HTML à écrire en plusieurs éléments qui ne changeront pas d'une ligne à l'autre, puis de joindre chacun de ces éléments avec le numéro de l'image.

L'étape 1 permet de construire un index contenant les numéros d'image choisis aléatoirement, lequel est judicieusement nommé images_index. On commence avec un tableau vide. Puis à l'aide d'une boucle, on choisit un entier aléatoire entre 1 et la valeur de total_images (les deux inclus) puis on vérifie dans une sous-boucle si ce nombre est déjà présent dans le tableau. Si ce n'est pas le cas, il y est ajouté. Dans le cas contraire, on choisit un autre nombre aléatoirement. On procède ainsi jusqu'à ce que le tableau contienne autant de nombrfes que la valeur de display_images, la quantité d'images que l'on souhaite afficher.

L'étape 2 est la boucle principale : on construit chaque déclaration HTML, puis on l'écrit sur la page. A chaque fois que l'on a affiché autant d'images que la valeur du paramètre joined_images, on insère un retour à la ligne avec <br>, sinon on écrit juste un espace insécable. Si on préfère que les vignettes soient collées les unes aux autres, il suffit de supprimer la ligne de code écrivant ce &nbsp;.

Finalement après cette boucle principale, on écrit un petit texte d'aide indiquant au lecteur que les miniatures sont cliquables, et qu'elles donnent accès à l'image en taille réelle.

Voici ce que l'on obtient avec :
<script type="text/javascript">
  Images_Aleatoires(16, 4, 2);
</script>
A nouveau, cliquez sur le bouton « recharger » de votre navigateur. Mais essayez de ne pas tomber amoureux de la mascotte...




N'hésitez pas à essayer différentes dispositions en changeant display_images ainsi que joined_images lors de l'appel au script ! Vous pouvez également jouer sur le paramètre total_images, notamment si vous ne souhaitez pas donner accès à toutes vos images. Et si vous ne souhaitez pas de retour à la ligne, par exemple pour intégrer les miniatures dans un volet séparé disposant de sa propre barre de défilement et de ses boutons de navigation, utilisez simplement pour paramètre joined_images un nombre supérieur à la valeur de display_images.

Il faut cependant garder en tête que ces « espaces insécables » &nbsp; ne le sont parfois pas, et que si trop d'images figurent sur une seule ligne sans aucun <br> celles-ci peuvent être séparées « de force » et de manière particulièrement désordonnée sur les appareils mobiles... Pour cela, il est possible d'ajouter un .no-wrap { white-space: nowrap; } dans un des fichiers CSS de la page, ou directement dans la déclaration <style>...</style> de celle-ci, puis de grouper les miniatures ne devant pas être séparées dans un bloc <span class="no-wrap">...</span>.

Quelques alternatives



Voyons maintenant quelques petites améliorations possibles, ou d'autres manières de procéder pouvant s'avérer nécessaires.


Dans l'idée d'avoir un code HTML bien propre, le mieux est de définir les fonctions JS dans un fichier séparé. Supposons que l'on souhaite procéder ainsi et appelons-le mes-fonctions.js par exemple.

Dans ce fichier, le code JavaScript peut directement être écrit sans en-tête ou balise. Ensuite il peut être intégré aux fichiers HTML comme ceci :
<html>
  <head>
    ... Déclarations de l'en-tête HTML ...
    <script src="mes-fonctions.js"></script>
    ... En-tête HTML, suite ...
  </head>
  </script>
  <body>
    ... HTML statique ...
    <script type="text/javascript">
      // Appel d'une fonction de mes-fonctions.js
      Fonction_1(parametre_1);
    </script>
    ... HTML statique, suite ...
  </body>
</html>
Autant de fichiers .js que nécessaire peuvent être ajoutés, il suffit simplement de les déclarer à la suite :
<script src="citation-aleatoire.js"></script>
<script src="images-aleatoires.js"></script>
....
Au cas où ces fichiers ne seraient pas logés dans le même répertoire que le fichier .html, des chemins relatifs ou absolus peuvent être employés.


On a vu précédemment qu'avoir des fichiers numérotés permet d'écrire une fonction JS concise. Cependant, si les fichiers ne peuvent être renommés et qu'il n'est pas non plus possible d'utiliser l'astuce des liens symboliques, il y a un contournement possible : définir des tableaux de la taille appropriée qu'on remplira avec les noms de fichiers, au sein même de la fonction.
function Images_Aleatoires(display_images, joined_images) {

  var total_images = 4;
  var pictures_repo = new Array(total_images);
  var thumbnails_repo = new Array(total_images);

  pictures_repo[0] = "paysage_argentine_2012_1.png";
  pictures_repo[1] = "oiseaux_australie_2015_4.png";
  pictures_repo[2] = "jolies_filles_norvege_2020_3.png";
  pictures_repo[3] = "felins_sauvages_afrique_du_sud_2024_2.png";

  thumbnails_repo[0] = "argentine_1-tn.png";
  thumbnails_repo[1] = "australie_4-tn.png";
  thumbnails_repo[2] = "filles_3-tn.png";
  thumbnails_repo[3] = "felins_2-tn.png";

  // Le code continue comme précédemment à partir de là

  ...

}
A noter que l'argument d'appel total_images de la fonction a été remplacé par la définition d'une variable dans le code de celle-ci, puisque ce sont désormais les tableaux de noms de fichiers qui définissent statiquement quelles doivent être les images que le script peut afficher.

La ligne document.write de la boucle principale devient alors :
document.write("<a href=\"/images/gallery/" + pictures_repo[images_index[p]] + "\"><img width=\"256\" height=\"144\" border=\"0\" src=\"/images/thumbnails/" + thumbnails_repo[images_index[p]] + "\"></a>");
Ce script adapté est plus ou moins une combinaison du code utilisé plus tôt pour les citations aléatoires, avec celui qui permet d'afficher des images.


En plus d'afficher aléatoirement des images, il peut être parfois intéressant de les classer. Cela peut par exemple permettre de garantir que les images similaires seront affichées côte à côte ou l'inverse, suivant la manière dont le dépôt d'images a été numéroté (ou rangé dans un tableau). Cela peut être accompli avec très peu de changements.

Tout d'abord, on définit un nouveau tableau nommé init_index qui sera celui rempli de nombres choisis aléatoirement. Par suite, on trie ces nombres par ordre croissant en les transférant dans le tableau final nommé images_index comme précédemment, et utilisé lui pour générer le HTML.

Cette opération de tri ne nécessite l'ajout que d'une seule ligne de code supplémentaire :
var images_index = init_index.sort(function (a, b) { return a - b; });
Le reste du script sera strictement identique.

Le script final  –  Cliquez pour afficher
<script type="text/javascript">

    function Images_Aleatoires_Triees(total_images, display_images, joined_images) {

        var init_index = [];

        // Etape 1
        for (let k = 0; k < display_images; k++) {
            let a = true, n;

            while(a) {
                n = Math.floor(Math.random() * total_images + 1);
                a = init_index.includes(n);
            }

            init_index.push(n);
        }

        // Etape 1 bis
        var images_index = init_index.sort(function (a, b) { return a - b; });

        // Etape 2
        for (let p = 0; p < display_images; p++) {
            document.write("<a href=\"images/rev40/main-matrix-" + images_index[p] + "-big.png\" target=\"_blank\"><img width=\"256\" height=\"144\" border=\"0\" title=\"Mascotte dans la Matrice - n° " + images_index[p] + "\" src=\"images/rev40/main-matrix-" + images_index[p] + ".jpg\"></a>");

            if (((p + 1) % joined_images) == 0) {
                document.write("<br>");
            } else {
                document.write("&nbsp;");
            }

        }

        // Le grand final
        document.write("<br><i>Cliquez sur une miniature pour ouvrir l'image en grand !</i>");

    }

Vous pouvez copier ce script directement depuis cette page, ou bien le télécharger avec aussi tous ceux vus précédemment.

Un petit exemple d'appel avec Random_Sorted_Images(16,6,3) :




Si vous examinez les liens vers chacune de ces images, vous constaterez que leur numéro d'ordre augmente sur chaque ligne, de gauche à droite.
Télécharger les scripts montrés sur cette page

J'ai préparé un petit fichier ZIP pour ceux qui veulent essayer rapidement !
⋙ Les scripts JS de TheRaphit - Afficher du contenu aléatoire
Ils sont quasi-prêts à l'emploi - tout ce que vous aurez à faire, c'est changer les citations ou les chemins vers vos images sur la ligne document.write dans le code.
La Revue de TheRaphit.com

[Compteur]
Nombre de visiteurs
depuis le 13 mai 1997.

[Accueil] [C'est quoi ?]
TheRaphit's Web Site - La dernière homepage du Web


[(Tout)2 Evangelion] Webzine : La Revue [Manga Pink Zone] [Mathématiques]

[Nouveautés] [Téléchargements] [FAQ illustrée]


Site créé le 16 janvier 1997
©1997-2026 by TheRaphit
www.theraphit.com