Trucsweb.com

Trucsweb.com

Javascript

Les images

RDFFav

Images aléatoires - Avec la commande RANDOM

L’image aléatoire est une image différente à chaque fois que la page est chargée. Plus vous avez d’image et plus vous avez de chance de ne jamais voir la même. La commande RANDOM permet de donner un nombre aléatoire. Alors imaginer si vos images porte des noms tel : 1.gif, 2.gif, 3.gif etc. Ou même image1.gif, image2.gif, image3.gif etcimages javascript aléatoire alléatoires rotation random Math.round Math.random document.write fonction go window.location pub bannières hazardImages aléatoires - Avec la commande RANDOM

  • · Niveau : DÉBUTANT
  • · Compatibilité : Navigateur version 3+

L’image aléatoire est une image différente à chaque fois que la page est chargée. Plus vous avez d’image et plus vous avez de chance de ne jamais voir la même. La commande RANDOM permet de donner un nombre aléatoire. Alors imaginer si vos images porte des noms tel : 1.gif, 2.gif, 3.gif etc. Ou même image1.gif, image2.gif, image3.gif etc. Alors la seule restriction consiste à donner un chiffre à vos images et de vous assurer qu’ils sont bien entre un nombre x et y. C’est à dire entre 1 et 100 ou 50 et 75 mais qu’il existe bien des images pour chaque numéro entre x et y. De plus, pour ne pas vous compliquer la tâche (car c’est possible d’avoir plusieurs formats en ajoutant un test) l’extension doit toujours la même soit GIF ou JPG. Par contre vous pouvez utiliser des images aux dimensions différentes. Tout vient de cette commande :

Math.round((Math.random()*9)+1)

Cette commande retourne un nombre intègre ;-) de 1 à 10. En changeant le "9" vous changez le nombre d’images aléatoire, TOUJOURS 1 DE MOINS QUE LE NOMBRE TOTAL D’IMAGES. Vous ajoutez l’extension GIF ou JPG et affichez une image aléatoire avec la commande WRITE. Cet exemple n’est pas optimisé puisqu’il n’y a pas les dimensions de l’image, c’est vrai. On peut l’ajouter mais en ne l’ajoutant pas, le privilège d’utiliser des images de dimensions différentes s’offre en prime.

<script type="text/javascript" language="javascript">
    document.write('<img src="images/'+ Math.round((Math.random()*9)+1)+ '.gif" />');
</script>

Vous devez avoir, dans le répertoire IMAGES, 10 images 1.gif, 2.gif... ...10.gif. Insérez ce code n’importe où dans votre page sans problème pour obtenir une des dix images. Si vos images ont un nom:

image1.gif, image2.gif etc.
<img src="images/image'+ Math.round((Math.random()*9)+1)+ '.gif" />');

ou
1image.gif, 2image.gif etc.
<img src="images/'+ Math.round((Math.random()*9)+1)+ 'image.gif" />');

Maintenant pour ajouter un lien vous n’avez qu’à placer ce code entre les balises traditionnels A HREF et /A le tour est joué.

document.write('<a href="http://votrelien.com">');
document.write('<img src="images/'+ Math.round((Math.random()*9)+1)+ '.gif" />'’);
document.write('</a >');

Placer le script directement à l’endroit dans votre code HTML où vous désirez voir l’image apparaître.

IMAGES ALÉATOIRES AVEC LIENS MULTIPLES

Voilà, nous allons ajouter au script de l’image aléatoire un lien associé à chacune des images. Avant tout nous allons créer une fonction très pratique pour plusieurs applications. Non seulement cette fonction est pratique mais contrairement à toutes attentes elle est compatible, chose assez rare, avec Internet Explorer 3.0. La fonction GO à insérer dans le HEAD de votre document:

<script type="text/javascript" language="javascript">
function go(a)
{
  if (a=="1"){window.location="http://www.aaa.net"}
  if (a=="2"){window.location="http://www.bbb.net"}
  if (a=="3"){window.location="http://www.ccc.net"}
}
</script>

En passant à cette commande le chiffre "2", comme ceci : go(2); Vous changer le contenue de la page courante par celui de l’adresse indiquée dans la fonction. C’est pas compliqué et ça va nous servir souvent. Donc si nous reprenons le script de l’image aléatoire. Au lieu de générer un chiffre aléatoire directement dans la balise de l’image nous allons générer ce chiffre dans une variable "a" avec la fonction PUB que vous devez placer dans le HEAD.

