changer d'image à chaque actualisation

changer d'image à chaque actualisation - HTML/CSS - Programmation

Marsh Posté le 17-03-2005 à 22:37:29    

Comment changer d'image à chaque actualisation tout en la placçan en position absolue ?

Reply

Marsh Posté le 17-03-2005 à 22:37:29   

Reply

Marsh Posté le 17-03-2005 à 22:38:24    

Il faut par exemple un script PHP qui va tirer un nombre aléatoire, et suivant le nombre, mettre une image différente.

Reply

Marsh Posté le 17-03-2005 à 22:40:20    

Est-ce que tu peut être un peu plus précis. On peut pas le faire en javascript ?

Reply

Marsh Posté le 17-03-2005 à 22:43:30    

La chose n'a aucun intérêt en JS (c'est une mauvaise utilisation de l'outil), ce genre de trucs est à faire server-side en PHP/ASP/JSP/Autre


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 17-03-2005 à 22:45:12    

Alors comment on fait plus précisement ?

Reply

Marsh Posté le 17-03-2005 à 22:56:00    

http://www.php.net/manual/fr/tutorial.firstpage.php
+
http://www.php.net/manual/fr/language.types.array.php
+
http://fr2.php.net/manual/fr/function.rand.php


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 17-03-2005 à 23:00:13    

On est obligé de faire ça en php ? Ya pas une autre technqiue en html

Reply

Marsh Posté le 17-03-2005 à 23:01:14    

Nope, pas d'autres techniques valables

Reply

Marsh Posté le 17-03-2005 à 23:03:20    

En même temps, à supposer que l'image est décorative, je vois pas le mal de changer la source d'une image en JS hein ?

Reply

Marsh Posté le 17-03-2005 à 23:03:47    

Le HTML ne permet pas de le faire, le Javascript n'est pas fait pour ça (vraiment pas).
 
Après, si t'aimes pas le PHP tu peux le faire en ASP, en JSP, en CGI/Perl, en CGI/Python, ...
Mais c'est largement plus dûr de trouver un hôte qui propose ce genre de trucs que du PHP tout bateau [:petrus75]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 17-03-2005 à 23:03:47   

Reply

Marsh Posté le 17-03-2005 à 23:05:38    

fastclemmy a écrit :

En même temps, à supposer que l'image est décorative, je vois pas le mal de changer la source d'une image en JS hein ?


Bah autant le faire en PHP, c'est pas plus dure (c'est même plus facile), et ça fait profiter tout le monde :)

Reply

Marsh Posté le 17-03-2005 à 23:10:43    

FlorentG a écrit :

Bah autant le faire en PHP, c'est pas plus dure (c'est même plus facile), et ça fait profiter tout le monde :)


 
Mouaich, je persiste à penser que la réponse à la question n'est pas aussi définitive que les quelques messages plus haut...

Reply

Marsh Posté le 17-03-2005 à 23:28:10    

fastclemmy a écrit :

Mouaich, je persiste à penser que la réponse à la question n'est pas aussi définitive que les quelques messages plus haut...


 [:gratgrat]  
 
Comme tu l'as déjà sous-entendu en liant certains sites sur ton blog, le Javascript représente l'aspect comportemental/réactif d'une page, un changement d'image au chargement n'en fait pas vraiment partie, ou alors de très très loin [:cupra]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 18-03-2005 à 00:10:18    

Mon interprétation personnelle du champ d'action du javascript comprend à la fois l'aspect interactif du site (ouvrir une info dans une popup plutôt que dans une page complète, tout en laissant la possibilité de le faire) mais aussi l'aspect présentationnel.
 
En ce sens, émuler un min-width sous IE avec un petit bout de script afin de rendre un site plus agréable à lire est justifié (il s'agit uniquement d'un artifice graphique).
 
Dans la même logique de présentation il me paraît assez sensé que ce soit javascript qui t'affiche aléatoirement une image (illustrative). C'est une fioriture graphique, complètement inutile, donc je ne vois pas pourquoi ça serait au serveur d'en supporter la charge... La personne n'a pas javascript ? Et bien il a l'image par défaut, pas de souci.

