Discussion :

[Janitrix]

Bonjour,

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

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
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

[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

[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 ...

[Janitrix]

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

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.

[le_chomeur]

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 :

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

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 :

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

<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 :

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

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

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

Code :

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

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

[Janitrix]

Merci je vais vite essayer ça

[Janitrix]

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 :

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
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