Rechercher : dans
Par :

Ajax, image aléatoire

Dernière réponse le 12 mai 2009 à 15:40:38 sasha35, le 29 avr 2009 à 16:34:21 
 Signaler ce message aux modérateurs

Bonjour, je suis en train de faire une fonction qui aura pour but de modifier le un div, pour qu'une image se place dedans, et rafraichisse cette zone toute les 5s(temps approximatif) pour modifier l'image.
L'image peut aller dans le div soit en tant qu'image soit en tant que background-image.
Donc une fois la page charger un compteur serait lancer et toute les 5s le div serait rafraichie.

Voici la partie du fichier index.php qui fait appelle au fichier javascript:
<head>
<script src="templates/templatedebibi/comportement1.js" type="text/javascript"></script>
</head>
<body id="page_bg">
<div id="header">
<div id="header_img"> <!--div à modifier header_img-->
</div>
</div>
</body>

Voici mon javascript:
window.onload = init;
function init() {
new Ajax.Request('traitement.php',{onComplete:affichePhoto;})
}

function affichePhoto(requete) {
var txt = requete.responseText;
document.getElementById('header_img').background-image=txt;
}

Et voici le fichier php qui en fonction de la date(saison) modifie une variable qui détermine le répertoire à utiliser pour choisir une image au hasard dedans et l'afficher:

<?php
$chemin=JPATH_SITE; //chemin de mon site en local joomla
$date = date("md");
$select="0"; //varible qui détermine le répertoire à utiliser
if(($date>="0320") && ($date<"0922"))
{
if(($date>="0320") && ($date<"0621"))
{
$select="0"; //nous somme au printemp
}
else
{
$select="1"; //nous somme en été
}
}
else
{
if(($date>="0922") && ($date<"1221"))
{
$select="2"; //nous somme en automne
}
else
{
$select="3"; //nous somme en hiver
}
}

$dossiers = array("images".DS."printemp", "images".DS."ete", "images".DS."automne", "images".DS."hiver" );
$rdossier = $dossiers[$select]; // selectionne un dossier
$rep = $rdossier.DS;
$listfile = array(); // créer un array vide pour y mettre tous les fichiers

$dir = opendir($chemin.DS.$rep); //ouvres le dossier
while ($f = readdir($dir)) //fais une boucle des fichier du dossier
{
if(is_file($rep.$f) && $f != '.' && $f != '..') //si le fichier existe
{
$ext = substr($rep.$f,-3); // recuperation de l'extension du fichier
if($ext == 'jpg' || $ext == 'JPG' || $ext == 'png' || $ext == 'PNG' || $ext == 'gif' || $ext == 'GIF' || $ext == 'bmp' || $ext == 'BMP')
// c'est bien une img
{
$listfile[] = $f; // ajout du fichier dans l'array listfille

}
}
}
closedir($dir); //ferme le dossier
$nbfichier = count($listfile); //comptes le nbr de fichier
$randfichier = rand(0,($nbfichier-1)); // random de 0 au nombre de fichier
$rfichier = $listfile[$randfichier]; //selectionne un fichier au hasard
var_dump($listfile);
$affich=$chemin.$rep.$rfichier;
//echo($affich);
?>

Configuration: Windows Vista
Firefox 3.0.10

