benvandesande-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2007-May-17 09:22 UTC
change input image on hover
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 --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
benvandesande-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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, > > BenHi 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 -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
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 Cartwright <rails-mailing-l...-ARtvInVfO7ksV2N9l4h3zg@public.gmane.org> wrote:> benvandesa...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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 > -- > Posted viahttp://www.ruby-forum.com/.--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
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 Cartwright <rails-mailing-l...-ARtvInVfO7ksV2N9l4h3zg@public.gmane.org>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 -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---
benvandesande-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org 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, > > BenHi 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 -- Posted via http://www.ruby-forum.com/. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group. To post to this group, send email to rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-talk?hl=en -~----------~----~----~----~------~----~------~--~---