Afficher des images sur une page web de manière aléatoire.

Afficher des images sur une page web de manière aléatoire. - HTML/CSS - Programmation

Marsh Posté le 01-06-2009 à 14:07:40    

Salut tout le monde !
 
Je ne suis plus programmeur depuis bien des années, je fais juste un peu de html à l'occasion, c'est tout.
 
J'ai un petit site, sur lequel j'affiche un alphabet qui sert de redirection dans la page pour accéder aux diverses catégories : c'est un portail / annuaire.
 
A chaque lettre de l'alphabet, correspond une image.
 
Pour l'instant, ce sont toujours les mêmes qui sont affichées, j'aurais voulu que d'après une liste d'images, à chaque affichage de la page ce soit une image différente qui apparaisse pour chacune des 26 lettres.
 
Savez-vous comment faire cela ? Quel langage utiliser ? Est-ce que avec du HTML c'est possible ou même du javascript ? Ou il faut passer à autre chose ?
 
Si vous pouviez m'aider ce serait sympa, parce que j'ai pas mal cherché et tout ce que j'ai trouvé est trop compliqué pour moi jusqu'à présent :)
 
Ou si vous pouviez me donner des sites où c'est bien expliqué :love:
 
:jap:
 
Merci.


---------------
Les Cartes Son Haute Fidélité pour mélomanes, musiciens, audiophiles, la MAO, le cinéma,...
Reply

Marsh Posté le 01-06-2009 à 14:07:40   

Reply

Marsh Posté le 01-06-2009 à 14:14:24    

Utilises un langage coté serveur (PHP par exemple) pour celà.
Si tes images sont dans une base de données, renvoies les avec une requete du style  

Code :
  1. select nomImage from Images where upper(nomImage) like 'A%'; // ou une autre lettre bien sur


 
Si c'est dans un dossier, regarde du coté de la fonction "glob" en PHP.
 
Sinon "random images script" sous google ;)


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 01-06-2009 à 14:41:17    

Merci de ta réponse rapide :)
 
pour l'instant j'ai trouvé ça :
 

Code :
  1. <html>
  2. <head>
  4. <?php
  5. $nbimages=4;
  6. $nomimages[1]="image1.jpg";
  7. $nomimages[2]="image2.jpg";
  8. $nomimages[3]="image3.jpg";
  9. $nomimages[4]="image4.jpg";
  10. srand((double)microtime()*1000000);
  11. $affimage=rand(1,$nbimages);
  12. ?>
  13. </head>
  14. <body>
  16. <img src="<?echo $nomimages[$affimage];?>" border=0 width=150 height=112 alt="Image aléatoire">
  18. </body>
  19. </html>


 
http://www.portail-guitare.net/test/index.htm
 
Ça ne marche pas... :o
 
Et ça non plus :??:
 
http://www.portail-guitare.net/test/index.php
 
http://www.portail-guitare.net/test/index.php3
 
 
edit : les images sont dans un dossier ;)


Message édité par Tous le 01-06-2009 à 14:43:16

---------------
Les Cartes Son Haute Fidélité pour mélomanes, musiciens, audiophiles, la MAO, le cinéma,...
Reply

Marsh Posté le 01-06-2009 à 15:03:10    

En fait mon hébergeur n'accepte pas le php -> réponse du commercial :
 

Citation :


Bonjour,
Les packs Web NOM+ et Web MAIL+ ne permettent pas l'utilisation de langages dynamiques ou d'exécuter des scripts côté serveur (php, ASP, CGI, etc....).
 
En effet votre pack est hébergé sur une plateforme statique supportant les langages de type statique (html, swf, etc.).
 
Pour l’utilisation de fichiers dynamiques, cela n'est faisable qu'à partir du  
pack Web PRO+ . Vous pouvez obtenir de plus amples informations auprès de notre service commercial.
 
Bonne continuation.
Cordialement,
 


 
 
Euh c'est spécifique à AMEN, ou tous les hébergeurs font ça pour les packs de base ?
 
:??:


---------------
Les Cartes Son Haute Fidélité pour mélomanes, musiciens, audiophiles, la MAO, le cinéma,...
Reply

Marsh Posté le 01-06-2009 à 15:17:31    

