# Rollhover mais en préload

**URL:** <https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115>\
**Category:** FR\
**Created:** [August 3, 2009, 11:10am UTC](https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115 "2009-08-03T11:10:04Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![alternative451](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/5f9b8f/32.png) [@alternative451](https://www.ruby-forum.com/u/alternative451)\
**Post date:** [August 3, 2009, 11:10am UTC](https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115/1 "2009-08-03T11:10:04Z")

</div>

hello à tous,  
le texte jusqu’au tirret n’est pas important sautez le si vous avez  
pas le temps

d’abord premier post !!! mais je vous observe depuis déja une petite  
semaine.  
comme c’est mon premier post je vous explique ma situation, je suis  
stagiaire depuis 2 mois en webmaster (on ne rigole pas au fond, je  
suis sur que c’est un vrai metier) j’ai décidé d’attaquer directement  
en rail pour me changer un peu du php et profiter un peu de la  
situation de stagiaire. Tout ça pour dire que je suis un bon debutant  
(j’ai quand même trouvé pas mal de ressources et j’ai compris plus ou  
moin les ficelles du framework)  
vala pour al petite présentation.

## ceux qui bayent peuvent commencer a lire à partir d’ici

J’ai trouvé comment on faisait une image avec rollhover (standing  
ovation) cependant le roll généré est celui du js, et non pas l’astuce  
css background hide/unhide. et donc comme l’image (hover) n’est pas  
sur le client et met un temps à s’afficher, pas tip top. je sais qu’il  
existe des js de préload, mais j’imagine qu’il y a une fonction ror  
pour le préload, alors ? hummm ? une idée ?  
merci

- ju

---

<div class="post-metadata">

**Author:** ![alternative451](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/5f9b8f/32.png) [@alternative451](https://www.ruby-forum.com/u/alternative451)\
**Post date:** [August 3, 2009, 4:18pm UTC](https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115/2 "2009-08-03T16:18:33Z")

</div>

ouiii bien compris que rail ne ferait pas de css.  
c’été dans l’hypothese ou je me servirais du js  
car c’est bien ce qui est généré quand on fait :  
:mouseover =\> monImage" %\>  
ce qui est beacoup plus rapide que l’astuce css.  
cependant cette technique declenche une petite attente lors du premier  
survol (mise en cache j’imagine)  
je sais que dreamweaver génére quelquechose comme   
et mm\_… une fonction de préload, je me demandais juste si il  
existait un equivalent rail.

merci bien pour ta reponse en tout cas je vais probablement me rabatre  
sur le css

---

<div class="post-metadata">

**Author:** ![alternative451](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/5f9b8f/32.png) [@alternative451](https://www.ruby-forum.com/u/alternative451)\
**Post date:** [August 3, 2009, 11:39am UTC](https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115/3 "2009-08-03T11:39:20Z")

</div>

Oui, ce que tu cherche existe : ça s’appelle un rollover css.

Avantages :

- c’est plus propre (un rollover tout simple c’est de la  
présentation, ça  
va dans la css)
- ca ne surcharge pas inutilement ton javascript
- c’est mieux géré niveau vitesse
- pas de preload au switch

Désavantages :

- pas possible de faire un effet de transition (pour ça, le  
JavaScript  
reste la seule option)

Ca se fait comme ça :

-  
-  

ul.menu span {  
display: none;  
}

 

ul.menu a {  
display: block;  
width: …; /\* selon l’image _/  
height: …;  
background-image: url(…);  
background-position: top; /_ ou left \*/  
}

 

ul.menu li:hover a {  
background-position: bottom; /\* ou right \*/  
}

 

Perso je ne vois pas ce que Rails devrait faire ici, Rails s’occupe :

 
  - (bien) du côté serveur
  - (correctement) de générer le html
  - (moins bien si c’est avec du prototype / scriptaculous, pire si  
c’est  
du rjs) de faire de l’AJAX sans JavaScript apparent
  - (pas du tout) de faire ta présentation css ; là c’est à toi de te  
débrouiller, désolé

 

Michel B.

 

2009/8/3 alternative451 [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

---

<div class="post-metadata">

**Author:** ![alternative451](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/5f9b8f/32.png) [@alternative451](https://www.ruby-forum.com/u/alternative451)\
**Post date:** [August 3, 2009, 4:57pm UTC](https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115/4 "2009-08-03T16:57:10Z")

</div>

C’est plus rapide à faire la première fois, mais c’est plus moche, c’est  
moins pratique à modifier (violation de la séparation présentation /  
contenu), c’est plus lent à exécuter pour ton navigateur (si tu fais une  
liste de liens, tu crée basiquement une nouvelle méthode par lien, qui  
doit  
être surveillée dès qu’il y a un survol), et il y a des possibilités de  
bug  
(genre je fais le mouseover mais je déplace ma souris d’une certaine  
façon  
et il ne fait pas le mouseout, donc je reste avec un onglet bloqué en  
position survol alors que ma souris est allé ailleurs).

Bref je te conseille d’apprendre à bien te servir des css, et à ne pas  
passer par des trucs JavaScript inutiles, et encore moins d’imiter le  
fonctionnement de DreamWeaver qui fournit du code pourri bourré de  
JavaScript à la con directement dans les pages comme c’est pas permis  
d’être  
pas propre.

De toute façon, une fois que tu auras lu le contenu des abominables  
méthodes  
MM\_preloadImages() de DreamWeaver tu t’apercevra que la petite manip css  
est  
bien bénigne et très propre en comparaison, et tu remarqueras que tu  
dois  
lui passer en paramètre toutes les images à préloader, donc au final tu  
devras écrire peut-être encore plus de trucs qu’avec une css bien  
propre.

En règle général, tout ce qui est du style devrait aller dans une .css,  
tout  
ce qui est du script devrait aller dans un .js, et seulement ce qui est  
du  
contenu devrait aller dans le .html (vive jQuery plutôt que prototype /  
scriptaculous).

Michel B.

2009/8/3 alternative451 [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

---

<div class="post-metadata">

**Author:** ![alternative451](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/5f9b8f/32.png) [@alternative451](https://www.ruby-forum.com/u/alternative451)\
**Post date:** [August 4, 2009, 9:28am UTC](https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115/5 "2009-08-04T09:28:09Z")

</div>

Merci bien, merci pour la source css, et pour les conseils.  
a bientot

---

<div class="post-metadata">

**Author:** ![alternative451](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/5f9b8f/32.png) [@alternative451](https://www.ruby-forum.com/u/alternative451)\
**Post date:** [August 6, 2009, 9:38am UTC](https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115/6 "2009-08-06T09:38:39Z")

</div>

2009/8/4 alternative451 [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

> Merci bien, merci pour la source css, et pour les conseils.  
> a bientot
> 
> > 
> 
> juste pour continuer sur le hors sujet  
> le miux est de faire une image contenant les deux images et de changer  
> le  
> background-position au survol, comme ça pas d’effet d’attente .

mais bon dans n’importe quel site de css bien fait tu trouveras cela.

NG

---

<div class="post-metadata">

**Author:** ![alternative451](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/5f9b8f/32.png) [@alternative451](https://www.ruby-forum.com/u/alternative451)\
**Post date:** [August 6, 2009, 11:01am UTC](https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115/7 "2009-08-06T11:01:11Z")

</div>

2009/8/6 Michel B. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

> Je crois que c’est ce que j’ai expliqué dans ma première réponse  
> d’ailleurs…
> 
> Michel B.

oups désolé j’avais lu en diagonale et comme il mentionnanit encore la  
latence je me disais…

NG

PS tu as mentionné plusieurs fois jquery et json pour de l’ajax dans  
rails  
sans rjs, est-ce que tu aurais des exemples ?

merci

NG  
qui galère avec rjs/proto

---

<div class="post-metadata">

**Author:** ![alternative451](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/5f9b8f/32.png) [@alternative451](https://www.ruby-forum.com/u/alternative451)\
**Post date:** [August 6, 2009, 11:53am UTC](https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115/8 "2009-08-06T11:53:18Z")

</div>

> PS tu as mentionné plusieurs fois jquery et json pour de l’ajax dans rails  
> sans rjs, est-ce que tu aurais des exemples ?

Plein. Je suis en train de préparer un petit blog technique, et c’est un  
des  
sujets que je compte aborder. Dans tous les cas, si tu as des questions  
concernant ça, ce serait bien de faire un post différent…

Michel B.

---

<div class="post-metadata">

**Author:** ![alternative451](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/5f9b8f/32.png) [@alternative451](https://www.ruby-forum.com/u/alternative451)\
**Post date:** [August 6, 2009, 12:38pm UTC](https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115/9 "2009-08-06T12:38:24Z")

</div>

oui oui je sais …  
comme tu peux voir je n’ai pas posé de questions 😉

michel belleville :  
vestale du temple sacré de rails-fr ??

merci en tout cas , j’attends avec impatience tes explications

NG

fin disgression

---

<div class="post-metadata">

**Author:** ![alternative451](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/5f9b8f/32.png) [@alternative451](https://www.ruby-forum.com/u/alternative451)\
**Post date:** [August 6, 2009, 9:59am UTC](https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115/10 "2009-08-06T09:59:09Z")

</div>

Je crois que c’est ce que j’ai expliqué dans ma première réponse  
d’ailleurs…

Michel B.

2009/8/6 Nicolas G [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

---

<div class="post-metadata">

**Author:** ![alternative451](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/a/5f9b8f/32.png) [@alternative451](https://www.ruby-forum.com/u/alternative451)\
**Post date:** [August 6, 2009, 12:54pm UTC](https://www.ruby-forum.com/t/rollhover-mais-en-pra-load/173115/11 "2009-08-06T12:54:12Z")

</div>

Heu, les vestales étaient vierges, et en plus c’était des femmes, deux  
bonnes raisons pour ne pas trouver la métaphore adaptée…

Sinon, c’est pas tant le temple sacré de Rails-Fr que je défend, plutôt  
le  
temple sacré de ma boîte aux lettres ^^

Michel B.

2009/8/6 Nicolas G [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)