Change button images on mouseover via CSS sprites

[Jamie]

This is the approach I recommend for changing Squirrelcart's buttons so that the image changes on mouseover. This approach uses CSS only, without Javascript. It also uses the sprite technique, which doesn't require preloading the alternate images. If you are unfamiliar with sprites, search Google for "css sprites" and read up.

To understand this, I'm assuming you are familiar with how to customize theme images in Squirrelcart via a custom theme. If you are not up on that, please read through the Customizing section of our documentation:
http://www.squirrelcart.com/help

This walkthrough uses Photoshop to create the example button file, but you could just as easily use any image editor you prefer.

Here is the standard add to cart button for the Squirrelcart theme:
btn_add_to_cart.png

When you move your mouse over it, the image stays the same. Now, head over to our new Highland Ave theme in our demo store and mouse over an add to cart button:
http://www.squirrelcart.com/demo1/index.php?theme_current=459^^stripes^^blue^^white

The button changes to a different image on mouseover. We use a single image file for both button states, which looks like this:
btn_add_to_cart.png

The regular button image is at the top, and the hover state button is below it. If you want to do this with your buttons, the first step is to create button image files that contain both button states, normal and hover. Let's open the default add to cart button image in Photoshop:
example1.png

Now, because this is a transparent PNG, the canvas is showing as transparent. Create a new layer for the background so we can tell what the button will actually look like, and fill it with a grayish color:
example2.png

Now, to make room for the second button state you'll need to increase the height of the canvas. Click Image > Canvas Size...
example3.png

If the units aren't showing as pixels, change them to pixels. Take note of the current height of the canvas. For this button, it is 27. We need to double it, so change that value to 54, and click the top middle arrow for the Anchor field so the canvas is increased below the existing image:
example5.png

Click OK to resize the canvas:
example6.png

Now, select both layers in the layers pallete, right click, and choose Duplicate Layers:
example7.png

The new duplicate layers will be selected. Keep them selected, click the Move tool, and drag both new layers down until they touch the bottom edge of the canvas:
example8.png

For the sake of sanity, let's name our layers:
example9.png

continued in the next post...

[Jamie]

Select the button - hover layer. This represents the way the button will appear on mouse over. We need to change it in some fashion. For this example, I'm just going to change it's color using a color overlay via the effects button in the layer's pallete.
example10.png

For this example, let's do this:
example11.png

That will give you an ugly green button like so:
example12.png

This is pretty much ready to go, but we will need to hide the background layers so the image is transparent again:
example13.png

Now, save it for the web as a transparent PNG file.
example14.png

You'll need to put it inside squirrelcart/themes/YOUR_CUSTOM_THEME/images. Name it btn_add_to_cart.png.

If you put the file in the right location and you have your custom theme enabled, your add to cart buttons will now look like this:
example15.png

Now, that looks pretty awful. The first step is to fix the duplicate image problem.

continued in next post...

[Jamie]

To make the button not appear as 2 buttons, we need to alter the CSS for it in the main stylesheet file, style_main.css.php. For more info on working with stylesheets in Squirrelcart, see this page:
http://www.squirrelcart.com/help/?CSS_Stylesheets.html

You'll need a copy of style_main.css.php inside your theme folder (squirrelcart/themes/YOUR_CUSTOM_THEME/). Open that file in an editor and find this CSS which controls the add to cart button:

a.add_to_cart_btn {
    background-image: url(<?php print sc_img('btn_add_to_cart','dyn') ?>);
    width: <?php print sc_img('btn_add_to_cart','width') ?>px;
    height: <?php print sc_img('btn_add_to_cart','height') ?>px;
    display: inline-block;
    <?php if ($SC['browser']['browser'] == 'fx' && $SC['browser']['maj_ver'] < 3.0): ?>
    display:-moz-inline-box;
    <?php endif; ?>
    margin-top: 2px;
}

The image you see for all of our buttons is actually not an <img /> tag. We use anchor tags, and set a background image property to show the actual button image.

This line in the above CSS is setting the height of the anchor element equal to the height of the background image with a little PHP to grab the image height automatically:
example16.png

The height of this image file is 54 pixels. If we change the height to half of that, it will be tall enough to show only one button image. We can do that with a little math by changing that one line like this:
example17.png

Save your stylesheet file, and then reload your product page:
example18.png

The button looks like the regular button now.

Now, for the hover effect, we just need a little more CSS to change the position of the background image inside the anchor tag on hover. To understand this, imagine a frame with a large border and a big square hole in the middle. If you put it on top of a larger image, what you see inside the cutout for the frame will depend on how you position the image behind it. We are going to slide the background image up and make the second button image visible, but only on hover. To do that, you need to add this CSS below the other CSS block you edited earlier:

example19.png

This CSS will only take affect when you hover over the link, because of the :hover pseudo-class added to the CSS selector. The background-position is being set. The first value of 0 represents the position to shift the background horizontally. We aren't moving it horizontally, so that is set to 0. The second value controls the amount to shift the image vertically. We want to shift it upwards, so the value must be negative. We want to shift it up an amount equal to the size of one button. We use the same math here to figure out that amount.

The PHP math isn't necessary for any of this. If you prefer, you can just remove the PHP and replace it with actual numerical values.

With that CSS in place, the button now changes on hover:
example20.png

The CSS that is actually sent to the browser for this ultimately looks like this:

a.add_to_cart_btn {
    background-image: url(http://www.example.com/squirrelcart/themes/custom/images/btn_add_to_cart.png);
    width: 107px;
    height: 27px;
    display: inline-block;
    margin-top: 2px;
}

a.add_to_cart_btn:hover {
    background-position: 0 -27px;
}

[Jamie]

Update - Adding a 3rd State

Someone asked if it would be possible to add a 3rd state for the button for when the button is being clicked. You can do that with the :active pseudo-class on the anchor tag.

You would just need a few changes. First, you need to add a third button to your image:

example.png

Then, the height attribute for the regular button in your CSS needs to be 1/3 of the actual height of the image file. So, change this:

a.add_to_cart_btn {
    background-image: url(<?php print sc_img('btn_add_to_cart','dyn') ?>);
    width: <?php print sc_img('btn_add_to_cart','width') ?>px;
    height: <?php print sc_img('btn_add_to_cart','height') / 2 ?>px;
    display: inline-block;
    <?php if ($SC['browser']['browser'] == 'fx' && $SC['browser']['maj_ver'] < 3.0): ?>
    display:-moz-inline-box;
    <?php endif; ?>
    margin-top: 2px;
}

to this:

a.add_to_cart_btn {
    background-image: url(<?php print sc_img('btn_add_to_cart','dyn') ?>);
    width: <?php print sc_img('btn_add_to_cart','width') ?>px;
    height: <?php print sc_img('btn_add_to_cart','height') / 3 ?>px;
    display: inline-block;
    <?php if ($SC['browser']['browser'] == 'fx' && $SC['browser']['maj_ver'] < 3.0): ?>
    display:-moz-inline-box;
    <?php endif; ?>
    margin-top: 2px;
}

Then, change this:

a.add_to_cart_btn:hover {
    background-position: 0 -<?php print sc_img('btn_add_to_cart','height') / 2 ?>px;
}

To this:

a.add_to_cart_btn:hover {
    background-position: 0 -<?php print sc_img('btn_add_to_cart','height') / 3 ?>px;
}

and finally, add a 3rd block of CSS after that for the active state:

a.add_to_cart_btn:active {
    background-position: 0 -<?php print sc_img('btn_add_to_cart','height')/3*2 ?>px;
}

That will show the ugly green button on hover, and the ugly yellow button only while the button is being clicked.