Donc, pour en revenir à ma question, existe-t-il un moyen de faire ça en html ou javascript ??? Ou un autre truc statique ??? Ou changer d'hébergeur... Mais je ne sais pas trop où me renseigner :(


---------------
Les Cartes Son Haute Fidélité pour mélomanes, musiciens, audiophiles, la MAO, le cinéma,...
Reply

Marsh Posté le 01-06-2009 à 15:23:56    

Je ne sais pas si c'est spécifique, mais de nos jours ne pas proposer au moins du PHP (qui est gratuit) est un peu dommage.
 
En attendant tu peux faire ca du coté client, c'est à dire en JavaScriipt, mais c'est un peu plus long et complexe, et ca necessite certains minimas :
 
1) tu dois avoir un dossier contenant tes images, et elles doivent être nommées de facon logiques. Ce n'est pas 100% obligatoire, mais pour la simplicité du script c'est uen bonne base. Disons donc que tes images sont dans le dossier images/ et qu'elles se nomment ttes imageX.jpg (le respect des majuscule/minucule est important et X variant de 1 à 9 par exemple, càd image1.jpg, image2.jpg, etc...).
 
2) dans ton code HTML, à l'endroit où tu veux placer l'image aléatoire, tu spécifies :

Code :
  1. <img id="randomPic" src="" width=0 height=0 />


 
3) ensuite tu rajoutes dans ton code HTML, entre les balises HEAD :

Code :
  1. window.onload = function ()
  2. {
  3.     var rnd = parseInt (Math.random () * 9) + 1;
  4.  
  5.     var img = new Image ();
  6.     img.src = "/images/image" + rnd + ".jpg";
  7.     img.onload = function ()
  8.         {
  9.             var randomPic = document.getElementById ('randomPic');
  10.             if (!randomPic)
  11.                 return false;
  12.             randomPic.src = img.src;
  13.             randomPic.width = img.width;
  14.             randomPic.height = img.height;
  15.             return true;
  16.         }
  17.     return true;
  18. }


 
Je n'ai pas testé, mais ca devrait le faire je pense :)


Message édité par SICKofitALL le 01-06-2009 à 15:24:30

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 01-06-2009 à 15:41:21    

J'ai pas encore tout lu, mais déjà merci de la réponse :love: ;)


---------------
Les Cartes Son Haute Fidélité pour mélomanes, musiciens, audiophiles, la MAO, le cinéma,...
Reply

Marsh Posté le 01-06-2009 à 16:19:43    

Re ;)
 
En fait ton script ne marche pas tel quel... bon ce n'est pas bien grave, comme je suis plus à l'aise en html et en javascript qu'en php j'ai fait ce truc là qui marche (je viens de le tester) :
 

Code :
  1. <head>
  2. <script language="javascript" type="text/javascript">
  3. window.defaultStatus="© Tharkie / www.tharkie.net";
  4. var extention = ".jpg" ;
  5. var nbimage = 4 ;
  6. var url;
  7. var rep;
  8.  
  9. function Images_Aleatoire()
  10. {
  11. numimage = Math.round( Math.random() * ( nbimage - 1 ) + 1 );
  12. rep = "img";
  13. url = './' + rep + '/' + numimage + extention ;
  14. document.write ('<img src="' + url + '" alt="Photo" title=url border=0>');
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <script language="JavaScript">Images_Aleatoire();</script>
  20. </body>


 
Mais merci à toi :)

Message cité 1 fois
Message édité par Tous le 01-06-2009 à 18:46:57

---------------
Les Cartes Son Haute Fidélité pour mélomanes, musiciens, audiophiles, la MAO, le cinéma,...
Reply

Marsh Posté le 01-06-2009 à 17:04:20    

Ok cool si ca fonctionne.
Ceci dit, je viens de tester mon script et il fonctionne très bien tel quel chez moi. Qu'est ce qui déconnait ? :??:
 
