code pour actualiser une image....

Eléphanteau du PHP | 19 Messages

13 août 2009, 21:42

bon voici les resultats, le code fonctionne, sauf qu'au chargement de la page, rien ne s'affiche, il faut cliquer sur "rafraichir" pour pouvoir afficher les photos..... c'est bizar ça non ?
voici le code pour le moment :

<head>
<script type="text/javascript">
function change_image(image_id, image_dossier, image_nombre) {
if (this.conteneur = document.getElementById(image_id))
   {
      var photo = image_dossier+'/'+parseInt(Math.random()*image_nombre)+'.jpg';
      this.conteneur.src = photo;
   }
}
</script>
</HEAD>

<body onload="change_image('image_content_1,'photo/gds',128);change_im('image_content_2','photo2/gds',301)">


<div>
<p><img id="image_content_1" src="" alt="" /></p>
<input type="button" onclick="change_image('image_content_1','photo/gds',128);" value = "rafraichir" />
</div>
<div>
<p><img id="image_content_2" src="" alt="" /></p>
<input type="button" onclick="change_image('image_content_2','photo2/gds',301);" value = "rafraichir" />
</div>

n'y a t il pas un moyen de forcer l'affichage ?

Eléphant du PHP | 224 Messages

14 août 2009, 01:40

Salut :)
mais tu sais, ce n'est pas grave non plus si je n'ai pas un code fonctionnel.... il n'y a pas mort d'homme...
C'est bien de relativiser les choses, c'est vrai que dans l'absolu, avoir un code qui ne fonctionne pas, ce n'est pas grave... ceci étant, face à la mort, beaucoup de choses ne sont plus trop graves... même des choses infiniment plus importantes qu'un bout de code...
bon voici les resultats, le code fonctionne, sauf qu'au chargement de la page
[...]
n'y a t il pas un moyen de forcer l'affichage ?
Bon, allez, puisque tu a repris un des derniers code que je t'ai proposé, et comme il comportait quelques bugs, voici la version débeuguée (j'espère qu'il n'en reste plus), en fait, c'est bien le rôle du "onload", qui se trouve dans la balise "body", de lancer la fonction lors du chargement de la page, et c'est bien là qu'il y avait deux petits bugs.

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN"> <html> <head> <title></title> <script type="text/javascript"> function change_image(image_id, image_dossier, image_nombre) { if (this.conteneur = document.getElementById(image_id)) { this.conteneur.src = image_dossier+parseInt(Math.random()*image_nombre)+'.jpg'; } } </script> </head> <body onload="change_image('image_content_1','photo/gds/',128); change_image('image_content_2','photo2/gds/',301);"> <div> <p><img id="image_content_1" src="" alt="" /></p> <input type="button" onclick="change_image('image_content_1','photo/gds/',128);" value = "rafraichir" /> </div> <div> <p><img id="image_content_2" src="" alt="" /></p> <input type="button" onclick="change_image('image_content_2','photo2/gds/',301);" value = "rafraichir" /> </div> </body> </html>
Donc, il manquait une apostrophe dans le premier appel de fonction du "onload" du "body", et le nom de la fonction dans le second appel était erroné.

J'en ai profité pour simplifier un peu le code de la fonction, et j'ai aussi modifié un peu l'argument du dossier source, il faut désormais passer le chemin en entier, c'est à dire jusqu'au slash final "/".

Voilà... ça devrait marcher (j'espère ;) )

PS. Au fait, toujours aucune trace de ton lien sur l'image... bizarre non ? 8-|
Fredo d;o)
"Un pas à la fois me suffit..." (Gandhi)

ViPHP
AB
ViPHP | 5818 Messages

14 août 2009, 16:14

bon voici les resultats, le code fonctionne, sauf qu'au chargement de la page, rien ne s'affiche, il faut cliquer sur "rafraichir" pour pouvoir afficher les photos..... c'est bizar ça non ?
voici le code pour le moment :

<head>
<script type="text/javascript">
function change_image(image_id, image_dossier, image_nombre) {
if (this.conteneur = document.getElementById(image_id))
   {
      var photo = image_dossier+'/'+parseInt(Math.random()*image_nombre)+'.jpg';
      this.conteneur.src = photo;
   }
}
</script>
</HEAD>

<body onload="change_image('image_content_1,'photo/gds',128);change_im('image_content_2','photo2/gds',301)">


<div>
<p><img id="image_content_1" src="" alt="" /></p>
<input type="button" onclick="change_image('image_content_1','photo/gds',128);" value = "rafraichir" />
</div>
<div>
<p><img id="image_content_2" src="" alt="" /></p>
<input type="button" onclick="change_image('image_content_2','photo2/gds',301);" value = "rafraichir" />
</div>

n'y a t il pas un moyen de forcer l'affichage ?
C'est pas une histoire de forcer, mais histoire de ne pas faire d'erreur de syntaxe.
Il y en avait une petite puisqu'il manquait une quote ' dans l'appel des fonctions de la balise body comme l'a dit FredoMkb

