11523 sujets

JavaScript, DOM et API Web HTML5

Préchargement d'images no body [résolu en CSS]

Bonjour,

Pour faire suite à mon post (voir ici)http://forum.alsacreations.com/topic-4-27247-1-Un-rollover-CSS-assez-etonnant.html) je cherche un script de préchargement des images bien propre qui ne soit pas dans la balise body (paass bien) et qui soit de préférence accessible.

Ceci pour garder une stabilité des images avec le rollover CSS qui ont tendances parfois à disparaitrent...

Si quelqu'un à une idée je suis preneur, merci d'avance, je sens que c'est une très bonne piste
Modifié par Samuel Berg (13 Jul 2007 - 11:31)
Tu mets les deux états de l'image dans la meme image et quand tu fais un :hover (rollover) tu changes juste le background-position de l'image.
Résultat :
- Ton probleme est résolu
- Moins de hits sur le serveur, et le poids final peut en etre réduits
et utilise du PNG 8bits c'est plus léger que du Gif 8Bits (si tu as de la transparence)
Une solution avec deux images :

Repérer dans le document un élément identifié #tel_element qui n'a pas de background-image et

#tel_element {
background:url(image_pour_survol.png) no-repeat 40000px 40000px;
}


Cela fonctionne très bien, on trouve facilement des éléments identifiés sans background, ne serait ce que les ancrages des liens d'accès directs par exemple.

Evidemment si l'opération doit être multipliée moultes fois alors ça risque d'être chaud Smiley cligne

Mais là c'est à chacun de voir jusqu'à quel point il veut être déraisonnable Smiley lol
Non j'adore la solution avec le CSS d'autant qu'avec une seule image c'est résolu et merci pour le temps de chargement.

Il faut juste avoir un png transparent après jouer avec les background (pas les border parce que ça décalle d'un pixel au rollover).

Du coup plutôt que de faire doublon j'utilise mon texte, j'ai trouvé une police universelle à une taille bien propre (en pixel je sais) ce qui me donne un vrai menu rollover avec une vrai liste à puce sans masquage de texte.

Mon problème dans ce cas précis est que le texte est en haut dans le "block" (centré pour parer aux petits changements de taille possible entre Os et navigateurs) et que je le voudrais en bas.

Je ne sais pas comment le faire redescendre la canaille.

#menu ul {
	margin: 0 !important; }
	
#menu li {
	display: inline !important;
	float: left;
	margin: 10px 2px 0 2px;
	text-align: center;	 }	

#menu a {	
	background: #fff;
	color: #f63;
	display: block;
	height: 111px;
	width: 90px;
	font-size: 15px;
	font-weight: bold;	 }

a.coincoin {
	background: #fff url(../images/m1.gif) top left no-repeat !important;
	color: #f63; }
	
a.coincoin:hover {
	background: #f63 url(../images/m1.gif) top left no-repeat !important;
	color: #fff !important; }

Modifié par Samuel Berg (13 Jul 2007 - 10:55)
J'ai trouvé la solution 


#menu li {
	display: inline !important;
	float: left;
	margin: 10px 2px 0 2px;
	text-align: center;	 }	

#menu a {	
 	background: #fff;
	color: #000;
	padding: 90px 0 0 0;
	display: block;
	height: 21px;
	width: 90px;
	font-size: 15px;
	font-weight: bold;	 }

#menu a:hover {
	background: #fc3;
	color: #fff; }	

#menu a.coincoin {
	background: #fff url(../images/m1.gif) top left no-repeat !important;
	color: #000; }

#menu a.coincoin:hover {
	background: #fc3 url(../images/m1.gif) top left no-repeat !important;
	color: #fff;} }


Cette solution à l'avantage :

- Une seule image pour le rollover (chargement, pas de problèmes de stabilité)
- Le block permet d'avoir une zone carré pour cliquer
- Le texte est en bas sous l'image
- Le rollover est en CSS sans décalage
- Respect des contrastes color et background pour les moteurs qui considère d'un mauvais oeil les "transparent" souvent utilisés pour du cloaking
Modifié par Samuel Berg (13 Jul 2007 - 11:30)
Sujet clos
Aller à