1. First of all, go to 'Design | Library | Variables', right-click on the 'Section' variable group and create a new user definable variable called and 'SectionImageAlt'.
2. Give it a prompt of 'Alternative Section Image', set the 'Place of Setting' to be 'Section' and make sure 'Type' is set to 'Filename'. Also, select 'Allow Empty Value' and de-select 'Allow <Use Parent> as an Option'.
You can now edit the section link layout you are using to include your new variable.
3. Go to the 'Design' tab and click on a section link.
You should have selected a layout called something like 'Image on Left Section Link' or 'CSS Section Link Layout'.
4. Locate the following line:
<img alt="SectionName" src="SectionImageFileName" border="0" />
This is the current image code. You are going to put a condition around this line so it only appears if there is no alternative section image.
5. Highlight this line and click the 'Insert Block' button
6. Enter a condition that reads: SectionImageAlt == ""
(i.e. 'only show this code if SectionImageAlt is empty').
7. Click 'OK'.
8. You can now type your code for the image with the rollover. This should look like:
<img src="SectionImageFileName" alt="SectionName" onMouseOver="src='SectionImageAlt' " onMouseOut="src='SectionImageFileName' " border="0">
9. Finally, you need to highlight this new code and click the 'Insert Block' button.
10. Insert a condition that says: SectionImageAlt != ""
(i.e. 'Only show this code if SectionImageAlt is not empty')
11. Click 'OK'.
Alternatively, simply replace the following tag:
HTML Code:
<img alt="SectionName" src="SectionImageFileName" border="0" />
...with the following code:
HTML Code:
<actinic:block if="%3cactinic%3avariable%20name%3d%22SectionImageAlt%22%20%2f%3e%20%3d%3d%20%22%22"> <img alt="<actinic:variable name="SectionName"/>" src="<actinic:variable Name="SectionImageFileName"/>" border="0" /> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22SectionImageAlt%22%20%2f%3e%20%21%3d%20%22%22"> <img src="<actinic:variable name="SectionImageFileName" />" alt="<actinic:variable name="SectionName" />" onMouseOver="src='<actinic:variable name="SectionImageAlt" />' " onMouseOut="src='<actinic:variable name="SectionImageFileName" />' " border="0"> </actinic:block>