Encore une fois tu aurais pû trouver ça en réfléchissant un peu puisque tu avais remarqué que le code fonctionnait quand on appuyait sur les boutons rafraichir.
Or les fonctions et les paramètres des fonctions sont dans ton cas exactement les mêmes qu'on les appellent depuis l'évènement onclick sur le bouton rafraichir ou depuis l'événement onload (au chargement de la page) puisque dans les deux cas tu souhaites le même comportement.

Donc si tu compare les deux lignes
1/

Code : Tout sélectionner

<body onload="change_image('image_content_1,'photo/gds',128);change_im('image_content_2','photo2/gds',301)">
et
2/

Code : Tout sélectionner

<input type="button" onclick="change_image('image_content_1','photo/gds',128);" value = "rafraichir" />
tu remarque que dans la première ligne qui ne fonctionne pas il manque un ' après image_content_1 par rapport à la deuxième ligne qui elle fonctionne.
C'est tout !

Eléphant du PHP | 369 Messages

14 août 2009, 17:07

Salut,

Pourquoi ne pas utiliser le principe des rowl en contexte CSS ?
Ca t'oblige à charger toutes les iimages d'un coup et de les positionner dans la page
de façon BG mais... pourquoi pas ;)

Code : Tout sélectionner

<html...> <head> <style type="text/css"> .image { display:block; width:50px; height:50px; } #image_01 { visibility:hidden; background-url(./img/image_01.png) no-repeat left top; } #image_02 { visibility:hidden; background-url(./img/image_01.png) no-repeat left top; } [...] </style> </head> [...] <p id=\"#image_01\" class=\"image\"></p> <p id=\"#image_02\" class=\"image\"></p> <p id=\"#image_03\" class=\"image\"></p> <p id=\"#image_04\" class=\"image\"></p> [...] </html>
Tu fais une fonction swap: (pas le temps de la développer dsl)

Code : Tout sélectionner

function swap(numero) { document.getElementById("image"+numero)... }
En même temps c'est pas tout à fait ce que tu cherches mais ca reste une piste (différente)
mais possible, bon code @+ ;)

PS: Pas trop le temps d'argumenter ni vérifier bien que le principe soit juste
il est possible que des erreurs soient présentes.

ViPHP
AB
ViPHP | 5818 Messages

14 août 2009, 17:29

Salut,

Pourquoi ne pas utiliser le principe des rowl en contexte CSS ?
Ca t'oblige à charger toutes les iimages d'un coup et de les positionner dans la page
de façon BG mais... pourquoi pas ;)
ça peut s'envisager quand on a quelques images... là il en a plus de 400, si c'est des images de taille moyenne qui font dans les 50 Ko le chargement de la page demanderait 20 000 Ko soit environ 20 Mo :twisted:
Donc ce n'est pas du tout adapté, mais alors vraiment pas !

Eléphant du PHP | 369 Messages

14 août 2009, 17:44

Salut,
ça peut s'envisager quand on a quelques images... là il en a plus de 400,
si c'est des images de taille moyenne qui font dans les 50 Ko le chargement de
la page demanderait 20 000 Ko soit environ 20 Mo :twisted:
Donc ce n'est pas du tout adapté, mais alors vraiment pas !
Pas trop fait gaffe au random mais celui-ci (à relecture alterne entre 95 et +)
et pas de mention de la capacité des images... Mais bah, vacances faisant
tu m'excuseras d'avoir loupé l'info.

Effectivement ma soluce est totalement inadaptée dans le cadre d'un haut
taux d'images/Capacité c'est une évidence lol

j'y re go, @+ bon code ;)

ViPHP
AB
ViPHP | 5818 Messages

14 août 2009, 19:16

@FuZZyLine

Oui j'ai répondu de manière pas tout à fait diplomatique mais ça fait des plombe que l'on essaie d'expliquer comment faire fonctionner une toute petite fonction...
Alors avant de passer à autre chose (qui plus est n'était pas adapté à son cas), j'aimerais bien que chrismim ait compris cette première étape et nous poste un "resolu" avant la fin de l'été :wink:

Eléphant du PHP | 369 Messages

14 août 2009, 20:03

@FuZZyLine
Oui j'ai répondu de manière pas tout à fait diplomatique mais ça fait des plombe que l'on essaie d'expliquer comment faire fonctionner une toute petite fonction...
Euh, vi j'ai vu lol mais j'y suis pour rien en même temps.
Alors avant de passer à autre chose (qui plus est n'était pas adapté à son cas), j'aimerais bien que chrismim ait compris cette première étape et nous poste un "resolu" avant la fin de l'été :wink:
Ca aurait put l'être vu le peu d'infos données, de base... Ou comme je l'ai dis je suis passé à côté.
Dans tous les cas c'est pas bien grave il me semble.

@+ ;)

ViPHP
AB
ViPHP | 5818 Messages

14 août 2009, 20:14

Non y'a pas de soucis :wink:
Je sais simplement que la totalité de ses deux répertoires font plus de 400 photos, puisque c'est le nombre qu'il passe dans le dernier argument de sa fonction. Et dans le dernier code que j'ai cité de l'auteur, il y avait :

Code : Tout sélectionner

<body onload="change_image('image_content_1','photo/gds',128);change_im('image_content_2','photo2/gds',301)">
Donc deux répertoires de respectivement 128 et 301 photos :)