To do this exercise, you are going to create a new user-definable variable for the rollover image, and then include this variable into the section link layout you are using.
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:
...with the following code:
Now try entering an image filename into the 'Alternative Section Image' field in the 'Properties' tab. You should find that the section image changes when you move your mouse over it.
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>