Créer un groupe d'images à afficher aléatoirement à chaque actu.

Créer un groupe d'images à afficher aléatoirement à chaque actu. - HTML/CSS - Programmation

Marsh Posté le 31-07-2007 à 04:08:23    

Bonjour,
 
 
 
 
Pour un site Internet, je souhaiterais créer une sorte d'automatisme afin que s'affiche à l'endroit souhaité sur la page une image différente à chaque actualisation.
 
 
Concrètement, la page internet se compose d'un rond coupé en deux. Sur la gauche se trouvent les onglets (présentation - prestations - nos réalisations - historique - contact), avec le contenu en rapport juste en dessous. Et à droite, la deuxième partie du rond se composerait d'une image. J'aimerais qu'elle puisse être séléctionnée aléatoirement parmi plusieurs autres, et qu'à chaque actualisation de la page (ou retour sur celle-ci après être allé voir un autre onglet) une image différente apparaisse.
Il devrait y avoir plusieurs "sets" d'images pour chacun des onglets.
 
 
Je suis un grand novice en HTML, mais j'imagine qu'il faudrait créer un code qui au lieu d'ordonner l'affichage d'une seule image commanderait l'affichage d'une des images d'un dossier...
 
 
Par exemple:  
 
<img src="http://forum-images.hardware.fr/icones/image1.gif"> <ou> <img src="http://forum-images.hardware.fr/icones/image2.gif"> <ou> <img src="http://forum-images.hardware.fr/icones/image3.gif">
C'est sûrement complètement faux, mais je pense que ce serait un code dans ce goût là.
 
 
 
Merci d'avance! :)
 
François


Message édité par Francois87 le 31-07-2007 à 04:10:13
Reply

Marsh Posté le 31-07-2007 à 04:08:23   

Reply

Marsh Posté le 31-07-2007 à 04:47:56    

tu as un langage serveur sous la main ?

Reply

Marsh Posté le 31-07-2007 à 11:07:40    

Gestion côté client :
 
<script>
function image_aleatoire()
{
   // Génère un chiffre compris entre 0 et 9 (adapter le calcul pour génrer le nombre d'images existantes)
   var num_image = Math.round(Math.random()*10);
 
   // Génère le nom de l'image
   var image = "image"+num_image+".gif";
 
   // Mise à jour de la zone cible
   document.getElementById("mon_image" ).src = "http://forum-images.hardware.fr/icones/"+image;
}
</script>
 
Sur ta page :
 
<img id="mon_image" src="http://forum-images.hardware.fr/icones/image_par_defaut.gif">  
 
<script>
image_aleatoire();
</script>
 
Comme xtof_83 te l'a demandé, as-tu sinon un langage serveur ? (Php, asp...)

Reply

Marsh Posté le 31-07-2007 à 16:58:31    

Merci pour ces réponses.
 
 
Qu'est-ce qu'un langage serveur ? Le php c'est lorsqu'on autorise le visiteur à agir sur la page non ? (par exemple avec un formulaire...)
 
 
Je ce comprends pas très bien les codes donnés par Benjones. Si par exemple j'ai trois images:
http://www.fontaine38.fr/phpecard/ [...] -rouge.jpg
http://www.cedotec.ch/uploads/0581_img_foret.jpg
http://www.greenpeace.org/raw/imag [...] olaire.jpg
 
... copiées ici avec 1/2/3.jpg sur mon FTP:
 
http://site.voila.fr/16mm/hg/img/1.jpg
http://site.voila.fr/16mm/hg/img/2.jpg
http://site.voila.fr/16mm/hg/img/3.jpg
 
 
=> quel serait le code exact pour que ça marche ?
 
 
Et si je comprends bien il faut définir le nombre d'images qui se trouveront dans le cicles aléatoire ?
C'est un peu ennuyeux, est-ce qu'il n'y a pas un moyen de ne pas le faire ?
 
 
Merci encore pour votre aide!
 
François

Reply

Marsh Posté le 31-07-2007 à 17:06:53    

Il y a moyen si tu utilises un langage serveur.
 
Toi tu as un peu du mal à identifié ce que veux dire un langage. Et faire la différence, entre langages de description, comme le HTML, et X milliers d'autres langages... et langages de programmation, comme le javascript, php, et X milliers d'autres langages...
 
Bon ça c'est en gros...
 
Alors pour toi : là le javascript c'est langage, exécuté côté client...sur ta machine à toi, et toutes les machines des gens qui iront sur ton site...
 
le php, asp, autre, sont des langages serveur exécuté sur le serveur.
Vu que tes photos sont sur le serveur : tu comprends de suite pourquoi tu pourras faire beaucoup plus de chose direct en agissant sur le serveur.
 
De plus l'example de benjones marche, mais seulement si la personne active son Javascript sur sa machine...
 
Enfin voilà, en très gros ;)
 
ce que je te conseille, regarder sur le net... et comprendre un peu plus comment tout ça marche...
 
 

Reply

Marsh Posté le 31-07-2007 à 17:22:41    

Je commence un peu à comprendre...
 
Puisque c'est l'utilisateur qui presse sur actualiser ou qui passe d'une page à l'autre, on doit donc créer un langage ... euh de programmation ?! Type java et qui vient donc de l'utilisateur ?
 

Citation :

De plus l'example de benjones marche, mais seulement si la personne active son Javascript sur sa machine...  


C'est un peu ce que je souhaiterais éviter... car peut-être que tout le monde n'a pas de javascript...
Et dans ce cas ça ne marche pas.
 
Il y a un terme précis qui définit ce que je voudrais faire ?? Comme ça je pourrais chercher sur google et peut-être trouver.
 
A+!

Reply

Marsh Posté le 31-07-2007 à 17:39:17    

Je veux bien te donner un code php, mais si tu le comprends pas, c'est pas formatteur !
 
Renseigne toi déjà pour savoir si ton hébergeur propose le php.
 
A+

Reply

Marsh Posté le 31-07-2007 à 17:43:23    

OK...
Et pas d'idée pour un nom exact pour google ? Je sais pas, random programation ?  :pt1cable:  :whistle:  
 
A+!

Reply

Marsh Posté le 31-07-2007 à 17:44:50    

ça sert à rien de chercher un truc que tu ne comprend pas ;)
 
Regarde sur internet php...style http://fr.wikipedia.org/wiki/Php en cas..regarde à quoi ça sert, comprend comment ça marche.
 
si tu sais lire en anglais, c'est encore mieux, il y a de nombreux sites... Voilà ;)
 
Mais regarde surtout ce que ton serveur fournit comme option
 
si c'est du ASP, ben c'est différent, pour l'utilisation, mais ça va dans le même sens.
 
Si tu as pas le choix...ben JS...

Reply

Marsh Posté le 31-07-2007 à 17:52:02    

Ca marche, je lis déjà ton lien et je regarde si je trouve des choses en anglais.
 
Je vous tiens au courant pour les prop du serveur...  
 
 
Bon après-midi!

Reply

Sujets relatifs:

Leave a Replay

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