Préchargement image hover.

**5c0rPi0n** · 24/03/2010, 20h13

Bonsoir à tous.

Voilà je me trouve confronté à un problème car je développe un site en html-php. Cependant, je n'ai pas beaucoup de connaissance en javascript ( connaissance en C, donc syntaxe mais rien d'autre ), et en fait j'ai un soucis sur un script de préchargement d'image d'hover.
Je m'explique.
Mon menu est composé d'images comme boutons, et en passant la souris dessus d'autres images se chargent (hover). Cependant, le temps de chargement des images hover font qu'il y a un petit blanc assez gênant.
je vous donne l'url du site, vous pourrez juger par vous même : http://www.altea-construction.fr. J'ai trouvé des millions de scripts différents, en JS, PHP, CSS.... Cependant je n'arrive pas à les faire marcher.

Aurez-vous un quelconque script QUI MARCHE de préchargement d'image sur la page ?

Celui que j'ai actuellement :

prechargement.js

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
function preload() 
{ 
	var args = preload.arguments; 
	imgs = new Array();
	for(x=0; x<args.length; x++) 
	{
		imgs[x] = new Image();
		imgs[x].src = args[x];
	}
}

n'importe quelle page...

Code :

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

1
2
3
4
5
6
7
 
<head>
[...]
<script src="prechargement.js" type="text/javascript"> </script>
[...]
</head>
<body onload="preload('http://www.altea-construction.fr/images/menu/bouton1Hover.jpg','http://www.altea-construction.fr/images/menu/bouton2Hover.jpg','http://www.altea-construction.fr/images/menu/bouton3Hover.jpg','http://www.altea-construction.fr/images/menu/bouton4Hover.jpg','http://www.altea-construction.fr/images/menu/bouton5Hover.jpg','http://www.altea-construction.fr/images/menu/bouton6Hover.jpg','http://www.altea-construction.fr/images/menu/bouton7Hover.jpg','http://www.altea-construction.fr/images/menu/bouton8Hover.jpg')">

- Pourquoi ce script ne marche pas ?
- Pourquoi sur tous les scripts que je choppe sur le net aucun ne marche :'-(
- Une idée ??

Merci par avance, bonne soirée à tous.

Cordialement,

**SpaceFrog** · 24/03/2010, 22h06

les images sont preloadées ...
faut voir après comment tu les utilises ...
si tu ne passes pas par le src de ton array ... ça sert à rien

**5c0rPi0n** · 27/03/2010, 00h50

Merci de ta réponse rapide. Cependant, comme je le disais, je ne m'y connait pas du tout côté JS... et autant j'ai à peu près compris ce que tu m'as dit, autant je ne vois pas du tout le rapport avec mon code ?

De meilleures explications ? besoin d'une autre partie de code pour me renseigner sur ce que je dois ajouter ?

Et sinon, ce script devrait marcher ?

Merci pour ces futures réponses, bonne soirée !

Cordialement,

P.S.: Ce que j'ai à peu près comprit de ce script, c'est qu'il crée un tableau imgs de la taille des paramètres de la fonction preload(), et dont chaque occurence est un paramètre, donc une image. Puis il les affiche toutes avec new image() ? Dans ce cas, où est le problème ?

**SpaceFrog** · 27/03/2010, 09h38

non pas exactement...

là tu crées un array et tu mets les images dedans...
à aucun moment il n'est question d'affichage dans le code.

tu as le html, là ou les images doivent s'aifficher ?

**5c0rPi0n** · 27/03/2010, 15h51

Merci de ta réponse rapide. Je peux te mettre l'html, mais les images sont tout simplement affichées avec du css ( background ) sur un a:hover... Vois plutot..

mon menu en html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<ul id="menu"> <!-- Menu -->
	<li id="bouton1"><a href="index.php">Accueil</a></li>
	<li id="bouton2"><a href="presentation.php">Présentation</a></li>
	<li id="bouton3"><a href="projetsEnCours.php">Projets en cours</a></li>
	<li id="bouton4"><a href="projetsTermines.php">Projets terminés</a></li>
	<li id="bouton5"><a href="decoration.php">Décoration</a></li>
	<li id="bouton6"><a href="amenagementCuisine.php">Aménagement Cuisine</a></li>
	<li id="bouton7"><a href="contact.php">Contact</a></li>
	<li id="bouton8"><a href="livreDOr.php">Livre d'or</a></li>
</ul>

le css de mon menu :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
 
#menu
{
	display : block;
	position : absolute;
	padding : 0;
	margin-left : 224px;
	margin-top : 198px;
	width : 755px;
	height : 37px;
}
 
#menu li
{
	list-style-type : none;
	background-repeat : no-repeat;
	float : left;
	width : 94px;
	height : 35px;
	text-align : center;
}
 
#menu li a 
{
	display : block;
	width : 89px;
	text-decoration : none;
	color : #ffff80;
	font-weight : bold;
	font-family : Verdana;
	font-size : 12px;
}
 
#bouton1 { background-image : url("images/menu/bouton1.jpg"); }
#bouton2 { background-image : url("images/menu/bouton2.jpg"); }
#bouton3 { background-image : url("images/menu/bouton3.jpg"); }
#bouton4 { background-image : url("images/menu/bouton4.jpg"); }
#bouton5 { background-image : url("images/menu/bouton5.jpg"); }
#bouton6 { background-image : url("images/menu/bouton6.jpg"); }
#bouton7 { background-image : url("images/menu/bouton7.jpg"); }
#bouton8 { background-image : url("images/menu/bouton8.jpg"); }
 
#bouton1actif {	background-image : url("images/menu/bouton1.jpg"); }
#bouton2actif {	background-image : url("images/menu/bouton2.jpg"); }
#bouton3actif {	background-image : url("images/menu/bouton3.jpg"); }
#bouton4actif {	background-image : url("images/menu/bouton4.jpg"); }
#bouton5actif {	background-image : url("images/menu/bouton5.jpg"); }
#bouton6actif {	background-image : url("images/menu/bouton6.jpg"); }
#bouton7actif {	background-image : url("images/menu/bouton7.jpg"); }
#bouton8actif { background-image : url("images/menu/bouton8.jpg"); }
 
#bouton1 a { height : 23px; padding-top : 10px; }
#bouton2 a { height : 23px; padding-top : 10px; }
#bouton3 a { height : 30px; padding-top : 3px; }
#bouton4 a { height : 30px; padding-top : 3px;  margin-left : 1px !important; }
#bouton5 a { height : 23px; padding-top : 10px; margin-left : 2px !important; }
#bouton6 a { height : 30px; padding-top : 3px;  margin-left : 1px !important; font-size : 11px !important; }
#bouton7 a { height : 23px; padding-top : 10px; margin-left : 2px !important; }
#bouton8 a { height : 23px; padding-top : 10px; margin-left : 2px !important; }
 
 
#bouton1actif a { color : #e19f4f !important; height : 23px; padding-top : 10px; }
#bouton2actif a { color : #e19f4f !important; height : 23px; padding-top : 10px; }
#bouton3actif a { color : #e19f4f !important; height : 30px; padding-top : 3px;	}
#bouton4actif a { color : #e19f4f !important; height : 30px; padding-top : 3px;  margin-left : 1px !important; }
#bouton5actif a { color : #e19f4f !important; height : 23px; padding-top : 10px; margin-left : 2px !important; }
#bouton6actif a { color : #e19f4f !important; height : 30px; padding-top : 3px;  margin-left : 1px !important; font-size : 11px !important; }
#bouton7actif a { color : #e19f4f !important; height : 23px; padding-top : 10px; margin-left : 2px !important; }
#bouton8actif a { color : #e19f4f !important; height : 23px; padding-top : 10px; margin-left : 2px !important; }
 
 
#bouton1:hover { background-image : url("images/menu/bouton1Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton2:hover { background-image : url("images/menu/bouton2Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton3:hover { background-image : url("images/menu/bouton3Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton4:hover { background-image : url("images/menu/bouton4Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton5:hover { background-image : url("images/menu/bouton5Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton6:hover { background-image : url("images/menu/bouton6Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton7:hover { background-image : url("images/menu/bouton7Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
#bouton8:hover { background-image : url("images/menu/bouton8Hover.jpg"); background-position : left top; background-repeat : no-repeat;	height : 47px; }
 
#bouton1:hover a { height : 30px; padding-top : 16px; }
#bouton2:hover a { height : 30px; padding-top : 16px; }
#bouton3:hover a { height : 38px; padding-top : 8px; }
#bouton4:hover a { height : 38px; padding-top : 8px; }
#bouton5:hover a { height : 30px; padding-top : 16px; }
#bouton6:hover a { height : 38px; padding-top : 8px; }
#bouton7:hover a { height : 30px; padding-top : 16px; }
#bouton8:hover a { height : 30px; padding-top : 16px; }

Donc effectivement, je n'utilise plus le JS après le body onload... Je suis perdu sur ce que je dois faire :-S
Mais même si ce script ne marche pas, y'a pas un autre moyen en js ?

Merci !

**SpaceFrog** · 27/03/2010, 20h03

ben déja si dans le css il y avait les mêmes path que dans le preload ..
mais là dans le preload tu mets des url absolues et dans le css des relatives ...

Préchargement image hover.

JavaScript

Vue hybride

Discussions similaires

Partager

Partager