Chargement d'image lors d'un changement 'dynamique'

Version imprimable

Bonjour,

J'ai fait un petit script pour changer certaines de mes images lorsqu'on les survole avec la souris. Ce qui donne :
Code:

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 function changerImage(event) { Event.stop(event); var image = Event.element(event).src; var newImage = new Image(); newImage.src = image.substring(0, image.lastIndexOf('.')) + "-over.png"; if(newImage.complete) { Event.element(event).src = image.substring(0, image.lastIndexOf('.')) + "-over.png"; } } function resetImage(event) { Event.stop(event); var image = Event.element(event).src; var newImage = new Image(); newImage.src = image.substring(0, image.lastIndexOf('-')) + ".png"; if(newImage.complete) { Event.element(event).src = image.substring(0, image.lastIndexOf('-')) + ".png"; } } function chargerImages() { var images = document.getElementsByClassName('aimage'); var length = images.length; for(var i = 0; i < length; i++) { Event.observe(images[i], 'mouseover', changerImage); Event.observe(images[i], 'mouseout', resetImage); } } Event.observe(window, 'load', chargerImages, false);
Mon problème, c'est que si l'image 'over' n'a pas été chargé et que je survole un lien-image, le navigateur me remplace l'image par le texte contenu dans l'attribut 'alt'. Ainsi, j'ai rajouté la condition sur la valeur de newImage.complete mais cela semble ne pas fonctionner. Étrange car sur un autre site, le même script fonctionne.

Voyez-vous une erreur évidente que mes yeux de débutant auraient loupé ? Connaissez-vous un meilleur moyen de réaliser ce que je veux ?

Merci à vous ;)

28/11/2007, 10h37
le_chomeur

Salut, j'avais eu le même problème que toi , en utilisant la méthode "complete" essaye en utilisant la méthode "onload".
Sinon solution plus "propre" pour l'utilisateur qui navigue sur le site, utilise un préload de tes images :)

Coordialement ;)
28/11/2007, 10h39
SpaceFrog

un setTimeout mais pas esthétique ...

sinon il faut le temps deprechargement de l'image ...
comme le dit chom faut preloader au départ ...
28/11/2007, 13h09
Janitrix

Citation:

Envoyé par le_chomeur

Sinon solution plus "propre" pour l'utilisateur qui navigue sur le site, utilise un préload de tes images :)

Citation:

Envoyé par SpaceFrog

comme le dit chom faut preloader au départ ...

Hmmmm j'avais entendu parler de cette méthode mais je n'ai jamais vu de script. Je vais chercher, si jamais vous pouvez me donner plus de précision, ce serait sympa ;)

Merci à vous.

Alors plusieurs solution possible , la première et selon moi la plus propre, l'utilisation de css , plutot que de changer la source d'une image utilise des liens tel que :
Code:

1 2 3 4 5 6 7 8 9 10 11 <style type="text/css"> A.rollover { width: taille de ton image; height: taille de ton image; background: url(urlDeTonImage); } A.rollover:hover { background: url(urlDeTonImageSurvoll); } </style>
puis pour gèrer le préload, une petite astuce dans ta page html au tout début :

Code:

<img src="urlDeTonImageSurvoll" alt="" style="display:none;" />

ce qui aura pour effet de charger l'image dans le cache du navigateur , mais de ne pas l'afficher dans al page ...
et enfin le lien :

Code:

<a class="rollover" href="http://www.developpez.net/"></a>

sinon en javascript, a placer au tout début de ton script :
Code:

1 2 var monImage = new Image(); monImage.src = "urlDeTonImageSurvoll";
ce qui aura pour effet de lancer le chargement de l'image au début du chargement de la page ...

En espérant t'avoir aidé, bonne journée

28/11/2007, 19h16
Janitrix

Merci je vais vite essayer ça ;)

Tout à l'air de fonctionner pour le moment, les images ne sont plus remplacées par le texte alt. Voici le code final (j'utilise la libraire Prototype pour la gestion des évenements) :

Code:

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
43
44
45
46
47
48
function changerImage(event) {
	Event.stop(event);
	var image = Event.element(event).src;
 
	var newImage = new Image();
	newImage.src = image.substring(0, image.lastIndexOf('.')) + "-over.png";
 
	if(newImage.complete) {	
		Event.element(event).src = image.substring(0, image.lastIndexOf('.')) + "-over.png";
	}
}
 
function resetImage(event) {
	Event.stop(event);
	var image = Event.element(event).src;
 
	var newImage = new Image();
	newImage.src = image.substring(0, image.lastIndexOf('-')) + ".png";
 
	if(newImage.complete) {	
		Event.element(event).src = image.substring(0, image.lastIndexOf('-')) + ".png";
	}
}
 
function chargerImages() {
	var images = document.getElementsByClassName('aimage');
 
	var length = images.length;
 
	for(var i = 0; i < length; i++) {	
		var newImage = new Image();
		newImage.src = images[i].src.substring(0, images[i].src.lastIndexOf('.')) + "-over.png";		
	}
}
 
function chargerEvenements() {
	var images = document.getElementsByClassName('aimage');
 
	var length = images.length;
 
	for(var i = 0; i < length; i++) {		
		Event.observe(images[i], 'mouseover', changerImage);
		Event.observe(images[i], 'mouseout', resetImage);	
	}
}
 
Event.observe(window, 'load', chargerImages, false);
Event.observe(window, 'load', chargerEvenements, false);

J'ai séparé le chargement des images et l'ajout des évenements, sinon cela ne fonctionnait toujours pas. Merci à vous ;), j'espère ne plus revoir ces textes alt :aie: