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
  • 1785
loading...

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

Loading...

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

Loading...

LIKE BOX

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

HỌC HTML