Pour finir, et c'est juste des simples conseils :
- c'est une très mauvaise idée de faire des document.write, car comme son nom l'indique, ca écrit dans ton document, en clair ca l'écrase ;)
- il est de bon ton de bien séparer le code JS et le HTML, c'est pour celà qu'il vaut mieux utiliser des evenements, qui sont là pour ca (onload).
- dans ton tag img, tu spécifies l'attribut "alt", mais penses aussi à lui attribuer "title". Le premier s'afficherait à la place de l'image si elle n'est pas disponible ou que l'user ne veut pas l'afficher, le second s'affichera dans un tooltip.
- dans ton code, tu définies des variables à l'exterieur de ta fonction, mais si tu charges un autre script, celui-ci peut potentiellement écraser tes variables et ta fonction ne marchera plus. Définies les dans ta fonction (en fait il s'agit de faire des namespaces).
 
Voilà, bonne chance :hello:


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 01-06-2009 à 18:47:50    

Merci pour ton aide en tous les cas :)
 
Moi ça fait des années que je n'avais pas touché à ce genre de prog et ça a bien évolué ces derniers temps :o
 
Je ne comprends pas trop ta syntaxe en fait :D
 
et particulièrement je ne comprends pas que ça puisse afficher quoi que se soit : <img id="randomPic" src="" width=0 height=0 /> je ne connais pas du tout :??:
 
Et merci aussi pour les conseils ! Quoi que je ne comprenne pas tout :whistle:
 
Par contre maintenant, il faut que sur les 26 images qui vont s'afficher il n'y ait jamais deux fois la même :lol: c'est pas gagné :sarcastic:

Message cité 1 fois

---------------
Les Cartes Son Haute Fidélité pour mélomanes, musiciens, audiophiles, la MAO, le cinéma,...
Reply

Marsh Posté le 01-06-2009 à 18:47:50   

Reply

Marsh Posté le 02-06-2009 à 11:26:27    

Tous a écrit :

Merci pour ton aide en tous les cas :)
 
Moi ça fait des années que je n'avais pas touché à ce genre de prog et ça a bien évolué ces derniers temps :o
 
Je ne comprends pas trop ta syntaxe en fait :D
 
et particulièrement je ne comprends pas que ça puisse afficher quoi que se soit : <img id="randomPic" src="" width=0 height=0 /> je ne connais pas du tout :??:
 
Et merci aussi pour les conseils ! Quoi que je ne comprenne pas tout :whistle:
 
Par contre maintenant, il faut que sur les 26 images qui vont s'afficher il n'y ait jamais deux fois la même :lol: c'est pas gagné :sarcastic:


 
Concernant <img id="randomPic" src="" width=0 height=0 />
Il s'agit d'une balise image toute con, avec comme attribut un identifiant ("randomPic" ), une source (vide au début du programme) et des dimensions nulles tout simplement :)
 
Concernant le script, voilà qq explicatifs :

Code :
  1. // cet evenement se déclenche lorsque la page courante est chargée, comme ca on est sur qu'il peut acceder à tout les elements du DOM
  2. window.onload = function ()
  3.     {
  4.         var rnd = parseInt (Math.random () * 9) + 1;
  5.         var img = new Image ();        // crée un objet de type image
  6.         img.src = "/images/image" + rnd + ".jpg"; // lui assigne une source, donc le fichier qui doit s'afficher. Ca a pour effet de déclencher son chargement !
  7.  
  8.         // l'evenement "load" se déclenche lorsque le chargement de l'image est complet, dès lors ca execute la fonction associée
  9.         img.onload = function ()
  10.             {
  11.                 var randomPic = document.getElementById ('randomPic');    // récupere dans le DOM (la page) l'element qui a pour ID 'randomPic'
  12.                 if (!randomPic)    // s'il n'existe pas on quitte
  13.                     return false;
  14.  
  15.                 randomPic.src = img.src;        // copie les données de l'objet précedent dans celui existant dans la base
  16.                 randomPic.width = img.width;
  17.                 randomPic.height = img.height;
  18.                 return true;
  19.             }
  20.             return true;
  21.     }


 
Pour finir, tu ne veux pas que la même image s'affiche 2 fois ? C'est à dire ? Deux fois de suite, ou jamais deux fois pour le même user ?
Tu peux gérer ca en utilisant des cookies par exemple.

Message cité 1 fois

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 02-06-2009 à 19:19:42    

Je te remercie grandement et chaleureusement de ton effort !
 
