28172 sujets

CSS et mise en forme, CSS3

Info bulle avec image SANS préchargement

Bonjour

Je souhaite empecher le prechargement des images dans mon info bulle.
Car les photos font entre 20 et 40Ko et je peux avoir 40 ou 60 info bulles sur la même page si quelqu'un à la solution !

CODE CSS


a.info span {
   display: none; /* on masque l'infobulle */
}
a.info:hover {
	background: none; /* correction d'un bug IE */
	z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
	cursor: inherit; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
	display: inline; /* on affiche l'infobulle */
	position: absolute;
	white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
	top: 30px; /* on positionne notre infobulle */
	left: 20px;
	background: white;
	color: #3c7faf;
	padding: 3px;
	border: 1px solid blue;
	border-left: 15px solid;
	border-left-color: #9966FF;
}


CODE HTML

<td width="110" align="left"><a href="#" class="info"><img src="/multimedia/picto/Loupe.gif" border="0">
<span>nom du produit &nbsp;&nbsp; référence<br><img src="URL IMAGE"></span></a>
&nbsp;Référence</td>'
Remay a écrit :
Salut,
Regarde cet exemple, passe ta souris sur les liens et constate.
Le tutoriel qui explique comment réaliser cet effet est ici.


Merci pour ton aide mais j'avais déja testé ce framework, le problème c'est qu'il rentre en conflit sous IE avec mon menu en javascript ...

Il y a vraiment pas moyen en CSS d'eviter le préchargement des images dans l'info bulle ?
Modérateur
Bonjour,

En principe , si tu place tes images en display:none; elle ne devrait pas etre préchargé par le navigateur .

J'avais une page test quelque part aidant a mettre en evidence si l'image etait préchargé ou non , dés que je remet la main dessus je fournis le lien.

Je peut déja te dire que tout la majorité des navigateurs vont quand même chargé les elements 'gommé' par le css , il se borneront simplement a ne pas les affichées .

Pour ne pas précharger tes images , tu pourrait a l'aide de javascript remplir le champs source uniquement a l'evenement onmouseover.

GC
Modérateur
Bonsoir,

La page test que j'evoquais est sans intérêt , le seul navigateur qui ne chargé pas les images en display:none était netscape Smiley smile .

Pour en revenir a ton probleme une nouvelle page test :

http://gcyrillus.free.fr/essai/rollover-sans-prechargement-des-images.html

La version avec js en appuie est effective , quant a la version css en contenu généré , je n'en suit pas convaincue , a priori la feuille de style rempli sa mission et précharge bien les images .

Conclusion : javascript obligatoire.

++
Modifié par gcyrillus (16 Feb 2009 - 01:12)
Merci pour votre aide

J'ai donc utilisé jQuery avec un petit plug-in de CSS. cela fonctionne très bien.
J'ai du un peu bidouillé mon Menu en JS pour qu'il n'entre plus en conflit avec jQuery mais au moins c'est fait une bonne fois pour toutes !! à moi les beaux effets !!!

Merci à tous !
Sujet clos
Aller à