This exercise will create a new user-definable variable called 'AltCartButtonImage' and a new layout for the 'add to cart button', which includes 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'.
3. Set 'Place of Setting' as 'Site' and set the 'Tab Name' as 'General'.
4. De-select the 'Allow <Use Parent> as an Option' checkbox and under 'Type' select 'Filename'. Select the 'Allow Empty Values' checkbox.
5. Click 'OK' and switch to the 'Layouts' tab of the library.
6. Locate the 'Add to Cart Button' group at the top of the library.
7. Right-click on 'Add To Cart Button Image' layout and select 'New Layout'.
8. Call it 'Rollover Add To Cart Button' and click 'OK'.
9. Now replace the code of the layout with:
<input type="image"
src="<actinic:variable name="CartButtonImage" />"
name="_<actinic:variable name="ProductID" />"
alt="Add to Cart"
onMouseOver="src='<actinic:variable name="AltCartButtonImage" />' "
onMouseOut="src='<actinic:variable name="CartButtonImage" />' "
/>
10. 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.
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'.
3. Set 'Place of Setting' as 'Site' and set the 'Tab Name' as 'General'.
4. De-select the 'Allow <Use Parent> as an Option' checkbox and under 'Type' select 'Filename'. Select the 'Allow Empty Values' checkbox.
5. Click 'OK' and switch to the 'Layouts' tab of the library.
6. Locate the 'Add to Cart Button' group at the top of the library.
7. Right-click on 'Add To Cart Button Image' layout and select 'New Layout'.
8. Call it 'Rollover Add To Cart Button' and click 'OK'.
9. Now replace the code of the layout with:
<input type="image"
src="<actinic:variable name="CartButtonImage" />"
name="_<actinic:variable name="ProductID" />"
alt="Add to Cart"
onMouseOver="src='<actinic:variable name="AltCartButtonImage" />' "
onMouseOut="src='<actinic:variable name="CartButtonImage" />' "
/>
10. 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.