Mais je viens de finir mon code, il est en phase de test ici :
 
http://www.portail-guitare.net/test
 

Code :
  1. <script language="javascript" type="text/javascript">
  2. window.defaultStatus="© Tharkie / www.tharkie.net";
  3.  
  4.  
  5.  
  6. <!-- Définir ici le nombre de guitares -->
  7. nbreguitar = 29
  8. <!-- Définir ici le nombre de guitares -->
  9.  
  10.  
  11.  
  12. var ext = ".gif" ;
  13. var nbrphoto = nbreguitar ;
  14. var numimage ;
  15. var url;
  16. var rep = "img";
  17. var photoaff = new Array(nbreguitar); 
  18. var compt = 1 ;
  19. var sortie ;
  20.  
  21. for (i=1; i<= nbreguitar ; i++){
  22.    imageaffichee[i] = i +".gif";
  23.    document.write(photoaff[i] = i +".gif" )
  24.    } 
  25.  
  26.  
  27. function Images_Aleatoire()
  28. {
  29. do
  30.     {
  31.     sortie = "OK" ;
  32.     photoaff[compt] = "0" + ext ;
  33.     numphoto = Math.round( Math.random() * ( nbrphoto - 1 ) + 1 );
  34.     url = './' + rep + '/' + numphoto + ext ;
  35.     photoaff[compt] = numphoto + ext ;
  36.     for (i=1; i<=compt-1 ; i++){
  37.         if (photoaff[i] == photoaff[compt]) sortie = "no";
  38.         } 
  39.     }
  40. while (sortie == "no" )
  41.     document.write ('<img src="' + url + '" alt="Photo" title="' + compt + '    ' + url + '" border=0>');
  42.     compt++ ;
  43.  
  44. }
  45. </script>


 
Et chaque photo est affichée par l'appel de la fonction :
 

Code :
  1. <script language="JavaScript">Images_Aleatoire();</script>


 
Insérée dans le code !
 
Apparemment ça marche bien !!!  
 
Je précise que je ne programme plus depuis des années et je n'ai jamais été un pro dans ce type de langage web, (moi c'était du dbase, foxpro, assembleur et pascal - miage en 90) il y a près de 30 ans que j'ai commencé !!!
 
Donc, pour ça je dois consulter à chaque fois mes bouquins et ce n'est que de l'autodidacte ;)
 
Je vais regarder ton code et essayer de le comprendre :hello: :jap:


---------------
Les Cartes Son Haute Fidélité pour mélomanes, musiciens, audiophiles, la MAO, le cinéma,...
Reply

Marsh Posté le 02-06-2009 à 19:20:33    

Pour ta balise <img id="randomPic" src="" width=0 height=0 /> je l'avais bien entendu identifiée ;) mais je ne vois pas à quoi elle sert dans le prog :)

Message cité 1 fois

---------------
Les Cartes Son Haute Fidélité pour mélomanes, musiciens, audiophiles, la MAO, le cinéma,...
Reply

Marsh Posté le 02-06-2009 à 19:40:57    

Tous a écrit :

Re ;)
 
En fait ton script ne marche pas tel quel... bon ce n'est pas bien grave, comme je suis plus à l'aise en html et en javascript qu'en php j'ai fait ce truc là qui marche (je viens de le tester) :
 

Code :
  1. <head>
  2. <script language="javascript" type="text/javascript">
  3. window.defaultStatus="© Tharkie / www.tharkie.net";
  4. var extention = ".jpg" ;
  5. var nbimage = 4 ;
  6. var url;
  7. var rep;
  8.  
  9. function Images_Aleatoire()
  10. {
  11. numimage = Math.round( Math.random() * ( nbimage - 1 ) + 1 );
  12. rep = "img";
  13. url = './' + rep + '/' + numimage + extention ;
  14. document.write ('<img src="' + url + '" alt="Photo" title=url border=0>');
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <script language="JavaScript">Images_Aleatoire();</script>
  20. </body>

Mais merci à toi :)

euh, t'es sûr que c'est toi qui l'a fait ?

Tous a écrit :

window.defaultStatus="© Tharkie / www.tharkie.net";


