# Image swap on rollover

**URL:** <https://www.ruby-forum.com/t/image-swap-on-rollover/76063>\
**Category:** Rails\
**Created:** [November 15, 2006, 5:42pm UTC](https://www.ruby-forum.com/t/image-swap-on-rollover/76063 "2006-11-15T17:42:06Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![wickie](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/ba9def/32.png) [@wickie](https://www.ruby-forum.com/u/wickie)\
**Post date:** [November 15, 2006, 5:42pm UTC](https://www.ruby-forum.com/t/image-swap-on-rollover/76063/1 "2006-11-15T17:42:06Z")

</div>

I have a need to have an image on a page changed to an alternate image  
when the mouse passes over the image. Is there an easy way to do it with  
Rails?

If this is really a css fix, what should I be looking at in css?

Thanks in advance  
—Michael

---

<div class="post-metadata">

**Author:** ![wickie](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/ba9def/32.png) [@wickie](https://www.ruby-forum.com/u/wickie)\
**Post date:** [November 15, 2006, 6:00pm UTC](https://www.ruby-forum.com/t/image-swap-on-rollover/76063/2 "2006-11-15T18:00:45Z")

</div>

Michael S. wrote:

> I have a need to have an image on a page changed to an alternate image  
> when the mouse passes over the image. Is there an easy way to do it with  
> Rails?
> 
> If this is really a css fix, what should I be looking at in css?
> 
> Thanks in advance  
> —Michael

To me it will depend on the size of the image…

Big photo that you want to switch out with another big photo - maybe  
AJAX request or something, a’la Flickr.

Small gif/jpg/png image, like a menu bar or basic highlight or something

- CSS all the way… see this article for details:  
[[ws] Fast Rollovers Without Preload | Rychlé rollovery bez načítání](http://wellstyled.com/css-nopreload-rollovers.html)

c.

---

<div class="post-metadata">

**Author:** ![wickie](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/w/ba9def/32.png) [@wickie](https://www.ruby-forum.com/u/wickie)\
**Post date:** [November 15, 2006, 6:20pm UTC](https://www.ruby-forum.com/t/image-swap-on-rollover/76063/3 "2006-11-15T18:20:56Z")

</div>

On 15 Nov 2006, at 17:42, Michael S. wrote:

> I have a need to have an image on a page changed to an alternate image  
> when the mouse passes over the image. Is there an easy way to do it  
> with  
> Rails?
> 
> If this is really a css fix, what should I be looking at in css?

This example should help (it’s part of a css design i had to do for  
an ad agency, so there are quite a few superfluous image files in  
there).

  
I can recommend the book CSS Mastery ([http://www.cssmastery.com/](http://www.cssmastery.com/)), it  
has all these cases nicely explained (including the fancy rollovers  
you see on flickr).

Best regards

Peter De Berdt