Préchargement image suite à un rollover + clik

**Oli78** · 21/11/2006, 00h03

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

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

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

CSS :

Code CSS :

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

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

**trotters213** · 21/11/2006, 09h19

Tu appelles 2 fois l'image : dans le CSSet le HTML, ça ne peut pas venir de là ?

**Oli78** · 21/11/2006, 10h28

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

**Bisûnûrs** · 21/11/2006, 10h42

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

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

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

Code Javascript :

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

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];
         }
   }
}

**Oli78** · 21/11/2006, 11h27

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

**ctrl+z** · 21/11/2006, 11h29

Bonjour,

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

Code :

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

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

Au chargement de la page, l'image(s) est automatiquement chargée.

**Oli78** · 21/11/2006, 11h48

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

**Oli78** · 21/11/2006, 19h48

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

**ctrl+z** · 22/11/2006, 08h33

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.

**Oli78** · 22/11/2006, 10h12

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

Code HTML :

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

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>

**ctrl+z** · 22/11/2006, 12h33

Code HTML :

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

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>

Préchargement image suite à un rollover + clik

JavaScript

Discussions similaires

Partager

Partager