Et puis çà fait des années qu'on utilise plus document.write ni l'attribut language de la balise script. Ah et aussi, on met des guillemets autour des valeurs des attributs ;)

Reply

Marsh Posté le 02-06-2009 à 20:43:42    

Tous a écrit :

Pour ta balise <img id="randomPic" src="" width=0 height=0 /> je l'avais bien entendu identifiée ;) mais je ne vois pas à quoi elle sert dans le prog :)


 
Ton code fonctionne c'est cool, mais sans vouloir être vexant, c'est très TRES oldschool :jap:
 
Tout d'abord regarde là, il s'agit du DOM : http://fr.wikipedia.org/wiki/Document_Object_Model
Grâce au DOM (ou plutôt aux méthodes associées) tu peux accéder à chaque élément de ta page pour peu qu'elle soit chargée (d'où l'événement "onload" associé à l'objet window que tu retrouves dans mon code).
Ainsi l'element IMG existe déjà dans la page, le script se chargeant juste de le "choper" et de lui attribuer les valeurs adéquates. Tu remarqueras que le code HTML et le code JS ne se mélangent pas, ce qui est un plus pour la maintenabilité, la clarté, la compatibilité, etc... ;)
 
Dans ton code, plusieurs choses piquent les yeux (je répète, ce ne sont pas des moqueries ou autre, mais des simples conseils :)) :
- window.defaultStatus : ca ne s'utilise plus, ça reste faisable mais dans les navigateurs modernes le fait de modifier le "status" est par défaut bloqué, donc c'est à proscrire si possible.
- concernant  

Code :
  1. for (i=1; i<= nbreguitar ; i++){
  2.   imageaffichee[i] = i +".gif";
  3.   document.write(photoaff[i] = i +".gif" )
  4.   }


A quoi sert le document.write ? et où est déclaré i et le tableau imageaffiche ? (au passage les tableaux sont dynamiques en JavaScript, et ils disposent de méthodes adaptées (google : js array)
- sortie = "OK" et plus loin sortie = "no" ??? Il existe en JavaScript un type de donnée dit Boolean, qui supporte deux valeurs : true et false. Ce qui est dans ce cas est parfaitement adapté ;)
 
Je te rassure, au boulot j'ai plein de collègues qui passent leur temps à pondre du code que seuls eux peuvent comprendre... sur le moment ! :D
Le jour où tu dois ré-attaquer tt ça, tu vas rien y comprendre (si tu as fais l'assembleur tu sais de quoi je veux parler) :)
 
Pour finir, il ne s'agit absolument pas de dénigrer ton boulot, mais de faire en sorte qu'il devienne conforme à ce que (je pense) il se fait de nos jours :jap:
Bonne chance pour la suite :hello:


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 02-06-2009 à 22:50:02    

Je te remercie du temps que tu m'accordes, de l'élégance que tu y mets et de ta patience :)
 
Au départ je m'étais juste lancé dans ce site sans aucune arrière pensée, parce qu'on ne trouve rien sur le net de complet et de léger.
 
L'appellation "old school" me convient parfaitement et je la revendique car vu que quand j'ai appris le html c'était début 2000... Donc les début du 4.01 ! D'ailleurs je revendique cette appellation avec ce logo en début de page :
 
http://www.portail-guitare.net/vintage.png
 
Alors, que faire ??? Remballer mes connaissances et me pencher sur les nouvelles normes ? Prendre du temps pour quelque chose qui ne me servira plus ? La dernière fois que j'ai fait une page en html c'était il y a 10 ans ou presque, je ne suis pas un fana :D Ou laisser ça tourner comme ceci, parce que ça marche parfaitement ?
 
En ce qui concerne la paternité du code, c'est effectivement mon oeuvre, ceci dit je me suis inspiré de mes recherches sur le net n'étant pas du tout un spécialiste.
 
:)
 
SICKofitALL -> j'ai corrigé mon erreur :p :o c'était un oubli de ma page de test ;) et le tableau imageaffiche est un oubli de transformation de nom  de variable...
 
voici le nouveau code :
 

