HTML preparation
Assume that there are 3 thumbnails beside the main interactive banner, then you have to prepare the HTML codes for the relevant layout first.
Step 1 - Layout preparation:
| <!-- Start of Banner Template --> <body> <table align="center" border="0" cellspacing="0" cellpadding="0" height="162"> <!-- This setting will eliminate the space line between the main banner and thumbnails column --> <tr> <td> <a id="adBannerLink" href="" target=""> <img src="" name="adBanner" border="0" alt="Advertising Banner" width="576" height="162"></img></a> </td> <td> <!-- Table with width 105 is larger than enough which aims to make the align left and align right effect --> <table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;" width="105"> <tr id="tr_thumbnail_0" style="display: block; " height="54" align="right"> <td><a id="a_thumbnail_0" href="#" onclick="javascript:change_on_click(0)"> <img id="img_thumbnail_0" border="0" src="" height="54" /></a></td> <!-- In IE9, table layout will be affected by whitespace between HTML elements (e.g. "</img></a></td>" cannot have whitespace in-between ) --> </tr> <tr id="tr_thumbnail_1" style="display: block; " height="54" align="left"> <td><a id="a_thumbnail_1" href="#" onclick="javascript:change_on_click(1)"> <img id="img_thumbnail_1" border="0" src="" height="54"></img></a></td> </tr> <tr id="tr_thumbnail_2" style="display: block; " height="54" align="right"><td> <a id="a_thumbnail_2" href="#" onclick="javascript:change_on_click(2)"> <img id="img_thumbnail_2" border="0" src="" height="54"></img> </a></td></tr> </table> </td> </tr> </table> </body> <!-- End of Banner Template --> |
Just like the following under Notepad++:
Step 2 - call relevant javascripts at the end for performing the effects:
| <script type="text/javascript"> window.onload = order_rotate; </script> |
Just like the following under Notepad++:
Step 3 - The final preparation for the HTML part would be finished after enclosing the codes in step 1 and step 2 into a comprehensive HTML contents:
javascript preparation
