2012年3月18日 星期日

Interactive Banner with auto-rotating thumbnails

Recently, I have to develop an interactive banner with rotating thumbnails by using HTML and javascript on a public web-site. After doing some researches and learning from the Internet resources, let me  consolidate the main points here to share with you. Hope this sharing could help to reduce your time if you also have to develop relevant web components.

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
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)