Làm Show ảnh như Báo Công An Đà Nẵng

Thể theo yêu cầu, mình sẽ làm cái cái demo như trang Báo Công An Đà Nẵng. Demo

Thật ra cái này chỉ xử lý javascript, cũng không có lằng nhằng lắm, đây là đoạn JavaScript:

<SCRIPT language="JavaScript" type="text/JavaScript">
    function displayArticle1(articleId)
    {
        document.getElementById('img').innerHTML = document.getElementById('image' + articleId).innerHTML;       
        document.getElementById('headline').innerHTML = document.getElementById('headline' + articleId).innerHTML;
    }   
    function changeText(id, newClass) {
        for (var i=1;i<=10;i++) {
        textchange = document.getElementById("textcolorChange" + i);
        if (textchange) {
        textchange.className= "highlight";
        }
        }
        textchange=document.getElementById(id);
        textchange.className=newClass;
        }
</SCRIPT>

Còn đây là trang index:

<table width="649" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td width="365" valign="top">
            <div align="left" id="img">
                <img id="ImgCat" height="250" src='./Images/h12b.jpg' width="360" name="ImgCat">
            </div>
            <div>
                <div class="homeBottomOuter">
                    <div class="homeBottomWrap">
                        <div>
                            <span class="headline" id="headline"><a href="/News/An-Ninh-Doi-Song/Gia-Dinh-Xa-Hoi/2012/1/14/71606.ca"
                                class="homeBottomInner">Tết Đà Nẵng trong mắt người nước ngoài</a></span></div>
                    </div>
                </div>
            </div>
        </td>
        <td width="5">
        </td>
        <td valign="top" width="275">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td valign="middle" class="tinkhac" width="275" height="28">
                        TIN NỔI BẬT
                    </td>
                </tr>
                <tr>
                    <td height="1">
                    </td>
                </tr>
                <!------------------------------------------------------------------------------>
                <tr>
                    <td valign="top">
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td height="24" width="100%">
                                    <!-------------------------------------------------------------------------->
                                    <div id="image71606" style="display: none">
                                        <a href='/News/An-Ninh-Doi-Song/Gia-Dinh-Xa-Hoi/2012/1/14/71606.ca' class="homeBottomInner">
                                            <img border="0" src="./Images/h12b.jpg" style="height: 250px; width: 360px; border-width: 0px;" />
                                        </a>
                                    </div>
                                    <div id="headline71606" style="display: none">
                                        <a href='/News/An-Ninh-Doi-Song/Gia-Dinh-Xa-Hoi/2012/1/14/71606.ca' class="inan">Tết
                                            Đà Nẵng trong mắt người nước ngoài </a>
                                    </div>
                                    <div class="highlight" id="textcolorChange71606" onmouseover="displayArticle('71606');changeText('textcolorChange71606','newText');"
                                        style="cursor: pointer">
                                    </div>
                                    <div align="left" style="cursor: hand" onmouseover="displayArticle1('71606');">
                                        <img src="./Images/do.gif" border="0" width="14" height="11">
                                        <a href='/News/An-Ninh-Doi-Song/Gia-Dinh-Xa-Hoi/2012/1/14/71606.ca' class="styleLatestheadlines">
                                            Tết Đà Nẵng trong mắt người nước ngoài </a>
                                    </div>
                                    <!------------------------------------------------------------->
                                </td>
                            </tr>
                            <tr>
                                <td height="1" bgcolor="#e5e5e5">
                                </td>
                            </tr>
                        </table>
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td height="24" width="100%">
                                    <!-------------------------------------------------------------------------->
                                    <div id="image71602" style="display: none">
                                        <a href='/News/An-Ninh-Doi-Song/Gia-Dinh-Xa-Hoi/2012/1/14/71602.ca' class="homeBottomInner">
                                            <img border="0" src="./Images/h12e.jpg" style="height: 250px; width: 360px; border-width: 0px;" />
                                        </a>
                                    </div>
                                    <div id="headline71602" style="display: none">
                                        <a href='/News/An-Ninh-Doi-Song/Gia-Dinh-Xa-Hoi/2012/1/14/71602.ca' class="inan">Công
                                            tác dân vận phải đi vào thực tế </a>
                                    </div>
                                    <div class="highlight" id="textcolorChange71602" onmouseover="displayArticle('71602');changeText('textcolorChange71602','newText');"
                                        style="cursor: pointer">
                                    </div>
                                    <div align="left" style="cursor: hand" onmouseover="displayArticle1('71602');">
                                        <img src="./Images/do.gif" border="0" width="14" height="11">
                                        <a href='/News/An-Ninh-Doi-Song/Gia-Dinh-Xa-Hoi/2012/1/14/71602.ca' class="styleLatestheadlines">
                                            Công tác dân vận phải đi vào thực tế </a>
                                    </div>
                                    <!------------------------------------------------------------->
                                </td>
                            </tr>
                            <tr>
                                <td height="1" bgcolor="#e5e5e5">
                                </td>
                            </tr>
                        </table>
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td height="24" width="100%">
                                    <!-------------------------------------------------------------------------->
                                    <div id="image71593" style="display: none">
                                        <a href='/News/An-Ninh-Doi-Song/CA-Pha-An/2012/1/14/71593.ca' class="homeBottomInner">
                                            <img border="0" src="./Images/h10e.jpg" style="height: 250px; width: 360px; border-width: 0px;" />
                                        </a>
                                    </div>
                                    <div id="headline71593" style="display: none">
                                        <a href='/News/An-Ninh-Doi-Song/CA-Pha-An/2012/1/14/71593.ca' class="inan">Triệt phá
                                            “động bay” trong Karaoke Pacific </a>
                                    </div>
                                    <div class="highlight" id="textcolorChange71593" onmouseover="displayArticle('71593');changeText('textcolorChange71593','newText');"
                                        style="cursor: pointer">
                                    </div>
                                    <div align="left" style="cursor: hand" onmouseover="displayArticle1('71593');">
                                        <img src="./Images/do.gif" border="0" width="14" height="11">
                                        <a href='/News/An-Ninh-Doi-Song/CA-Pha-An/2012/1/14/71593.ca' class="styleLatestheadlines">
                                            Triệt phá “động bay” trong Karaoke Pacific </a>
                                    </div>
                                    <!------------------------------------------------------------->
                                </td>
                            </tr>
                            <tr>
                                <td height="1" bgcolor="#e5e5e5">
                                </td>
                            </tr>
                        </table>
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td height="24" width="100%">
                                    <!-------------------------------------------------------------------------->
                                    <div id="image71592" style="display: none">
                                        <a href='/News/An-Ninh-Doi-Song/CA-Pha-An/2012/1/14/71592.ca' class="homeBottomInner">
                                            <img border="0" src="./Images/h10a.jpg" style="height: 250px; width: 360px; border-width: 0px;" />
                                        </a>
                                    </div>
                                    <div id="headline71592" style="display: none">
                                        <a href='/News/An-Ninh-Doi-Song/CA-Pha-An/2012/1/14/71592.ca' class="inan">Khẩn trương
                                            truy bắt nhóm chém người </a>
                                    </div>
                                    <div class="highlight" id="textcolorChange71592" onmouseover="displayArticle('71592');changeText('textcolorChange71592','newText');"
                                        style="cursor: pointer">
                                    </div>
                                    <div align="left" style="cursor: hand" onmouseover="displayArticle1('71592');">
                                        <img src="./Images/do.gif" border="0" width="14" height="11">
                                        <a href='/News/An-Ninh-Doi-Song/CA-Pha-An/2012/1/14/71592.ca' class="styleLatestheadlines">
                                            Khẩn trương truy bắt nhóm chém người </a>
                                    </div>
                                    <!------------------------------------------------------------->
                                </td>
                            </tr>
                            <tr>
                                <td height="1" bgcolor="#e5e5e5">
                                </td>
                            </tr>
                        </table>
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td height="24" width="100%">
                                    <!-------------------------------------------------------------------------->
                                    <div id="image71576" style="display: none">
                                        <a href='/News/Phap-Luat/Toa-Soan-Ban-Doc/2012/1/14/71576.ca' class="homeBottomInner">
                                            <img border="0" src="./Images/h5c.jpg" style="height: 250px; width: 360px; border-width: 0px;" />
                                        </a>
                                    </div>
                                    <div id="headline71576" style="display: none">
                                        <a href='/News/Phap-Luat/Toa-Soan-Ban-Doc/2012/1/14/71576.ca' class="inan">Kinh doanh
                                            chụp giật, taxi đại náo bến xe Gia Lai </a>
                                    </div>
                                    <div class="highlight" id="textcolorChange71576" onmouseover="displayArticle('71576');changeText('textcolorChange71576','newText');"
                                        style="cursor: pointer">
                                    </div>
                                    <div align="left" style="cursor: hand" onmouseover="displayArticle1('71576');">
                                        <img src="./Images/do.gif" border="0" width="14" height="11">
                                        <a href='/News/Phap-Luat/Toa-Soan-Ban-Doc/2012/1/14/71576.ca' class="styleLatestheadlines">
                                            Kinh doanh chụp giật, taxi đại náo bến xe Gia Lai </a>
                                    </div>
                                    <!------------------------------------------------------------->
                                </td>
                            </tr>
                            <tr>
                                <td height="1" bgcolor="#e5e5e5">
                                </td>
                            </tr>
                        </table>
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td height="24" width="100%">
                                    <!-------------------------------------------------------------------------->
                                    <div id="image71539" style="display: none">
                                        <a href='/News/Chinh-Tri-Xa-Hoi/Hoat-Dong-LLCA/2012/1/13/71539.ca' class="homeBottomInner">
                                            <img border="0" src="./Images/4%20%282%29.jpg" style="height: 250px; width: 360px;
                                                border-width: 0px;" />
                                        </a>
                                    </div>
                                    <div id="headline71539" style="display: none">
                                        <a href='/News/Chinh-Tri-Xa-Hoi/Hoat-Dong-LLCA/2012/1/13/71539.ca' class="inan">Lãnh
                                            đạo Bộ CA thăm, chúc Tết các tỉnh miền Trung </a>
                                    </div>
                                    <div class="highlight" id="textcolorChange71539" onmouseover="displayArticle('71539');changeText('textcolorChange71539','newText');"
                                        style="cursor: pointer">
                                    </div>
                                    <div align="left" style="cursor: hand" onmouseover="displayArticle1('71539');">
                                        <img src="./Images/do.gif" border="0" width="14" height="11">
                                        <a href='/News/Chinh-Tri-Xa-Hoi/Hoat-Dong-LLCA/2012/1/13/71539.ca' class="styleLatestheadlines">
                                            Lãnh đạo Bộ CA thăm, chúc Tết các tỉnh miền Trung </a>
                                    </div>
                                    <!------------------------------------------------------------->
                                </td>
                            </tr>
                            <tr>
                                <td height="1" bgcolor="#e5e5e5">
                                </td>
                            </tr>
                        </table>
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td height="24" width="100%">
                                    <!-------------------------------------------------------------------------->
                                    <div id="image71552" style="display: none">
                                        <a href='/News/Kinh-Te/Dau-Tu-Xay-Dung/2012/1/14/71552.ca' class="homeBottomInner">
                                            <img border="0" src="./Images/h9a.jpg" style="height: 250px; width: 360px; border-width: 0px;" />
                                        </a>
                                    </div>
                                    <div id="headline71552" style="display: none">
                                        <a href='/News/Kinh-Te/Dau-Tu-Xay-Dung/2012/1/14/71552.ca' class="inan">Cởi áo “xóa
                                            đói giảm nghèo” cho du lịch </a>
                                    </div>
                                    <div class="highlight" id="textcolorChange71552" onmouseover="displayArticle('71552');changeText('textcolorChange71552','newText');"
                                        style="cursor: pointer">
                                    </div>
                                    <div align="left" style="cursor: hand" onmouseover="displayArticle1('71552');">
                                        <img src="./Images/do.gif" border="0" width="14" height="11">
                                        <a href='/News/Kinh-Te/Dau-Tu-Xay-Dung/2012/1/14/71552.ca' class="styleLatestheadlines">
                                            Cởi áo “xóa đói giảm nghèo” cho du lịch </a>
                                    </div>
                                    <!------------------------------------------------------------->
                                </td>
                            </tr>
                            <tr>
                                <td height="1" bgcolor="#e5e5e5">
                                </td>
                            </tr>
                        </table>
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td height="24" width="100%">
                                    <!-------------------------------------------------------------------------->
                                    <div id="image71540" style="display: none">
                                        <a href='/News/Chinh-Tri-Xa-Hoi/Thoi-Su/2012/1/13/71540.ca' class="homeBottomInner">
                                            <img border="0" src="./Images/4.jpg" style="height: 250px; width: 360px; border-width: 0px;" />
                                        </a>
                                    </div>
                                    <div id="headline71540" style="display: none">
                                        <a href='/News/Chinh-Tri-Xa-Hoi/Thoi-Su/2012/1/13/71540.ca' class="inan">Quảng Nam:
                                            Tổng Bí thư Nguyễn Phú Trọng thăm, làm việc tại Quảng Nam </a>
                                    </div>
                                    <div class="highlight" id="textcolorChange71540" onmouseover="displayArticle('71540');changeText('textcolorChange71540','newText');"
                                        style="cursor: pointer">
                                    </div>
                                    <div align="left" style="cursor: hand" onmouseover="displayArticle1('71540');">
                                        <img src="./Images/do.gif" border="0" width="14" height="11">
                                        <a href='/News/Chinh-Tri-Xa-Hoi/Thoi-Su/2012/1/13/71540.ca' class="styleLatestheadlines">
                                            Quảng Nam: Tổng Bí thư Nguyễn Phú Trọng thăm, làm việc tại Quảng Nam </a>
                                    </div>
                                    <!------------------------------------------------------------->
                                </td>
                            </tr>
                            <tr>
                                <td height="1" bgcolor="#e5e5e5">
                                </td>
                            </tr>
                        </table>
                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                            <tr>
                                <td height="24" width="100%">
                                    <!-------------------------------------------------------------------------->
                                    <div id="image71543" style="display: none">
                                        <a href='/News/Chinh-Tri-Xa-Hoi/Thoi-Su/2012/1/14/71543.ca' class="homeBottomInner">
                                            <img border="0" src="./Images/h3a.jpg" style="height: 250px; width: 360px; border-width: 0px;" />
                                        </a>
                                    </div>
                                    <div id="headline71543" style="display: none">
                                        <a href='/News/Chinh-Tri-Xa-Hoi/Thoi-Su/2012/1/14/71543.ca' class="inan">Đổi mới toàn
                                            diện nội dung, phương thức công tác tuyên giáo </a>
                                    </div>
                                    <div class="highlight" id="textcolorChange71543" onmouseover="displayArticle('71543');changeText('textcolorChange71543','newText');"
                                        style="cursor: pointer">
                                    </div>
                                    <div align="left" style="cursor: hand" onmouseover="displayArticle1('71543');">
                                        <img src="./Images/do.gif" border="0" width="14" height="11">
                                        <a href='/News/Chinh-Tri-Xa-Hoi/Thoi-Su/2012/1/14/71543.ca' class="styleLatestheadlines">
                                            Đổi mới toàn diện nội dung, phương thức công tác tuyên giáo </a>
                                    </div>
                                    <!------------------------------------------------------------->
                                </td>
                            </tr>
                            <tr>
                                <td height="1" bgcolor="#e5e5e5">
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!------------------------------------------------------------------------------>
            </table>
        </td>
    </tr>
</table>

Còn Css thì các bạn có thể tự thêm vào cũng được.
Chúc các bạn thành công!