Code :
  1. <script>
  2. window.defaultStatus="© Tharkie / www.tharkie.net";
  3.  
  4.  
  5.  
  6. <!-- Définir ici le nombre de guitares -->
  7. nbreguitar = 29
  8. <!-- Définir ici le nombre de guitares -->
  9.  
  10.  
  11.  
  12. var ext = ".gif" ;
  13. var nbrphoto = nbreguitar ;
  14. var numimage ;
  15. var url;
  16. var rep = "img";
  17. var photoaff = new Array(nbreguitar); 
  18. var compt = 1 ;
  19. var sortie ;
  20.  
  21.  
  22. for (i=1; i<= nbreguitar ; i++){
  23.    photoaff[i] = i +".gif";
  24.    } 
  25.  
  26.  
  27. function Images_Aleatoire()
  28. {
  29. do
  30.     {
  31.     sortie = "OK" ;
  32.     photoaff[compt] = "0" + ext ;
  33.     numphoto = Math.round( Math.random() * ( nbrphoto - 1 ) + 1 );
  34.     url = './' + rep + '/' + numphoto + ext ;
  35.     photoaff[compt] = numphoto + ext ;
  36.     for (i=1; i<=compt-1 ; i++){
  37.         if (photoaff[i] == photoaff[compt]) sortie = "no";
  38.         } 
  39.     }
  40. while (sortie == "no" )
  41.     document.write ('<img src="' + url + '" alt="Photo" title="' + compt + '    ' + url + '" border=0>');
  42.     compt++ ;
  43.  
  44. }
  45. </script>


 
J'apprécie toutes tes remarques que je trouve très constructives, mais, j'ai peur de ne pas avoir la volonté ni l'intérêt de me mettre à jour techniquement. Tant que je fais ça, me pencher sur la forme, le fond n'avance pas et c'est le fond le plus important pour moi... A tort ou à raison, hein, je n'ai pas valeur morale attachée à ce jugement :)
 
Je regarderai le lien sur les "DOM" mais j'avoue pour l'instant ne pas en comprendre le sens ni le fonctionnement :jap:
 
Pour les variable booléennes, bien entendu que je connais, mais j'ai eu la flemme de chercher comment les utiliser et comment les déclarer :D :lol:
 
J'ai bien compris votre avis sur l'instruction window.defaultStatus mais pour l'instant je vais le laisser comme ça ;)


Message édité par Tous le 02-06-2009 à 23:01:39

---------------
Les Cartes Son Haute Fidélité pour mélomanes, musiciens, audiophiles, la MAO, le cinéma,...
Reply

Marsh Posté le 02-06-2009 à 22:57:13    

SICKofitALL a écrit :


 
Concernant <img id="randomPic" src="" width=0 height=0 />
Il s'agit d'une balise image toute con, avec comme attribut un identifiant ("randomPic" ), une source (vide au début du programme) et des dimensions nulles tout simplement :)
 
Concernant le script, voilà qq explicatifs :

Code :
  1. // cet evenement se déclenche lorsque la page courante est chargée, comme ca on est sur qu'il peut acceder à tout les elements du DOM
  2. window.onload = function ()
  3.     {
  4.         var rnd = parseInt (Math.random () * 9) + 1;
  5.         var img = new Image ();        // crée un objet de type image
  6.         img.src = "/images/image" + rnd + ".jpg"; // lui assigne une source, donc le fichier qui doit s'afficher. Ca a pour effet de déclencher son chargement !
  7.  
  8.         // l'evenement "load" se déclenche lorsque le chargement de l'image est complet, dès lors ca execute la fonction associée
  9.         img.onload = function ()
  10.             {
  11.                 var randomPic = document.getElementById ('randomPic');    // récupere dans le DOM (la page) l'element qui a pour ID 'randomPic'
  12.                 if (!randomPic)    // s'il n'existe pas on quitte
  13.                     return false;
  14.  
  15.                 randomPic.src = img.src;        // copie les données de l'objet précedent dans celui existant dans la base
  16.                 randomPic.width = img.width;
  17.                 randomPic.height = img.height;
  18.                 return true;
  19.             }
  20.             return true;
  21.     }


 
Pour finir, tu ne veux pas que la même image s'affiche 2 fois ? C'est à dire ? Deux fois de suite, ou jamais deux fois pour le même user ?
Tu peux gérer ca en utilisant des cookies par exemple.


 
 
