I want my cart buttons to rollover (change) when my customers move their mouse over them.
v8 and higher
To do this you will have to create a new user-definable variable called 'AltCartButtonImage' and a new layout for 'add to cart button', which includes the rollover code.
1. Go to 'Design | Library | Variables' and right-click on the 'Product' group. Select 'New Variable'.
2. Give the variable a name of 'AltCartButtonImage' and enter a prompt of 'Alternative Cart Button Image'. Set 'Place of Setting' as 'Site' and set the 'Tab Name' as 'General'.
De-select the 'Allow <Use Parent> as an Option' checkbox and under 'Type' select 'Filename'. Select the 'Allow Empty Values' checkbox.
3. Click 'OK' and switch to the 'Layouts' tab of the library.
4. Locate the 'Add to Cart Button' group at the top of the library.
5. Right-click on 'Add To Cart Button Image' and select 'New Layout'.
6. Call it 'Rollover Add To Cart Button' and click 'OK'.
7. Now edit the code of the layout, and change it to look like the following:
Here's some code to copy and paste:
<input type="image"
src="<actinic:variable name="CartButtonImage" />"
name="_<actinic:variable name="ProductReference" />"
alt="Add to Cart"
onMouseOver="src='<actinic:variable name="AltCartButtonImage" />' "
onMouseOut="src='<actinic:variable name="CartButtonImage" />' "
/>
8. Click 'OK' and then close the library.
You can now go to 'Settings | Site Options | General' and enter a filename for 'Alternative Cart Button Image'. Then all you need to do is change the 'Add To Cart Button Layout' to 'Rollover Add To Cart Button' and you will have a working cart button with rollovers.
v8 and higher
To do this you will have to create a new user-definable variable called 'AltCartButtonImage' and a new layout for 'add to cart button', which includes the rollover code.
1. Go to 'Design | Library | Variables' and right-click on the 'Product' group. Select 'New Variable'.
2. Give the variable a name of 'AltCartButtonImage' and enter a prompt of 'Alternative Cart Button Image'. Set 'Place of Setting' as 'Site' and set the 'Tab Name' as 'General'.
De-select the 'Allow <Use Parent> as an Option' checkbox and under 'Type' select 'Filename'. Select the 'Allow Empty Values' checkbox.
3. Click 'OK' and switch to the 'Layouts' tab of the library.
4. Locate the 'Add to Cart Button' group at the top of the library.
5. Right-click on 'Add To Cart Button Image' and select 'New Layout'.
6. Call it 'Rollover Add To Cart Button' and click 'OK'.
7. Now edit the code of the layout, and change it to look like the following:
Here's some code to copy and paste:
<input type="image"
src="<actinic:variable name="CartButtonImage" />"
name="_<actinic:variable name="ProductReference" />"
alt="Add to Cart"
onMouseOver="src='<actinic:variable name="AltCartButtonImage" />' "
onMouseOut="src='<actinic:variable name="CartButtonImage" />' "
/>
8. Click 'OK' and then close the library.
You can now go to 'Settings | Site Options | General' and enter a filename for 'Alternative Cart Button Image'. Then all you need to do is change the 'Add To Cart Button Layout' to 'Rollover Add To Cart Button' and you will have a working cart button with rollovers.