Cấp bậc tác giả:

HTML

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

Được viết bởi QuangIT ngày 10/09/2012 lúc 04:33 PM
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
  • 0
  • 7352

Làm Show ảnh như 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!

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML