"About the image"

To provide site visitors with an explanation of the banner image, an "about" link is available on the banner image, which links to an "About the image" page. This page contains explanation text about the image, the un-cropped image and arrows to navigate to other banner image explanations.

The text and image styles for this page can be found on the Middle column text style page and Image syle page. However, there a few items are specific to this page:

File name

For the rotating image script and "about" link to work correctly, the file name for the "About the image" page must correspond with the file name of the banner image. The naming conventions must be:

• Banner image. "hm_1.jpg," where the number 1 is in assending order with each new image (i.e. hm_1.jpg, hm_2.jpg, hm_3.jpg, etc.).
• "About the image" page. "banner_explanation1.html," where the number 1 must match the number in the banner image (i.e. hm_1.jpg corresponds with banner_explanation1.html, hm_2.jpg corresponds with banner_explanation2.html).

Navigation arrows

The navigation arrows at the bottom of the page are in a table with the id "prevnext-table," which fixes the position of the arrows consistently on each explanation page. The correct code is below. The example code would go on the page for banner_explanation1.html and is in a site with three banner images:

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="prevnext-table">
<tr>
<td><a href="banner_explanation3.html">
<img src="gresources/images/banner_explanation/previous.gif" width="21" height="21" border="0" /></a>
</td>
<td><div align="right"><a href="banner_explanation2.html">
<img src="gresources/images/banner_explanation/next.gif" alt="" width="21" height="21" border="0" /></a></div>
</td>
</tr>
</table>

Navigation arrows: