Question

Quick question, I’m trying to add a rollover effect to a submit button, but it doesn’t seem to be working. i originally used CSS to create the effect but CSS creates a bit of a flicker when the the image is rolled over (my guess is from loading the rollover image).

Heres the code for the button:

<%= image_submit_tag ("sharebutton_up.jpg"), :mouseover => ("sharebutton_down.jpg")%>

Any ideas on how to fix this code, or a different way to create the rollover effect?

Answer 1

You should use an image sprite and alter it using the background position.

<%= image_submit_tag ("sharebutton.jpg"), :class => "submit_button" %>

Then in your CSS

.submit_button {
   width: 100px;
   height: 50px;
   background-image: url("sharebutton.jpg");
}

.submit_button:hover {
   background-position: 0 -100%;
 }

This assumes a 100×100 image, with the top half being the off state and the bottom half being the on stat. See this link for more information.