image fixe aléatoire

**marion5515** · 23/04/2008, 15h57

Bonjour à tous !

Je suis actuellement entrain de réaliser un site internet sur lequel on peut retrouver pour chaque rubrique un menu vertical placé à gauche présentant les sous-rubriques. Juste au dessus de ce menu je souhaiterais mettre une image qui change disons toutes les 2 sec. Or mais facultés en javascript sont assez faibles donc si quelqu'un pouvait m'aider ... .

Vous pouvez retrouver sur ce site l'effet que je recherche avec l'image intercalée dans le menu vertical de gauche : www.criticalpharmaceuticals.com

Merci par avance .

**skeut** · 24/04/2008, 12h27

Bonjour

Peut-être que ceci pourra t'aider:

1. Fonction à placer entre les balises <head> et </head>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<script type="text/javascript">
 
var interval = 2.5; // délai de rotation
var random_display = 1; // 0 = non, 1 = oui
interval *= 1000;
 
var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://ici_url_des_images/01.jpg");
image_list[image_index++] = new imageItem("http://ici_url_des_images/02.jpg");
image_list[image_index++] = new imageItem("http://ici_url_des_images/03.jpg");
image_list[image_index++] = new imageItem("http://ici_url_des_images/04.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
</script>

2. <BODY OnLoad="rotateImage('rImage')">

3. Placer ceci à l'endroit désiré:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img name="rImage" src="http://ici_url_des_images/01.jpg" width="120" height="90" title="" align="" />

voilà, j'espère t'avoir donné une piste.
skeut

**le_chomeur** · 24/04/2008, 13h05

hé ben voila un scrip tout mimi , je proposerais 2 choses :

- préload des images , pour éviter qu'au moment du changement d'image on se retrouve avec la jolie croix sous ie ou rien sous firefox
- ajout d'un petit effet de transition ( a chercher sur ce forum )

**marcha** · 24/04/2008, 13h45

Salut,

Un moyen de faire simple est d'utiliser une seule image qui contient toutes
tes images les unes au dessus des autres. Dans ton cas elles ont toutes les
mêmes dimensions vu l'usage.

Ceci t'évite de gérer le préchargement et simplifie le script. mais te fait
préparer une longue image sur ton programme de dessin favori :-)

Ensuite tu joues sur les styles css, plus particulièrement le background-position,
voici un exemple à adapter.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<style type='text/css'>
#image { width: 100px; height: 100px; background-image: url(image.jpg); }
</style>
<script type="text/javascript">
var hauteur_totale = 400; // hauteur du fichier complet
var hauteur = 100; // hauteur d'une image
var pos = 0;
window.onload = function() {
  setInterval( function() {
	pos += hauteur;
        pos %= hauteur_totale;
	document.getElementById('image').style.backgroundPosition = "0 -" + pos + "px";
  }, 2000);
}
</script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<div id='image'></div>

**le_chomeur** · 24/04/2008, 14h02

salut marcha ,
cette solution s'applique généralement sur des rollovers pas sur plusieurs images ( assez lourd a gèrer ) de plus selon ma propre expérience, quelques souçis de ralentissement sous ie ...

**marcha** · 24/04/2008, 14h26

Salut le_chomeur,

Il est clair qu'il faut pas charger une image trop grande. Par contre je n'ai
pas observé de ralentissement particuliers sur IE pour ma part.

La solution idéale serait de travailler avec des fichiers séparés (comme décrit
plus haut) mais de précharger les images avec une ou deux images
d'avance sur l'animation. Et de gérer correctement le onload des images pour
attendre qu'elle soient effectivement chargée et éviter ainsi des affichage vides.

Mais tout cela dépend du nombre d'image en fait et de la probabilité qu'elle
soient toutes vue ou pas avant un changement de page. Afin d'éviter de
charger des choses inutiles.

A toi de voir marion5515, ma solution n'est pas adaptée à un grand nombre
d'images.

**marion5515** · 24/04/2008, 15h35

merci à tous pour votre aide ! après plusieurs essais je suis arrivée à ce que je voulais, bien que je n'ai pas réussi à mettre un effet de transition en fondu par exemple entre chaque image mais ce n'est pas grave, le principal fonctionne.

image fixe aléatoire

JavaScript

Discussions similaires

Partager

Partager