Precharger les images sur un roll over ?

Bonsoir a tous et merci de m'accueillir sur votre forum...

Je recherche comment ne pas subir de chargement de mes images roll over.
Actuellement en formation, désolé si ma question parait stupide...

Un prof m'a conseillé d'utiliser les css afin de réaliser mon roll over... Ce que j'ai fait a:link a:visited a:hover et compagnie
Jusqu'ici tout va bien, aucuns soucis dans les différents navigateurs.

Seulement je remarque qu'a l'ouverture de Firefox par exemple celui m'initialise les images et me donne donc un bel au niveau de mes images du type je disparais et je réapparais !

J'en déduis donc que ces fameuses images nécessiteraient d'être pré-chargées afin de ne pas avoir a se mettre en place de cette façon. J'ai fouillé un peu mais je ne trouve pas la solution...

Encore une fois je ne sais pas si je suis assez clair dans mon explication car je débute et je ne maîtrise certainement pas les termes appropriés.

Voici la page en question...
http://www.jazzyvince.com/site/emelbayrammenu

Merci pour vos avis...

Bonsoir,

Pour commencer, le premier problème que tu as c'est que tes liens sont vides. Mais genre très vides, désespérément vides, un peu comme ça:

<a href="#" id="emelfolio1"></a>

Alors qu'on attendrait un CONTENU comme ceci:

<a href="#" id="emelfolio1">
  Publicité: Debodeby FW10
</a>

Cela dans le but d'avoir des liens accessibles et référençables.

Alors bien sûr quand on veut faire des rollover en CSS (pour pas se prendre la tête), on se retrouve à mettre des contenus (images portant un texte significatif) dans la décoration (les CSS) au lieu de les mettre dans le contenu (le HTML). Bah euh c'est pas bien. Il faudrait plutôt avoir:

<a href="#" id="emelfolio1">
  <img alt="Publicité: Debodeby FW10" src="emelfolio1.jpg">
</a>

et là, tu peux réaliser ton rollover en JavaScript (parce qu'il va falloir remplacer le src de l'image par une autre valeur, et que ça se fait en JavaScript). Et comme dans ce cas de figure tu utilises JavaScript, eh bien tu peux rajouter un petit script JS qui va faire le préchargement de tes images pour l'état survolé, tant qu'à faire.

Bon. Voilà pour la «bonne» manière de faire. Mais on doit pouvoir faire quelque chose de potable sans JavaScript malgré tout. Dont acte:

<a href="#" id="emelfolio1">
  <span class="deco"></span>
  <span class="text">Publicité: Debodeby FW10</span>
</a>

#foliomenu li {
  float: left;
  width: 149px;
  height: 100px;
  padding: 0 14px 14px 0;
  list-style: none;
}
#foliomenu a {
  display: block;
  position: relative;
  width: 149px;
  height: 100px;
  overflow: hidden;
  display:block;
}
#foliomenu .text {
  display: block;
  padding: 10px;
}
#foliomenu .deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 298px;
  height: 100px;
}
#foliomenu a:hover .deco, #foliomenu a:focus .deco {
  left: -149px;
}
#foliomenu #emelfolio1 {background: url(images/emelfolio1.jpg);}
...
#foliomenu #emelfolio3 {background: url(images/emelfolio18.jpg);}

Le principe ici est d'avoir une seule image qui combine l'état normal (à gauche) et l'état survolé (à droite), plutôt que deux images séparées. On place cette image en fond d'un SPAN vide, en absolu par dessus le contenu texte du lien. La partie qui dépasse est masquée. Puis, au survol du lien ou au focus (navigation au clavier), on décale le SPAN vide avec l'image vers la gauche, pour afficher la deuxième image.

Notes générales:
1. Les liens ont un contenu texte. Toujours.
2. Les techniques CSS qui cachent le texte d'un lien pour le remplacer par une image de fond posent toutes des problèmes d'accessibilité. Celle présentée ici est sans doute la moins problématique, mais je ne garantis pas qu'elle soit parfaite.
3. Ton code CSS est dix fois trop long. Tu répètes sans cesse les mêmes styles, pour des éléments d'une même «famille». Il faudrait au minimum utliser les classes pour factoriser les styles, ou bien (comme dans mon exemple ci-dessus) le sélecteur de descendant. Par ailleurs, lorsque tu appliques des styles à un lien, tu n'as pas besoin de répéter tous ces styles pour l'état :hover. Il suffit de spécifier ce qui change.
4. Le dernier LI de ta liste... ne devrait pas être un LI de cette liste. C'est un lien d'une nature toute différente. Il faudrait le placer en dehors de la liste, dans un paragraphe par exemple.

Merci de ton aide florent.
Effectivement comme tu as pu le constater ce n'est pas encore carré cette histoire
Je vais travailler dans le sens de ta réponse.

Hello,

Une méthode super simple en css existe pour ne plus avoir de problème de préload.
Il suffit que tes deux états soit sur la même image, ensuite tu n'a qu'a changer la position du background pour l'état :hover.

Regarde cet article : http://www.pompage.net/pompe/sprites/
Modifié par pfoofen (10 Jan 2010 - 11:27)

Merci beaucoup pfoofen !

J'ai vu mon peu d'expérience trouvé quelques difficultés a décoder ton message florent mais entre temps j'ai trouvé ceci :


<style type="text/css">
<!--
a {
float: left;
padding-right: 10px;
text-indent: -9999px;
}

a.rollover { /* On applique les propriétés aux balises lien contenant la class ìrollover" */
display: block; /* On transforme notre balise lien inline en block */
height: 100px;
width: 149px;
background: url(images/emel1etover.jpg); /* L'url de l'image change selon vos dossiers */
background-repeat: no-repeat;
}

a.rollover:hover { /* Lors du survol des liens contenant la class ìrollover" */
background-position: 0% -100px; /* On change la position du fond lors du survol */
}
#imagedroite {
padding: 0px;
}
#conteneur {
width: 467px;
}
-->
</style>
</head>



<body>

<div id="conteneur">

<a href="#" title="Test d'image réactive" class="rollover">citron</a>
<a href="#" title="Test d'image réactive" class="rollover">tomato</a>
<a id="imagedroite" href="#" title="Test d'image réactive" class="rollover">tomato</a>



</div>


- - - - - - - - - - - - - -

ca fonctionne mais la par contre forcement des que je veux mettre un padding bottom a mes images ben je vois un morceau du hover qui apparaît... donc que ce soit a l'horizontale ou a la verticale ce système ne fonctionne qu'en admettant de n'avoir qu'une seule ligne d'images???
de plus je trouve du mal a créer une classe pour la dernière image de ma ligne...
En gros j'ai 5 lignes de 3 images, toutes ont un padding bottom de 10px et seulement les deux première un padding right de 10px... et je lutte pour faire ça je sais je sais cela n'est certainement pas d'un haut niveau mais bon faut bien commencer un jour...

En gros cela doit ressembler a l'image jointe.

Merci de votre aide.

Met un margin-bottom au lieu d'un padding-bottom tout simplement
Modifié par pfoofen (10 Jan 2010 - 12:46)

J'adore quand ca marche...

Merci bcp !

Pour le reste du code cela semble correct ???

Bah oué ça semble pas mal.
Vérifie juste que tu es bien le même résultat avec tout les navigateurs.

par contre si je comprend bien ça je vais devoir le répéter a chaque fois ? en changeant "a" par "b" car sinon comment puis je faire pour changer l'image (images/emel1etover.jpg) par (images/emel2etover.jpg) par exemple ???

c'est la que je ne comprend pas vraiment l'intérêt de la classe.....j'ai mal au crâne est ce normal ???


a {
float: left;
padding-right: 10px;
text-indent: -9999px;
}

a.rollover { /* On applique les propriétés aux balises lien contenant la class ìrollover" */
display: block; /* On transforme notre balise lien inline en block */
height: 100px;
width: 149px;
background: url(images/emel1etover.jpg); /* L'url de l'image change selon vos dossiers */
background-repeat: no-repeat;
}

a.rollover:hover { /* Lors du survol des liens contenant la class ìrollover" */
background-position: 0% -100px; /* On change la position du fond lors du survol */
}
#imagedroite {
padding: 0px;
}
#conteneur {
width: 467px;
}

La solution que j'ai donnée est complète, et meilleure que le bricolage à coup de text-indent négatif (à proscrire). Elle permet notamment d'avoir un texte visible si l'une ou l'autre image ne se charge pas (ce qui arrive pour tout un tas de raisons que je ne liste pas ici).

Par ailleurs, je constate que tu as de grosses lacunes en CSS en ce qui concerne les sélecteurs. Plutôt que quelqu'un passe une demi-heure à te rédiger un cours en réponse à tes questions, je te suggère de trouver un tutoriel pas trop mal fichu sur les sélecteurs CSS et de le lire attentivement.

héhé florent mais je suis bien d'accord avec toi et comme je l'ai précisé je débute
J'ai bien compris que ta solution était la plus professionnelle mais je t'assure que je n'arrive pas à la mettre en place, et crois moi c'est pas faute d'essayer et de torture mentale.

Je colle exactement le code que tu as écris, alors forcement je dois me planter en beauté quelque part mais cela me donne ceci avec ta solution :

#foliomenu {
width: 780px;
}

#foliomenu li {
float: left;
width: 149px;
height: 100px;
padding: 0 14px 14px 0;
list-style: none;
}
#foliomenu a {
display: block;
position: relative;
width: 149px;
height: 100px;
overflow: hidden;
display:block;
}
#foliomenu .text {
display: block;
padding: 10px;
}
#foliomenu .deco {
position: absolute;
top: 0;
left: 0;
width: 298px;
height: 100px;
}
#foliomenu a:hover .deco, #foliomenu a:focus .deco {
left: -149px;
}
#foliomenu #essaialsa1 {background: url(images/essaialsa.jpg);}
...
#foliomenu #emelfolio3 {background: url(images/emelfolio18.jpg);}
-->

</style>

</head>

- - - - - - - - - - - - - - - - - - - - - -

<body>
<div id="foliomenu">

<li>
<a href="#" id="essaialsa1">
<span class="deco"></span>
<span class="text">Publicité: Debodeby FW10</span>
</a>
</li>

</div>





Mon image fait bien 298px de large avec a gauche l'état normal et a droite l'état survolé...
Vraiment je sèche..
Modifié par marco95 (10 Jan 2010 - 21:02)

Bon ben on est 4 en cours (tous débutants ok) a avoir essayé de faire fonctionner le code florent et personne ne comprend...
Il manque rien ? un vice caché je sais pas