Images aléatoires (ou rotateur d'image)

Edit Responsable (Onyx) : Le sujet étant devenu désuet, l'astuce a été remplacée par celle sur les bannières de Margii et adaptée pour fonctionne pour n'importe quelle image.

---

Salut !

Il y eu des demandes pour un rotateur d'images , c'est à dire une insertion d'image qui change à chaque fois que la page est actualisée. Cette astuce est pour vous permettre d'atteindre ce résultat.

Étape 1

Allez où vous voulez mettre votre image aléatoire et mettez-là comme cela :

Code:

<img src="url de image de base" alt="description de l'image" id="IDIMAGE" />

url de image de base = L'url de l'image de base de votre image.
description de l'image = Description de l'image pour les personnes avec handicaps visuels.
IDIMAGE = Id de l'image qui va servir à sélectionner l'image dans le javascript.

C'est tout pour cette étape ~

Étape 2

Rendez-vous dans la gestion des javascripts :
(Panneau Administration > Modules > Gestion des javascripts)

Assurez-vous d'avoir activé vos javascript.

Créez un nouveau javascript et mettez-y un titre comme 'Image aléatoire'. Choisissez le placement "Sur toutes les pages".

Ensuite collez-y ce code :

Code:

$(function(){

  var image_aleatoire = new Array();

  image_aleatoire[0] = 'URL IMAGE 1';
  image_aleatoire[1] = 'URL IMAGE 2';


  var random = image_aleatoire[Math.floor(Math.random()*image_aleatoire.length)];

  $('#IDIMAGE').attr('src', random);
});

L'url de l'image de "image_aleatoire" 0 devra être celle de votre première image.
Quant à l'url de l'image de "image_aleatoire" 1, elle devra être votre deuxième image.
Personnellement je vous conseille de faire des images de la même taille.
Le IDIMAGE est à remplacer par l'id de l'image que vous avez installée sur votre forum/site.

Vous pouvez bien sûr rajouter des images, il vous suffit de copier ce code :

Code:

image_aleatoire[chiffre] = 'URL IMAGE';

Et de le placer en-dessous de "image_aleatoire" 1.

N'oubliez surtout pas de modifier le chiffre, si deux images ont le même chiffre entre crochets ça risquerai de ne pas marcher.
Vous pouvez bien entendu placer autant d'images que vous voulez
Enregistrez votre javascript et ce sera bon !

Enjoy!

Excellent, merci beaucoup.
Un code vraiment tout ce qu'il y a de plus simple, compréhensible par tous le pense.
Petite précision, logique, mais je préfère...
Le dernier code se met bien entendu à l'endroit où vous souhaitez placer votre (vos) bannière.

Je pense que d'ici peu je ferais un script pour faire tourner l'affichage en fonction des heures... pas mal pour un RPG je pense

(je préfère vous en fournir un en php, qu'en javascript pour le moment).

Il est possible d'utiliser ce script sur les forums de type Forum Actif, enfin je pense...
L'idée serait de concevoir une page script.php contenant le code que nous fourni notre ami Soulmate.
Ensuite dans le template overall_header_new il suffirait de placer une iframe appelant notre script :

Code:

<iframe src="script.php" width="LARGEUR" height="HAUTEUR" frameborder="0" ></iframe>

Balise à placer à l'endroit où vous voulez mettre votre bannière

Pour plus d'info sur l'iframe : info iframe

J'ai pas essayé encore, mais ça doit être faisable je pense.

Bises.

de rien ..
je me souviens que le iframe est une balise qui marche seulement sur IE (faites par microsoft) .. je sais pas si son utilisation s'est étendu ..
si c'est le cas , ça serai vraiment génial ...

pour un rotateur selon l'heure .. je vais voir ce que je peux faire , ça serai excellent pour un RPG bien entendu ..

Bonjour!

L'astuce a été remplacé par celle de Margii qui est moins lourde et plus facile à mettre en place.