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 vào 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
6508

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:

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:

<tr>

</div>

<div>

<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>

</td>

</td>

<tr>

TIN NỔI BẬT

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<tr>

</a>

</div>

<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>

Tết Đà Nẵng trong mắt người nước ngoài </a>

</div>

</td>

</tr>

<tr>

</td>

</tr>

</table>

<tr>

</a>

</div>

<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>

Công tác dân vận phải đi vào thực tế </a>

</div>

</td>

</tr>

<tr>

</td>

</tr>

</table>

<tr>

</a>

</div>

<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>

Triệt phá “động bay” trong Karaoke Pacific </a>

</div>

</td>

</tr>

<tr>

</td>

</tr>

</table>

<tr>

</a>

</div>

<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>

Khẩn trương truy bắt nhóm chém người </a>

</div>

</td>

</tr>

<tr>

</td>

</tr>

</table>

<tr>

</a>

</div>

<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>

Kinh doanh chụp giật, taxi đại náo bến xe Gia Lai </a>

</div>

</td>

</tr>

<tr>

</td>

</tr>

</table>

<tr>

<img border="0" src="./Images/4%20%282%29.jpg" style="height: 250px; width: 360px;

border-width: 0px;" />

</a>

</div>

<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>

Lãnh đạo Bộ CA thăm, chúc Tết các tỉnh miền Trung </a>

</div>

</td>

</tr>

<tr>

</td>

</tr>

</table>

<tr>

</a>

</div>

<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>

Cởi áo “xóa đói giảm nghèo” cho du lịch </a>

</div>

</td>

</tr>

<tr>

</td>

</tr>

</table>

<tr>

</a>

</div>

<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>

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>

</tr>

</table>

<tr>

</a>

</div>

<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>

Đổ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>

</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ài viết tương tự

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

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

Lộ trình học Lập trình .NET Tóm tắt về JDK 8 đến JDK 21 Xác thực Facebook and Google sử dụng passport trong Node.js Quan hệ 1-1 (One-to-One) trong Dapper ASP.NET Core Razor Pages - Hướng dẫn tạo Project mới Hướng dẫn cách xoá khoảng trắng không mong muốn trong Microsoft Word Tìm hiểu về SOLID - Giải pháp trong phát triển phần mềm Sử dụng xác thực cookie mà không cần ASP.NET Core Identity Hướng dẫn sử dụng ckeditor5 miễn phí trong ASP.NET MVC Core Hướng dẫn Xây dựng Hệ thống Quản lý Tin tức kết hợp giữa ASP.NET MVC Core và Ajax

Xem tất cả

LIKE BOX

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

[TUT]Xây dựng Website Bán Hàng - Hướng dẫn tạo DataBase (91350) LẤY LẠI MẬT KHẨU SA TRONG SQL SERVER 2005 2008 (88279) Một số bài tập mẫu SQL(Phân I) (85957) CSS cho các thẻ theo trạng thái (link, hover, visited, active, focus) (80009) Các kiểu dữ liệu SQL (70896) Chuyển đổi giữa các hệ cơ số (70788) Kiểu dữ liệu Array và List trong C# (65533) Xây dựng Lớp Phân Số. Tính toán Cộng, trừ, nhân, chia (58545) Hướng dẫn khắc phục lỗi không tạo được Diagrams(sơ đồ quan hệ) trong SQL 2005/2008 (49984) [Java] Kết nối CSDL từ NetBean (39221)

Xem tất cả

HỌC HTML

Xem tất cả

Học Hệ thống Mạng

Xem tất cả

Điểm nhấn

Thủ thuật

HTML

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

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

Bài viết tương tự

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

LIKE BOX

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

HỌC HTML

Học Hệ thống Mạng

DotNet Group - Chia sẻ & Kết nối

kiểm tra