J'ai beau lire, je ne comprends pas comment ça marche :o
 
C'est vrai que c'est plus joli :o Mais il me manque des notions, c'est évident ;)
 
En fait c'est cette notion "img.onload" qui me chagrine si je mets ta balise <img id="randomPic" src="" width=0 height=0 />  dans mon html à plusieurs endroits, elle sera complétée et affichera une image ?
 
parce que tu dis : #
        // l'evenement "load" se déclenche lorsque le chargement de l'image est complet, dès lors ca execute la fonction associée
 
mais justement avec ta balise aucune image n'est chargée ? si ? j'y comprends rien :lol:

Message cité 1 fois
Message édité par Tous le 02-06-2009 à 23:04:26

---------------
Les Cartes Son Haute Fidélité pour mélomanes, musiciens, audiophiles, la MAO, le cinéma,...
Reply

Marsh Posté le 03-06-2009 à 00:09:46    

Tous a écrit :

 


J'ai beau lire, je ne comprends pas comment ça marche :o

 

C'est vrai que c'est plus joli :o Mais il me manque des notions, c'est évident ;)

 

En fait c'est cette notion "img.onload" qui me chagrine si je mets ta balise <img id="randomPic" src="" width=0 height=0 />  dans mon html à plusieurs endroits, elle sera complétée et affichera une image ?

 

parce que tu dis : #
        // l'evenement "load" se déclenche lorsque le chargement de l'image est complet, dès lors ca execute la fonction associée

 

mais justement avec ta balise aucune image n'est chargée ? si ? j'y comprends rien :lol:


En fait c'est plis simple qu'il n'y parait :
- d'abord je crée un objet de type image ( var img = new Image () ) qui n'est pas lié à la page, en clair cette image existe seulement en mémoire et pas directement dans le HTML. Si tu veux il s'agit du tag IMG "virtuel" manipulable par programmation.
- à cette objet, je lui déclare une source ( img.src = "/images/image" + rnd + ".jpg" ), car à la creation de l'objet image, il ne sait pas quoi afficher, la source est vide. Un peu comme un cadre photo... sans la photo ! Or à partir du moment où tu définies une source, le navigateur se met à charger cet source, càd que tu entreprends l'acte de mettre une photo dans le cadre, pour suivre la métaphore, et ca peut prendre une certain temps on fonction de la taille de l'image (ou del a taille de la photo dans la cadre ;))
- une fois que ton image est chargée (que ta photo est DANS le cadre), un evenement se déclenche : load (chargé). Cet evenement execute une fonction, qui par défaut est indéfinie. L'evenemnt en question signifie : "Ok j'ai ma photo, elle est chargée et en mémoire cache, et j'ai ses dimensions" !
- mais pour l'instant elle n'est PAS dans ta page HTML, car il s'agit encore d'un objet créé de toute pièce par programmation ! Donc on assigne une fonction à l'evenement, qui est chargée de choper avec les méthodes disponibles via le DOM (ici la fonction est document.getElementById, qui porte un nom explicite je pense) un VRAI tag IMG dans ta page (le fameux avec la source à "" et à l'id "randomPic" ).
- il suffit donc à présent de copier les domensions et la source de l'image virtuelle (img) vers l'image de ta page (randomPic), et comme cet source est déjà dans le cache du navigateur il ne va pas la recharger, son apparition sera alors instantanée, à la bonne taille, et cela de facon transparente pour l'utilsateur (il ne verra pas l'image se charger petit à petit).

 

Voilà, en me relisant (t'excuseras les fôtes :o) je me rend compte qu'il y a bcp de concept à connaitre, et que forcément ca peut rebuter aux premiers abords. Mais celui qui a dit que le developpement web était basique se trompait :D

 

A++ :)


Message édité par SICKofitALL le 03-06-2009 à 00:15:25

---------------
We deserve everything that's coming...
Reply

Marsh Posté le 03-06-2009 à 00:38:14    

Je vais lire ça à tête reposée :)
 
Merci encore mille fois ;)


---------------
Les Cartes Son Haute Fidélité pour mélomanes, musiciens, audiophiles, la MAO, le cinéma,...
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed