Javascript

Les images

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 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>