Meilleures réponses pour « Ajax, image aléatoire » dans :
[Gravure] Graver une image disque (ISO, NRG, ...) Voir1 - Définition de l'image ISO 2 - Recommandation 3 - Comment procéder ? 3.1 - Nero 3.2 - K3B 3.3 - BurnAtOnce 3.4 - BurnCDCC 3.5 - CDBurner XP Pro 3.6 - Deepburner 3.7 - Easy Media Creator 3.8 - Infrarecorder 4 -...
Création d'image Système (Ghost) VoirCréer une image (ghost) de partition 1 - Intérêt 2 - Pré-requis 2.1 - Explication 2.2 - Opportunités des partitions 2.3 - Mise à jour des images 2.3.1 - Image incrémentale : intéressant mais dangereux ! 2.3.2 - Image incrémentale et...
Rechercher des images de Noël : père Noël, traîneaux, sapin... VoirRechercher des images de Noël sur Internet Effectuer une recherche rapide d’images de Noël Effectuer une recherche avancée d’images de Noël Rechercher des images de Noël sur une banque d’images en ligne Rappel Rechercher des images de...
Télécharger Image Resizer VoirPetit utilitaire (PowerToy) basique, très simple, permettant de réduire la taille d'une image, dans le but, notamment, de l'envoyer par e-mail ou de la partager sur Internet (blog, site, album...). Pour plus d'informations: image resizer reduire la...
Télécharger FastStone Image Viewer VoirFastStone Image Viewer est un visualisateur d'images permettant de convertir et d'afficher la plupart des formats graphiques actuels, à commencer par les formats BMP, JPEG, JPEG 2000, GIF, PNG, PCX, TIFF, WMF, ICO et TGA. Il possède de nombreuses...
Fichier ISO (Image ISO) VoirFormat ISO Un fichier possédant l'extension .ISO est une image ISO, c'est-à-dire une image d'un disque (CD, DVD ou disque dur) sous forme de fichier, créer avec un logiciel de gravure. Comment lire un fichier ISO ? En l'absence de graveur, il...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...
LaTeX - Insertion d'images VoirStyle LaTeX permet d'insérer des images de différents formats. Le plus simple est d'insérer des fichiers de type eps (Encapsuled Postscript) : Il suffit d'insérer dans le préambule la ligne suivante : \usepackage{graphicx} Puis d'insérer...

1

sasha35, le 30 avr 2009 à 10:26:41

Petite correction à l'avant dernière ligne c'est echo($affich); et pas //echo($affich);

Répondre à sasha35

2

 sasha35, le 12 mai 2009 à 15:40:38

Bon, personne n'est venue mais j'ai fini par réussir grâce au gars du site du zéro.
Finalement tout est en javascript, mais on ne peut ajouter et retirer des images que si on modifie aussi un peu le code. Je ne vait pas fermer tout de suite le poste car j'ajouterais peut être une petite amélioration plus tard.
Pour ce que ça intéresse:
HTML:
<script src="templates/templatedebibi/traitement.js" type="text/javascript"></script>

Javascript:

window.onload = init;
function init() {
setTimeout ("image()", 1 );
}

function image() {
var date = new Date();
var mois = date.getMonth()+1;
var regexmois = /(\d{2})/;
if(regexmois.test(mois))
{
mois=mois;
}
else
{
mois="0"+mois;
}
var jour = date.getDate();
var regexjour = /(\d{2})/;
if(regexjour.test(jour))
{
jour=jour;
}
else
{
jour="0"+jour;
}
var aujourdui = mois+jour;
var select="0";
if((aujourdui >="0320") && (aujourdui<"0922"))
{
if((aujourdui>="0320") && (aujourdui<"0621"))
{//printemp
select="0";
}
else
{//été
select="1";
}
}
else
{
if((aujourdui>="0922") && (aujourdui<"1221"))
{//automne
select="2";
}
else
{//hiver
select="3";
}
}
//select="0";//sert à tester les saisons
var grille = new Array();
for(var i=0; i<5; i++){
grille[i] = new Array();
}
grille[0] = new Array("/images/printemp/arbre.jpg", "/images/printemp/photo1.jpg","/images/printemp/photo2.jpg","/images/printemp/photo3.jpg","/images/printemp/photo4.jpg");
grille[1] = new Array("/images/ete/fleur.jpg","/images/ete/photo5.jpg","/images/ete/photo6.jpg","/images/ete/photo7.jpg");
grille[2] = new Array("/images/automne/feuille.jpg","/images/automne/photo8.jpg","/images/automne/photo9.jpg","/images/automne/photo10.jpg");
grille[3] = new Array("/images/hiver/lac.jpg","/images/hiver/photo11.jpg","/images/hiver/photo12.jpg","/images/hiver/photo13.jpg");

var n = grille[select].length;
var nb = Math.floor((n)*Math.random());
var val = grille[select][nb];
document.getElementById('header_img').style.backgroundImage="url("+val+")";
setTimeout ("init()", 4999 );
}

Répondre à sasha35