[RÉGLÉ] Image dynamique

[raph_egg]

Bonjour,

je souhaiterais, pour un div, que l'image affichée se fasse de manière aléatoire, je possède dans un dossier plusieurs images :

picture_1.jpg
picture_2.jpg
picture_3.jpg

Le div dans index.php :

<div id="picture"></div>

le style associé dans template.css :

#picture {
  z-index: 4;
  position:absolute;
  width:200px;
  height:720px;
background:url(../images/picture_1.jpg) no-repeat black;
}

A quel endroit ajouter une fonction de type "random" ?

Merci d'avance

[ndsaerith]

Re : Image dynamique

Salut,

Je pense qu'il faudra utiliser du javascript pour ça.

Mais si c'est pour un template, tu peux aussi ne rien faire et juste ajouter une position et plus tard y ajouter un module, il en existe plein pour faire défiler des images.

@++

[raph_egg]

Re : Image dynamique

Salut,

Je pense qu'il faudra utiliser du javascript pour ça.

Mais si c'est pour un template, tu peux aussi ne rien faire et juste ajouter une position et plus tard y ajouter un module, il en existe plein pour faire défiler des images.

@++

Je pencherais plutót pour la variante javascript. Mais comment faire pour arriver au final ? (nom du fichier)

<script type="text/javascript">
 var num =  Math.random();
</script>

mais finalement je dois concaténer le résultat au nom de la variable pour obtenir qqch du genre

picture_1.jpg

[Grand Schtroumpf]

Re : Image dynamique

Bonjour,
le module mod_random_image fait déjà ça ; ça serait peut êtr eplus simple d'insérer une position dans ta div.

[ndsaerith]

Re : Image dynamique

Je suis complètement d'accord avec Grand Schtroumpf

Mais si vraiment tu veux le faire en code, tu peux chercher sur l'éditeur javascript (cf google) pour trouver ton bonheur.

[raph_egg]

Re : Image dynamique

Bonjour,
le module mod_random_image fait déjà ça ; ça serait peut êtr eplus simple d'insérer une position dans ta div.

Merci grand schtroumpf.

Entre-temps j'ai trouvé une astuce :

index.php - ajout du code suivant

  <!--
  script de génération d'un nombre alétoire. Ce nombre est repris pour charger un div "picture" différents.
  dans la feuille de style associée il fait référence à une image différente
  -->
  <script type="text/javascript">
    var num = Math.floor(Math.random()*10);
    var nomFichier ="picture_"+num+".jpg";
    var commande ="<div id=\"picture_"+num+"\"></div>";
    document.write(commande);
  </script>

génération aléatoire d'un nombre entier de 1 à 10, concaténation au nom du fichier de manière à obtenir un nom complet, ex. picture_7.jpg

template.css - création des styles : picture_1 à picture_10 avec le code suivant (ex. pour picture_1, le nombre doit être à chaque fois modifié) :

#picture_1 {
  /*border: 1px solid red;*/
  z-index: 4;
  position:absolute;
  width:200px;
  height:720px;
background:url(../images/picture_1.jpg) no-repeat black;
}

Donc selon le nom généré il se réfère au style correspondant.

Je sais, pas du tout optimal mais ça fonctionne.

Je vais quand même voir le module cité par le grand schtroumpf. Puis je mangerai un bon plat de salsepareille.

Merci

[Grand Schtroumpf]

Re : Image dynamique

Re,
[HS]hum... c'est bon la salsepareille ![/HS]