28173 sujets

CSS et mise en forme, CSS3

Pb background en cache sous IE

Bonsoir a tous.

J'utilise ce menu déroulant
http://css.alsacreations.com/modelesmenus/hd1.htm

J'utilise en même temps la technique de rollover avec une seule image.

Quand on utilise la fonction de gestion du cache dans IE : rafraichir "a chaque visite de la page". Il y a un effet de clignotement sur mes background-image.
J'avais vu une solution qqpart mais pas moyen de remettre la main dessus.

pouvez vous m'aider?
Modifié par JiDai (19 Jul 2006 - 18:32)
JiDai a écrit :
Bonsoir a tous.

J'utilise ce menu déroulant
http://css.alsacreations.com/modelesmenus/hd1.htm

J'utilise en même temps la technique de rollover avec une seule image.

Quand on utilise la fonction de gestion du cache dans IE : rafraichir "a chaque visite de la page". Il y a un effet de clignotement sur mes background-image.
J'avais vu une solution qqpart mais pas moyen de remettre la main dessus.

pouvez vous m'aider?

Par défaut, c'est sur "automatiquement". Quel intérêt de le changer ? Smiley lol
Il se peut qu'un utilisateur le change pour je ne sais quelle raison. La preuve, je bossais sur un ordinateur qui n'avait pas l'option sur automatique Smiley cligne
JiDai a écrit :
Il y a un effet de clignotement sur mes background-image.


Je ne comprends pas la question.

Il y a un clignotement quand, à quelle occasion ?????????
Je remet le bout de code que j'avais posté sur l'autre topic à titre d'exemple:

<html>
<head>
<title>Test</title>
<style>
.test {
background: url('images/fond.jpg');
padding: 10px;
}

.test2 {
background: #ff0000;
padding: 10px;
}

</style>
<script>
function change() {
	var bouton = document.getElementById("bouton");
	bouton.getElementsByTagName("td")[0].setAttribute("className", "test");
	bouton.getElementsByTagName("td")[1].setAttribute("className", "test");
	bouton.getElementsByTagName("td")[2].setAttribute("className", "test");
}

function rechange() {
	var bouton = document.getElementById("bouton");
	bouton.getElementsByTagName("td")[0].setAttribute("className", "test2");
	bouton.getElementsByTagName("td")[1].setAttribute("className", "test2");
	bouton.getElementsByTagName("td")[2].setAttribute("className", "test2");
}
</script>
</head>

<body>
<table id="bouton" onmouseover="change()" onmouseout="rechange()" cellpadding="0" cellspacing="5" border="0">
<tr>
<td>L</td>
<td>Test</td>
<td>R</td>
</tr>
</table>
</body>
</html>


Essaies de mettre une image en fond (enfin dans la classe test à la place de la mienne), et dans IE, va dans option internet > fichiers temporaires > paramètre et sélectionne "à chaque visite de la page". Passes la souris sur le bouton, résultat, un clignotement désagréable (100% IE bien entendu).
c pas vraiment un clignotement
Qd je passe la souris dessus le IE recharge le background, dc pdt ce laps de temps, rien n'est affiché soit un fond blanc.

EDIT: Le menu de pixmania a ce genre de probleme
Modifié par JiDai (19 Jul 2006 - 23:20)
ah ben voilà il suffisait de le dire :

Il y a un clignotement lors des effets de survol avec changement d'image background sur les liens.

Ce qui est effectivement normal si le cache est vidé à chaque visite.

Par contre j'ai du mal à croire que ça se produise dans le cas d'effet de survol avec image unique.

Mais effectivement avec deux images oui. Donc ce qui est nécessaire c'est que l'image servant au background de l'état survolé soit chargé sans être visible à l'ouverture de toutes les pages.

Est ce bien cela la question ?
Modifié par clb56 (19 Jul 2006 - 23:29)
JiDai a écrit :

J'utilise en même temps la technique de rollover avec une seule image.


J'ai une image unique et mm une seule pour tout le menu entier Smiley smile

C'est ca le probleme, c'est que pourkoi recharge t il le background a chaque survol du bouton alors que c'est la même image......
Il ne recharge pas. C'est sans doute un autre phénomène qui se passe.

Là il faudrait le code complet.

je me demande si ça n'a pas quelque chose à voir avec le haslayout (pas sur, à vérifier)
Bonjour,

JiDai a écrit :


J'ai une image unique et mm une seule pour tout le menu entier Smiley smile

- exemple alsa avec une image par lien

C'est ca le probleme, c'est que pourkoi recharge t il le background a chaque survol du bouton alors que c'est la même image......

Dans ce cas, la solution est peut-être une image complète pour le menu et des images partielles seulement pour le survol. Le survol reste affecté d'un retard (bas débit) mais le fond blanc désagréable n'est plus :
- exemple pompage avec une image en arrière-plan de tout le menu
Modifié par chmel (20 Jul 2006 - 23:25)
Le premier lien n'est pas bon non plus. On voit le clignotement lorsque la souris passe dessus sous IE...

Le deuxième lien a l'air interessant par contre. Je vais y jeter un coup d'oeil Smiley biggrin
Salut à tous,

Il y a quelques jours j'ai trouvé une méthode pour éviter le clignotement. Bon elle vaut ce qu'elle vaut hein, mais elle a le mérite de fonctionner. Un exemple simple:

J'ai une cellule de tableau auquel j'applique le style qui devrait etre activé lors du passage de la souris:

<td style="background-image:url(monimage.jpg)"></td>


Au sein de la cellule, je rajoute une balise neutre, span par exemple, qui doit prendre les dimensions exactes de la cellule. J'applique un style à ce span, de manière à ce qu'il recouvre la cellule.

<td style="background-image:url(monimage.jpg);width:100px;height:100px">
<span style="display:block;width:100px;height:100px; background-image:url(monimage2.jpg);"></span>
</td>


Du coup, le background du span recouvre celui de la cellule. Après il suffit de faire intervenir un peu de javascript. Avec un onmouseover sur la cellule du tableau, il suffit de modifier le style du span avec le DOM, et de remplacer son style par un truc du genre: background: transparent.

Et ça marche niquel sous IE et Firefox =)
Voilà @+
Sujet clos
Aller à