# Change input image on hover

**URL:** <https://www.ruby-forum.com/t/change-input-image-on-hover/104379>\
**Category:** Rails\
**Created:** [May 17, 2007, 11:23am UTC](https://www.ruby-forum.com/t/change-input-image-on-hover/104379 "2007-05-17T11:23:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [May 17, 2007, 11:23am UTC](https://www.ruby-forum.com/t/change-input-image-on-hover/104379/1 "2007-05-17T11:23:17Z")

</div>

Hi guys,

I’m having troubles getting to change an image on hover using the  
image\_submit\_tag helper.

First of all I don’t know if I should use css for this (as i would for  
a normal link) or rjs (which i don’t know how to use it in this case).

Can anyone help me?

Thanks in advance,

Ben

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [April 28, 2008, 7:40am UTC](https://www.ruby-forum.com/t/change-input-image-on-hover/104379/2 "2008-04-28T07:40:31Z")

</div>

removed\_email\_address@domain.invalid wrote:

> Hi guys,
> 
> I’m having troubles getting to change an image on hover using the  
> image\_submit\_tag helper.
> 
> First of all I don’t know if I should use css for this (as i would for  
> a normal link) or rjs (which i don’t know how to use it in this case).
> 
> Can anyone help me?
> 
> Thanks in advance,
> 
> Ben

Hi Ben,

I too would love to know if this is possible. The closest thing I’ve  
come up with is a bit cheap and nasty and isn’t anywhere near a  
solution. Basically I omit the source arguement in the image\_submit\_tag  
and let the submit class and submit:hover pseudoclass handle the image  
url i.e.

\<%= image\_submit\_tag “”, :class =\> ‘submit’%\>

.submit {background-image: url(’/images/imageA.png’)}

.submit:hover {background-image: url(’/images/imageB.png’)}

This kinda works but with nasty side effects in some browsers (good in  
Opera, bad in IE7, Firefox and Safari) and rightly so as I’ve  
technically supplied the browser with an emtpy submit button image.

When supplying image\_submit\_tag with the appropriate arguements (i.e.  
image source and class etc.) everything work fine but the hover  
pseudoclass is ignored and doesn’t work.

If anyone else could shed some light I would be eternally greatful. Sure  
the image\_submit\_tag should be able to do more than just be an  
uninteresting button.

Cheers,

Mic

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [April 28, 2008, 9:37pm UTC](https://www.ruby-forum.com/t/change-input-image-on-hover/104379/3 "2008-04-28T21:37:29Z")

</div>

If you didn’t use image\_submit\_tag, you could create an image link (\<  
%= link\_to(image\_tag …) %\>), give it a class, style it in css, and  
specify an onClick form submission action. This might do what you  
want.

…But yes, it would be nice to do this with image\_submit\_tag…

-Kyle

On Apr 28, 12:40 am, Mic C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [April 29, 2008, 12:19am UTC](https://www.ruby-forum.com/t/change-input-image-on-hover/104379/4 "2008-04-29T00:19:56Z")

</div>

Kyle wrote:

> If you didn’t use image\_submit\_tag, you could create an image link (\<  
> %= link\_to(image\_tag …) %\>), give it a class, style it in css, and  
> specify an onClick form submission action. This might do what you  
> want.
> 
> …But yes, it would be nice to do this with image\_submit\_tag…
> 
> -Kyle
> 
> On Apr 28, 12:40 am, Mic C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)

Hi Kyle,

Thanks for the suggestion, I appreciate your help. I gave it a go but it  
still didn’t give me the overall result that I was hoping for - very  
close though. It all worked well up until I tried applying some style  
with css. Without the css it essentially works just like the  
image\_submit\_tag.

Is it possible to modify the source code in image\_submit\_tag (available  
in the rails api) to create a new helper that I could use in it’s place?

Cheers,

Mic

---

<div class="post-metadata">

**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\
**Post date:** [June 5, 2008, 6:31am UTC](https://www.ruby-forum.com/t/change-input-image-on-hover/104379/5 "2008-06-05T06:31:53Z")

</div>

removed\_email\_address@domain.invalid wrote:

> Hi guys,
> 
> I’m having troubles getting to change an image on hover using the  
> image\_submit\_tag helper.
> 
> First of all I don’t know if I should use css for this (as i would for  
> a normal link) or rjs (which i don’t know how to use it in this case).
> 
> Can anyone help me?
> 
> Thanks in advance,
> 
> Ben

Hi Ben,

I have one solution that seems to work ok with image\_submit\_tag. Because  
all the extra options you give to image\_submit\_tag go straight into the  
html, you can add normal javascript mouse events to it.

\<%= image\_submit\_tag “/images/button.png”,  
:onmouseover =\> “this.src=’/images/button\_hover.png’”,  
:onmouseout =\> “this.src=’/images/button.png’” %\>

Juuso