<script type="text/javascript" language="javascript">
function pub() {
  a = Math.round((Math.random()*2)+1);
  document.write('<a href="javascript:go(a)" >');
  document.write('<img src="image'+ a+ '.gif" width="86" height="60" border="0" />');
  document.write('</a>');
}
</script>

Voyez que je me sers de la variable "a" qui a une valeur entre 1 et 3 pour générer le code qui affichera l’image imagea.gif ou image1.gif ou image2.gif ou image3.gif. Et le lien est tout simplement dirigé par la fonction GO selon la valeur de "a".

Pour que ce code fonctionne, vous devez avoir 3 images qui ont comme nom physique image1.gif etc (vous pouvez utiliser des image .JPG... et attribuer un lien a chaque image selon le numéro dans la fonction GO. Vous pouvez avoir le nombre d’images que vous voulez et de grandeur variée (en retirant du code le WIDTH et le HEIGHT) mais je vous conseil d’utiliser des images aux dimensions identiques pour optimiser la vitesse de chargement de la page. Il ne vous reste qu’à insérer ce code dans le BODY de votre document où vous désirez voir l’image.

<script type="text/javascript" language="javascript">pub();</script>

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

  • dsl ça ne semble pas marcher pour moi. <script> ... </script> peut être n'importe où dans le corps ? faut-il à la fois le script et l'appel à l'image à l'endroit voulu ? sincèrement daniel
    64x64
    Daniel
    Date (GMT) : 2017-05-23 8:43:41 (UTC +0000)
    • Salut, Pourvu que la fonction soit déclarée avant l'appel. Contrairement aux langages serveur, le JavaScript ne peut appeler une fonction si elle n'a pas encore déclaré. De haut en bas. Google conseille de placer le JavaScript en bas de page, ce qui est une bonne idée pour accélérer le chargement (sans plus)! Mais dans ce cas précis, il n'y a aucune dépendance. Tu peux placer la fonction pub() suivie de l'appel de la fonction à l'endroit même où vous désirez afficher les images. C'est plus simple. ATTENTION : C'est un vieux script et à l'époque on changeait les apostrophes pour la sécurité. C'est probablement le problème. Je viens d'ajusté le code, vous pouvez le copier intégralement sans vous préoccuper des l'apostrophe.
      64x64
      oznog
      Date (GMT) : 2017-05-23 11:18:33 (UTC +0000)


    • Super script que j'utilise désormais sur mon site pour changer mes bannières pubs aléatoirement. J'utilise donc le script pour les images aléatoires avec liens multiples. Je me demandais comment faire pour que ces liens s'ouvrent dans une page différente (en gros, comment intégrer target="_blank" dans le script) Merci
      64x64
      PersonalMode
      Date (GMT) : 2023-04-15 13:09:27 (UTC +0000)
      Date local : Sat Apr 15 2023 15:09:31 GMT+0200 (heure d’été d’E
      • Ouf, un script qui a presque un quart de siècle ;- ) Utilise « window.open » au lieu de « window.location ». <script> function go(a) { switch(a) { case 1: window.open(http://votrelien.com); break; case 2: window.open(http://votrelien.com); break; default: window.open(http://votrelien.com); } } </script>
        64x64
        oznog
        Date (GMT) : 2023-04-15 13:27:31 (UTC +0000)
        Date local : Sat Apr 15 2023 09:27:33 GMT-0400 (heure avancée d


      Ajouter un commentaire
      Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
      Votre évaluation du tutoriel

      9/10 sur 1 revues.
             Visites : 33196 - Pages vues : 57140
      X

      Trucsweb.com Connexion

      Connexion

      X

      Trucsweb.com Mot de passe perdu

      Connexion

      X

      Trucsweb.com Conditions générales

      Conditions

      Responsabilité

      La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

      Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

      Droit applicable et juridiction compétente

      Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Glossaire

      X

      Trucsweb.com Trucsweb

      X

      Trucsweb.com Trucsweb

      Conditions

      Aucun message!

      Merci.

      X
      Aucun message!
      X

      Trucsweb.com Créer un compte

      Créer un compte

      .
      @