Existe-t-il un moyen de changer automatiquement les photos?

  • jrosworld
  • Newbie
  • Newbie
  • No Avatar
  • Inscription: Aoû 24, 2008
  • Messages: 10
  • Status: Offline

Message Septembre 19th, 2008, 2:26 am

Je me demandais s'il était possible de faire des photos sur une page, automatiquement à une autre photo, par exemple toutes les 5 secondes, afin d'ajouter un peu de variété à une page...mais je n'ai aucune idée par où commencer. Can anyone help?
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Septembre 19th, 2008, 2:26 am

  • digitalMedia
  • a.k.a. dM
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Déc 29, 2003
  • Messages: 5169
  • Loc: SC-USA
  • Status: Offline

Message Septembre 19th, 2008, 3:00 am

Vous pouvez accomplir cela avec le javascript ou Flash...ou même d'un GIF animé, si tu voulais (non recommandé).

Heres un tutorial simple avec javascript
http://www.javascriptkit.com/howto/show.shtml
- dM
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Septembre 19th, 2008, 3:14 am

Une façon de base, et peut-être le plus facile, pour ce faire est avec le Javascript.

Si vous regardez les pages de code source / HTML, mauvais usage du site de votre signature à titre d'exemple, vous aurez une <img> élément / tag pour afficher une image.

Par exemple sur votre page là, vous avez cette image

Image

Et dans votre source que vous avez ce code html qui l'affiche.

Code: [ Select ]
<img src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />


Maintenant, pour avoir un travail Javascript avec cette image, facilement, nous devons donner à l'image une id attribut. Ce qui rendra le regard du code comme cela, en supposant qu'on lui donne un id de "jro_pic".

Code: [ Select ]
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />


Maintenant que nous pouvons facilement obtenir une référence à l'image en Javascript, nous pouvons modifier les propriétés, y compris l'attribut "src", à l'exécution.

Supposons que nous voulons faire défiler les 2 images, et theyre tout dans les "images" dossier comme celui thats là maintenant.

Nous avons d'abord ajouter une nouvelle section de script sous l'image, comme si,

Code: [ Select ]
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
<script type="text/javascript">//<![CDATA[
 
//]]></script>
  1. <img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
  2. <script type="text/javascript">//<![CDATA[
  3.  
  4. //]]></script>


Ensuite, nous utilisons un Javascript array pour stocker les adresses des 2 images.

Code: [ Select ]
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
<script type="text/javascript">//<![CDATA[
var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
//]]></script>
  1. <img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
  2. <script type="text/javascript">//<![CDATA[
  3. var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
  4. //]]></script>


Maintenant que nous avons une liste des adresses d'image à utiliser, nous pouvons ajouter une fonction javascript qui peut être exécuté sur une minuterie, et réglez la minuterie pour toutes les 5 secondes, ou quand il s'agit de Javascript, 5000 millisecondes.

Code: [ Select ]
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
<script type="text/javascript">//<![CDATA[
var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
var cycle_jro = function()
{
  //code here
}
var jro_cycling = setInterval(cycle_jro, 5000);
//]]></script>
  1. <img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
  2. <script type="text/javascript">//<![CDATA[
  3. var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
  4. var cycle_jro = function()
  5. {
  6.   //code here
  7. }
  8. var jro_cycling = setInterval(cycle_jro, 5000);
  9. //]]></script>


À ce point, nous avons juste une image que l'on peut faire référence, une liste d'images à utiliser, et une horloge qui fait quelque chose toutes les 5 secondes.

Maintenant, si nous faisons les changements suivants, il va vraiment commencer à ressembler à somethings se passe, en supposant que nous avons des images en cours de validité dans le tableau.

Code: [ Select ]
<img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
<script type="text/javascript">//<![CDATA[
var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
var cycle_jro = function()
{
  var jimg = document.getElementById('jro_pic');
  var next_img = jro_images.shift();
  jimg.src = next_img;
  jro_images.push(next_img);
  return;
}
var jro_cycling = setInterval(cycle_jro, 5000);
//]]></script>
  1. <img id="jro_pic" src="images/homepageme.jpg" alt="Jethro &#34;Jro&#34; Williams" style="border-style:none" />
  2. <script type="text/javascript">//<![CDATA[
  3. var jro_images = new array('/images/jro1.jpg', '/images/jro2.jpg');
  4. var cycle_jro = function()
  5. {
  6.   var jimg = document.getElementById('jro_pic');
  7.   var next_img = jro_images.shift();
  8.   jimg.src = next_img;
  9.   jro_images.push(next_img);
  10.   return;
  11. }
  12. var jro_cycling = setInterval(cycle_jro, 5000);
  13. //]]></script>
Strong with this one, the sudo is.
  • wanna kill
  • Beginner
  • Beginner
  • Avatar de l’utilisateur
  • Inscription: Sep 08, 2008
  • Messages: 36
  • Status: Offline

Message Septembre 22nd, 2008, 10:59 pm

merci pour le code. qui est utile.

Afficher de l'information

  • Total des messages de ce sujet: 4 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 155 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC