Préchargement image suite à un rollover + clik

Version imprimable

21/11/2006, 00h03
Oli78

Préchargement image suite à un rollover + clik

Bonsoir,

J'ai utilisé une méthode en CSS pour reproduire l'effet de rollover sur un bouton de menu. Mon rollover marche très bien, aucun effet de chargement, tout va bien. Mais j'aimerai que lorsque l'on clique sur le bouton, l'état de survol du bouton reste actif. Cela, vous vous en doutez, pour que l'internaute puisse savoir dans quelle rubrique il se trouve.

Hors lorsque je clique sur mon bouton, il y a un petit delais de chargement de l'image qui est visible et donc non esthetique. Pour pallié à ce probleme j'ai mit l'image en dur dans le code html mais rien n'y fait le temps de chargement reste le même.

Voici les sources pour l'apparition de l'image lors du clique de l'utilisateur :

(X)HTML :

Code:

<li class="agence-on"><img src="images/bt-agence-on.gif" alt="Rubrique agence" width="30" height="300" /></li>

CSS :

Code:

li.agence-on{background: url(../images/bt-agence-on.gif) no-repeat 0 0;width : 30px ; height : 300px ; margin : 0 0 0 1px ;display : block;}

Merci d'avance
21/11/2006, 09h19
trotters213

:salut:
Tu appelles 2 fois l'image : dans le CSSet le HTML, ça ne peut pas venir de là ?
21/11/2006, 10h28
Oli78

euh non j'avai lu qu'il était utile de mettre l'image en brut dans le html pour réduire le temps de chargement de l'image (l'image étant alors préchargée dans le navigateur) mais que la mette en brut ou pas sa ne change rien.

Je vais vous envoyer le lien, peut-être que ce sera plus parlant.

http://agence.avalone.free.fr

Ce clignotement est un problème propre à IE, il faut précharger tes images au préalable (et encore ce n'est pas dit que ça fonctionne correctement).

Code:

<body onload="MM_preloadImages('images/tonimage1.jpg','images/tonimage2.jpg',...)">
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function MM_preloadImages(){ var d=document; if(d.images){ if(!d.MM_p) d.MM_p = new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i]; } } }

21/11/2006, 11h27
Oli78

Bien, merci pour la réponse (et disoulé d'avoir mal placé le sujet).

Je testerai ceci ce soir étant donné qu'au taff...pour ne je sait quelle raison je n'ai plus ce problème de clignotement alors que je vide constamment mon cache IE et FF...étrange lol
21/11/2006, 11h29
ctrl+z

Bonjour,

Il existe une autre solution,
Code à ajouter juste avant le menu

Code:

<img src="images.jpg" style="display:none">

Au chargement de la page, l'image(s) est automatiquement chargée.
21/11/2006, 11h48
Oli78

J'avai déjà essayé cette méthode il me semble mais pas en préchargeant les images en dehors du menu.

J'essayerai vos solutions dès ce soir.

Merci encore
21/11/2006, 19h48
Oli78

Je viens de tester la méthode du JS qui ne change rien sous IE :s et pareil pour le display:none sur les images en brut :s
22/11/2006, 08h33
ctrl+z

Citation:

Envoyé par Oli78

pareil pour le display:none sur les images en brut

c'est bizard... parce que je l'utilise actuellement et ça fonctionne très bien.

hum, ton idée est bien de préchargé l'image en dehors du menu n'est ce pas ?

Code:

1
2
3
4
5
6
7
<div id="cont"> 
  <img src="images/bt-agence-on.gif" alt="Rubrique accueil" width="30" height="300" style="display:none"/>
  <ul id="menu">    
    <li><a href="agence.html" class="agence" title="Acc&eacute;dez &agrave; la page agence"></a></li>
    ...
  </ul>
</div>

Code:

1
2
3
<!-- précharge une image -->
<img src="image_over.gif" style="display:none">
<a href="#" border="0" onmouseover="this.style.background='url(image_over.gif)'" onmouseout="this.style.background='url(image.gif)'">bouton</a>