Forum: Ruby on Rails change input image on hover

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
(Guest)
on 2007-05-17 13:23
(Received via mailing list)
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
Mic C. (Guest)
on 2008-04-28 09:40
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
Kyle (Guest)
on 2008-04-28 23:37
(Received via mailing list)
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>
Mic C. (Guest)
on 2008-04-29 02:19
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>

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
Juuso S. (Guest)
on 2008-06-05 08:31
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
This topic is locked and can not be replied to.