Reply

Marsh Posté le 18-03-2005 à 00:27:09    

fastclemmy a écrit :

En ce sens, émuler un min-width sous IE avec un petit bout de script afin de rendre un site plus agréable à lire est justifié (il s'agit uniquement d'un artifice graphique).


Ca me semble plus faire partie du champ comportemental, surtout si l'émulation est générique, que graphique (on aurait du mal à considérer qu'IE7 est "graphique" alors qu'il ne fait qu'émuler des interprétations graphiques...)

Citation :

Dans la même logique de présentation il me paraît assez sensé que ce soit javascript qui t'affiche aléatoirement une image (illustrative). C'est une fioriture graphique, complètement inutile, donc je ne vois pas pourquoi ça serait au serveur d'en supporter la charge...


Là, le problème pour moi c'est que je n'ais aucun argument logique à apporter [:mmmfff]  
Uniquement de l'idéologique (pourquoi serait-ce à moi de supporter la charge de la fioriture graphique que tu m'impose?)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 18-03-2005 à 15:21:12    

Eric, voici une solution satisfaisante :
 
- l'image change régulièrement sans recharger la page, par exemple toutes les 120 secondes ou bien toutes les 600 secondes
- on a donc un comportement et l'utilisation du javascript est justifiée
- puisque l'image change régulièrement - mais pas assez rapidement pour que toutes les images soient vues en une consultation de la page - autant les mélanger à chaque consultation de la page, cad que la 1ère est tirée aléatoirement
 
De cette manière :
- les puristes du JS acceptent que tu utilises leur language de prédilection pour ton projet et écartent la possibilité d'utiliser PHP
- la plupart des internautes voient une image différente au chargement de la page

Reply

Marsh Posté le 18-03-2005 à 15:58:35    

