Using CSS for mouseover buttons

[COOLumbia]

I'm trying to implement mouseover buttons using CSS to display the left half of an image, then display the right half of the image when the mouse hovers over it. I got this to work great in my non-OSC webpage, but when I try to add it to an OSC page (products_new.php) by inserting a "class=add2button", which I added to stylesheet.css, it doesn't work. As you can see in my OSC page, nothing shows up where the "add to cart" button should be.

 

The reason I'd like to use CSS is that there is only one image required so preloading should not be a problem, and I think the display would be faster since the image is already loaded.

 

Can some CSS expert give me some ideas on why the CSS works OK in a non-OSC environment but not when added to the stylesheet.css for OSC?

[wheeloftime]

I'm trying to implement mouseover buttons using CSS to display the left half of an image, then display the right half of the image when the mouse hovers over it.  I got this to work great in my non-OSC webpage, but when I try to add it to an OSC page (products_new.php) by inserting a "class=add2button", which I added to stylesheet.css, it doesn't work.  As you can see in my OSC page, nothing shows up where the "add to cart" button should be.

 

The reason I'd like to use CSS is that there is only one image required so preloading should not be a problem, and I think the display would be faster since the image is already loaded.

 

Can some CSS expert give me some ideas on why the CSS works OK in a non-OSC environment but not when added to the stylesheet.css for OSC?

<{POST_SNAPBACK}>

 

I can't give you a direct answer for the CSS handling of this kind of things but you could take a look at the CSS Buttons contribution which might give you a clue why the problem arises. I have see a demo on a Dutch site where this worked great.

[Guest]

You ballsed up your stylesheet

 

this line

 

background-image: url'includes/languages/english/images/buttons/add2cart.png');

 

You got a missing ( after URL

 

background-image: url('includes/languages/english/images/buttons/add2cart.png');

[COOLumbia]

You got a missing ( after URL

Thanks, Mike! I corrected this, but still I get no images showing in my OSC page but it works OK in my non-OSC page. Do you have any other suggestions that I could try? I appreciate the help, as I know very little about CSS and even less about PHP.

[COOLumbia]

I found another problem; one of the left braces { was actually a left parentehesis (. I fixed that and now it works great.

 

This is a good way to change the buttons to mouseover buttons without requiring any javascript or image swapping or any changes to any of the php files (except adding a "class=buttonname").

 

All you need is to load replacement button images that are twice as wide as the standard ones (a regular and mouseover image side by side in the same image), then add a CSS definition for each button, that moves the image left on mouseover, and insert the "class=buttonname" where you want.

 

Once I get all the button images made, I may submit this as a contrib. If you want to take a look at a sample page using this, go to my test page .

 

Thanks again, Mike for your help!