28173 sujets

CSS et mise en forme, CSS3

[Resolu] Image Roll over

Pages :
Bonjour,

J'ai vu les tutos pour une image unique, afin d'éviter le chargement de l'image lors du passage de la souris.

Mon problème c'est que j'ai un menu de 6 images et de 6 autres images en hover.

Evidement comme vous le savez j'ai un problème de chargement qui vient lorsque la souris passe dessus.

Donc une 1s de blanc, je n'ose pas imaginer ceux qui sont en 56k.

Une solution ? (je ne veux pas mettre d'image unique à mon menu)
Modifié par kouiny (21 Nov 2006 - 21:51)
Parce que je n'ai pas d'image unique de fond, elles sont tous différentes. j'en ai 12. (6 et 6 diférentes)
Et mes 12 images sont en images de fond.
Je viens de regarder le code javascript, il faut mettre dans le code le nom de l'image dans <img> mais j'en ai pas étant en image de fond.
Salut

alors raison de plus pour utiliser la technique d'image double qu'indique Raphaël. Donc 6 images comprennant chacune les deux états de ton rollover.

Parce que autant c'est assez facile de gérer le rollover 2 images sans cette technique quand il n'y a qu'un seul couple d'images, autant dans ton cas c'est un coup à être dépassé par les évènements.
Si tu as tes images en background tu ne peux pas faire de preload, c'est soit tu les mets dans des balises img soit tu restes avec tes temps de chargement...

Je ne vois que la triche :
Utilises le javascript et met tes images dans le html avec comme propriété display:none, comme ça il va quand meme les charger et peut être que le css ne relancera pas un chargement mais les reprendra direct...
Je crois que le mieux c'est de ne pas les mettres en images fond, mettre la balise <img>.

C'est la solution la plus simple non ?
Bon je te donne la solution css pure même si encore une fois dans ton cas je la trouve trop lourde.

Il faut partir d'un document html réel.

. tu repères 6 types d'éléments (de préférence uniques, avec un id) qui n'ont pas d'images background et qui n'en auront pas besoin.

. tu appliques à chacun un background avec les images servant dans l'état suvolé du rollover.

. dans les propriété du background tu mets une position telle que l'image ne sera pas visible :

#element_quelconque1 {
background:url(image_survol1.jpg) no-repeat 500000px 500000px;
}

#element_quelconque2 {
background:url(image_survol2.jpg) no-repeat 500000px 500000px;
}

etc...

Modifié par clb56 (21 Nov 2006 - 11:36)
voici le code actuelle que j'ai pour mon menu vertical css :

Modifié par kouiny (21 Nov 2006 - 23:08)
je l'ai testé hier tard dans la nuit, c'est pareil il y a un temps d'attente.

Avec comme css :

#menu { float: left; }
ul#menu li { margin: 0 0 5px 0 ; padding: 0 ;}

ul#menu li a { display: block ; width: 130px ; height: 30px; line-height: 30px ; color: #000 ; text-indent: 40px ; text-decoration: none ; background: url(images/menu/savoir.jpg) no-repeat 0 0 ; }
ul#menu li a:hover { background: url(images/menu/savoir2.jpg) no-repeat 0 0px ; }

ul#menu li#choc a { display: block ; width: 130px ; height: 30px; line-height: 30px ; color: #000 ; text-indent: 40px ; text-decoration: none ; background: url(images/menu/choc.jpg) no-repeat 0 0 ; }
ul#menu li#choc a:hover { background: url(images/menu/choc2.jpg) no-repeat 0 0px ; }

ul#menu li#meteo a { display: block ; width: 130px ; height: 30px; line-height: 30px ; color: #000 ; text-indent: 40px ; text-decoration: none ; background: url(images/menu/meteo.jpg) no-repeat 0 0 ; }
ul#menu li#meteo a:hover { background: url(images/menu/choc2.jpg) no-repeat 0 0px ; }

ul#menu li#horoscope a { display: block ; width: 130px ; height: 30px; line-height: 30px ; color: #000 ; text-indent: 40px ; text-decoration: none ; background: url(images/menu/horoscope.jpg) no-repeat 0 0 ; }
ul#menu li#horoscope a:hover { background: url(images/menu/horoscope2.jpg) no-repeat 0 0px ; }

ul#menu li#tv a { display: block ; width: 130px ; height: 30px; line-height: 30px ; color: #000 ; text-indent: 40px ; text-decoration: none ; background: url(images/menu/tv.jpg) no-repeat 0 0 ; }
ul#menu li#tv a:hover { background: url(images/menu/tv2.jpg) no-repeat 0 0px ; }

ul#menu li#annonce a { display: block ; width: 130px ; height: 30px; line-height: 30px ; color: #000 ; text-indent: 40px ; text-decoration: none ; background: url(images/menu/annonce.jpg) no-repeat 0 0 ; }
ul#menu li#annonce a:hover { background: url(images/menu/annonce2.jpg) no-repeat 0 0px ; }
Mais je prend l'image unique, l'effet clignotement, pour le chargement de l'image se fait avec le hover donc on aura toujours le chargement long.
Je ne comprend pas très bien ce que tu fais.

La 1ère chose à avoir c'est l'image unique et dans ton code il y a toujours deux images.

par exemple pour "savoir" ce qu'il faut c'est :

upload/97-savoirdouble.jpg

Qui est une seule image, et c'est là dessus qu'on travaille.
En fait, tu n'as plus deux images mais une seule qui contient les deux ! Il n'y aura pas alors de chargement mais juste un déplacement de l'image ( c'est clair ? )
Comment fait-on pour identifier chaque <li> pour qu'ils soient différents ?

ul#menu li a { 
         ul#menu li a:hover {


On met des dentifiants dans chaque <li>, mai du côté du css on rajoute où l'identifiant, comme celà ?

ul#menu li#choc a {
         ul#menu li#choc a:hover {

Modifié par kouiny (21 Nov 2006 - 18:21)
Ah mon avis il y a quelque chose que tu n'as pas compris, parce que dans ta css il y a toujours deux images différentes par lien. donc toujours douze images en tout.

Tu ne dois avoir que six images en tout, c'est cela que tu dois avant tout comprendre.

Il me semble pourtant que les explications ci dessus sont claires. Tu devrais sans doute revoir tout cela tranquillement et essayer de comprendre de quoi il en retourne
Pages :
Sujet clos
Aller à