qui dit actualisation dit appel au serveur (si je ne m'abuse). Faire ce que tu veux faire en javascript implique que tu charges toutes les images potentiellement affichables (un seule fois certes mais quand même). Pour peu que t'en ai bcp ou qu'elles soit lourdes, tu risques de ralentir considerablement le temps du premier accès à ta page :(

Reply

Marsh Posté le 18-03-2005 à 17:00:43    

Les écoutes pas, tu peux le faire en javascript :o

Reply

Marsh Posté le 18-03-2005 à 17:34:24    

Je voulais juste, sachant que je ne pourait pas toujours mettre mon site à jour, qu'une image différente se charge à chaque fois. Peut-être que le titre "changer d'image à chaque actualisation" n'était pas très explicite.

Reply

Marsh Posté le 18-03-2005 à 17:58:29    

et sachant que l'image fait partie de la structure de la page et est un des éléments principaux.


Message édité par eric251 le 18-03-2005 à 17:59:41
Reply

Marsh Posté le 18-03-2005 à 18:19:09    

Par exemple :
 

Code :
  1. <script language="Javascript">
  2. <!--
  3. // please keep these lines on when you copy the source
  4. // made by: Nicolas - http://www.javascript-page.com
  5. var currentdate = 0
  6. var core = 0
  7. function StringArray (n) {
  8.   this.length = n;
  9.   for (var i =1; i <= n; i++) {
  10.     this[i] = ' '
  11.   }
  12. }
  13. image = new StringArray(10)
  14. image[0] = '0.gif'
  15. image[1] = '1.gif'
  16. image[2] = '2.gif'
  17. image[3] = '3.gif'
  18. image[4] = '4.gif'
  19. image[5] = '5.gif'
  20. image[6] = '6.gif'
  21. image[7] = '7.gif'
  22. image[8] = '8.gif'
  23. image[9] = '9.gif'
  24. var ran = 60/image.length
  25. function ranimage() {
  26.   currentdate = new Date()
  27.   core = currentdate.getSeconds()
  28.   core = Math.floor(core/ran)
  29.     return(image[core])
  30. }
  31. document.write("<img src='" +ranimage()+ "'>" )
  32. //-->
  33. </script>


 
Sinon t'as :  
http://www.dyn-web.com/javascript/ [...] -rand.html
http://javascript.internet.com/mis [...] tator.html
http://www.hypergurl.com/randomimage.html
 
Bref, t'as le choix en Javascript :o


Message édité par ToxicAvenger le 18-03-2005 à 18:20:19
Reply

Marsh Posté le 18-03-2005 à 18:37:59    

Merci

Reply

Marsh Posté le 18-03-2005 à 18:40:00    

Il faut placer ton code où entre <body> et </body> ou avant </head> ?


Message édité par eric251 le 18-03-2005 à 18:43:25
Reply

Marsh Posté le 18-03-2005 à 19:07:12    

J'ai trouvé un code pour changer l'image chaque jour :
Entre <head> et </head>  

Citation :

<SCRIPT LANGUAGE="JavaScript">
function makeArray(n) {
this.length = n;
for (var i=1; i<=n; i++) {
this[i] = "";  
}
return this;
}
var i;
function imagealeatoire() {
i = Math.floor(3 * Math.random() + 1);
return image[i];
}
image = new makeArray(3);
image[1]="images/cascade_petrifiee.jpg";
image[2]="images/torrent.jpg";
image[3]="images/lac.jpg";
</SCRIPT>


 
entre <BODY> et </BODY>

Citation :

<SCRIPT LANGUAGE="JavaScript">
document.write("<IMG SRC=" +imagealeatoire() +" WIDTH=200 HEIGHT=150 BORDER=0>" );
</SCRIPT>
</CENTER>


 
Mais comment mettre ensuite l'image en position absolue ?


Message édité par eric251 le 18-03-2005 à 19:07:35
Reply

Marsh Posté le 18-03-2005 à 20:38:54    

Ne pas passer par un "document.write"...
 
Regarde plutot du code de "document.getElementById".

Reply

Marsh Posté le 21-03-2005 à 10:49:17    

eric251 a écrit :

J'ai trouvé un code pour changer l'image chaque jour :
Entre <head> et </head>  

Citation :

<SCRIPT LANGUAGE="JavaScript">
function makeArray(n) {
this.length = n;
for (var i=1; i<=n; i++) {
this[i] = "";  
}
return this;
}
var i;
function imagealeatoire() {
i = Math.floor(3 * Math.random() + 1);
return image[i];
}
image = new makeArray(3);
image[1]="images/cascade_petrifiee.jpg";
image[2]="images/torrent.jpg";
image[3]="images/lac.jpg";
</SCRIPT>


 
entre <BODY> et </BODY>

Citation :

<SCRIPT LANGUAGE="JavaScript">
document.write("<IMG SRC=" +imagealeatoire() +" WIDTH=200 HEIGHT=150 BORDER=0>" );
</SCRIPT>
</CENTER>


 
Mais comment mettre ensuite l'image en position absolue ?


[:enzan]
 

  • Un script se note comme ça :

    <script type="text/javascript">

    [...]
    </script>


    • On n'utilise plus document.write qui ne fonctionne pas en XHTML, mais document.createElement et element.appendChild :) Mais de toute façon on s'en fout ici, faudra faire comme ça :

      document.getElementById('random').src = imagealeatoire();

    • Met plutôt une valeur par défaut à ton image :

      <body>

       [...]
        <img id="random" width="200" height="150" src="images/cascade_petrifiee.jpg" />
        <script type="text/javascript">
          document.getElementById('random').src = imagealeatoire();
        </script>
        [...]


      • N'utilise plus d'attribut border="0" qui est obsolète. Fait-ça en CSS
      • Pour mettre une image en position absolue... faut la mettre en position absolue :D Exemple :

        #random {

         border: 0;
          position: absolute;
          top: 20px;
          right: 80px;
        }


         
        Avec ça, ça va être déjà mieux. Mais je persiste qu'il faut faire ça côté serveur pour en faire profiter à tout le monde :o


        Message édité par FlorentG le 21-03-2005 à 10:50:12
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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