Home » All posts

Tạo hiệu ứng mô tả liên kết chỉ bằng file Javascript

Người đăng: kiemdaigia on Chủ Nhật, 17 tháng 10, 2010

Chúng ta đã biết cách thực hiện hiệu ứng mô tả liên kết bằng DHTML Tooltip qua bài viết Hiệu ứng liên kết có mô tả … nhưng phải dùng đến cả CSS và Javascript. Ở bài này tôi xin giới thiệu cách làm đơn giản hơn, chỉ sử dụng 1 file Javascript mà thôi.


Bạn hãy rê chuột vào liên kết này để xem kết quả hiệu ứng.

Sau đây là hướng dẫn thao tác:

Đặt đoạn code bên dưới ngay sau thẻ <body>.

<script type="text/javascript" src="/wz_tooltip.js"></script>

Bạn nên tải file wz_tooltip.js về rồi upload lên webhost của bạn sau đó gắn URL của file vào phần scr ở trên.

Kế đến bạn chỉ cần thiết lập HTML cho liên kết như sau:

<a onmouseover="Tip('Phần mô tả liên kết')" onmouseout="UnTip()" href="URL của liên kết">Tiêu đề của liên kết</a>

Như vậy phương pháp này đã rút ngắn hơn một công đoạn CSS so với phương pháp trước. Bạn có thể áp dụng cách này dễ dàng cho Blogger.
More about →
vào lúc 01:11 { Add nhận xét }
Nhãn: ,

Mô tả liên kết sử dụng Javascript

Người đăng: kiemdaigia

Khi bạn trỏ vào các liên kết trên một trang web, phần lớn các công cụ trình duyệt sẽ hiển thị địa chỉ mà liên kết đó trỏ đến trên thanh trạng thái. Tại sao không thêm sự nổi bật cho trang web của bạn bằng cách mô tả cho các liên kết.


Có thể sử dụng ngôn ngữ JavaScript để làm việc này. Bạn chỉ cần thêm thẻ sự kiện "OnMouseOver" cho neo liên kết của bạn dưới dạng sau đây:

OnMouseOver="window.status='description'; return true;"

Lấy ví dụ, nếu thẻ neo ban đầu của bạn là:

<a href="http://www.websitecuaban.com/trang-chu.html">

Thì nên thay đổi nó thành:

<a href="http://www.websitecuaban.com/trang.chu.html" OnMouseOver="window.status='Go to my home page...'; return true;">

Chú ý: Vì OnMouseOver là một sự kiện JavaScript nên mô tả của bạn sẽ chỉ hiển thị trên các công cụ trình duyệt cho kích hoạt JavaScript như Netscape 2.x+ và Explorer 3.x. Các trình duyệt khác sẽ bỏ qua thẻ này.
More about →
vào lúc 01:08 { Add nhận xét }
Nhãn:

Hiệu ứng liên kết có mô tả sử dụng DHTML Tooltip và Javascript

Người đăng: kiemdaigia

Hiệu ứng liên kết dạng mô tả giúp cho người lướt web có thể có nhiều hơn thông tin về một liên kết trước khi kích trỏ để vào trực tiếp liên kết. Ngôn ngữ Javascript có thể được sử dụng kết hợp với CSS để thực hiện hiệu ứng này.


Xem trang demo demo.

Sau đây là hướng dẫn thiết lập hiệu ứng.

Đặt đoạn code sau vào giữa 2 thẻ <head>, </head> của trang web.

<style type="text/css">
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Xóa dòng phía dưới nếu muốn bỏ thuộc tính bóng mờ cho khung mô tả liên kết. Dòng này luôn xuất hiện sau cùng trong phần CSS này*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);

}
</style>
<script language="javascript" src="/tooltip.js"></script>


Bạn nên tải file tooltip.js về rồi upload lên webhost của mình sau đó đặt liên kết file vào scr.

Ở phần code cho liên kết, bạn thiết lập như thế này:

<a href="{URL của liên kết}" onmouseover="showtip('Phần mô tả của liên kết')" onmouseout="hidetip();">Tiêu đề của liên kết</a>

Hiệu ứng này có thể áp dụng cho Blogger, bạn hãy khám phá đi nhé! Rất dễ dàng!
More about →
vào lúc 01:07 { Add nhận xét }
Nhãn: ,

Hiển thị ngày tháng trên website và webblog

Người đăng: kiemdaigia

Hiển thị ngày tháng trên trang web của bạn là một cách trang trí hay cũng như làm cho trang web của bạn có vẻ chuyên nghiệp hơn. Những đoạn code JavaScript sau đây sẽ giúp bạn hiển thị ngày tháng lên trang web theo một số kiểu khác nhau.

Kiểu 1: Tháng/ngày/năm (Ví dụ hôm nay là 12/17/2009)

Bạn hãy đặt đoạn code sau tại nơi bạn muốn ngày tháng xuất hiện.
<script language="javascript">
var today_date= new Date()
var month=today_date.getMonth()+1
var today=today_date.getDate()
var year=today_date.getFullYear()
//document.write("Today's date is: ")
document.write(month+"/"+today+"/"+year)
</script>

Bạn có thể thay đổi font và màu chữ bằng cách kèm theo các lệnh thuộc tính tương thích.

Kiểu 2: Tháng-ngày-năm (Ví dụ hôm nay là 12-17-2009)

Bạn hãy đặt đoạn code sau tại nơi bạn muốn ngày tháng xuất hiện.

<script language="javascript">
var today_date= new Date()
var month=today_date.getMonth()+1
var today=today_date.getDate()
var year=today_date.getFullYear()
//document.write("Today's date is: ")
document.write(month+"-"+today+"-"+year)
</script>

Kiểu 3: Lấy ví dụ hôm nay là ngày 17/12/2009 thì kiểu này hiển thị theo dạng tiếng Anh là December 17, 2009

Đặt đoạn code sau giữa 2 thẻ <head> và </head>.

<script language=javascript>
var today_date= new Date()
var month=today_date.getMonth()
var today=today_date.getDate()
var year=today_date.getFullYear()

var months = new Array(
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December");
</script>

Sau đó đặt đoạn code này tại nơi bạn muốn ngày tháng xuất hiện.

<script language=javascript>
document.write(months[month]+" "+today+", "+year)
</script>

Từ những đoạn code Javascript này bạn có thể điều chỉnh để có thể hiển thị ngày tháng theo kiểu tiếng Việt, bạn hãy khám phá nhé!
Và tất nhiên các blogger cũng có thể áp dụng thủ thuật này vào webblog của mình.
More about →
vào lúc 01:05 { Add nhận xét }
Nhãn:

Thủ thuật tạo nút “Đặt làm trang chủ” trên website, webblog

Người đăng: kiemdaigia

Khi thiết trang web của bạn, việc tạo cho người lướt web môt cách để thiết lập trang web của bạn làm trang chủ mỗi khi khởi động công cụ trình duyệt web cũng là một cách để tăng cường lượng truy cập cho trang web của bạn.
Đoạn mã Javascript sau đây sẽ giúp bạn đặt một nút lên trang web khi bạn thiết kế, kết quả tạo ra là mỗi khi click chuột vào đó thì nó sẽ tự động thiết lập trang của bạn làm trang chủ cho công cụ trình duyệt.
<form>
<input type="button" value="make this site your home page" onclick="this.style.behavior='url(#default#homepage)'; this.sethomepage('page url beginning with http:// here');">
</form>

Thay đổi đoạn văn bản màu đỏ thành địa chỉ website của bạn bắt đầu bằng http://.
More about →
vào lúc 01:04 { Add nhận xét }
Nhãn:

Tạo hiệu ứng liên kết kiểu dancing

Người đăng: kiemdaigia

Có khá nhiều kiểu hiệu ứng liên kết. Một trong số đó là kiểu hiệu ứng nhảy múa theo đó các đoạn text có link liên kết nhấp nháy theo các màu sắc khác nhau rất nổi bật.

Bạn chỉ việc đặt đoạn mã javascript dưới đây trước thẻ đóng </head>.
<script language="javascript">
<!-- Begin
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
var colors = new initArray(
"red",
"blue",
"green",
"purple",
"black",
"tan",
"red");
delay = .5; // seconds
link = 0;
vlink = 2;
function linkDance() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance()",delay*1000);
}
linkDance();
// End -->
</script>

Bạn cũng có thể thêm màu sắc cho hiệu ứng này.
Tham khảo theo Javascript.internet.com.
More about →
vào lúc 01:02 { Add nhận xét }
Nhãn:

Tạo nút Trở về trang chủ cho website

Người đăng: kiemdaigia

Trong một trang web, nút Trở lại trang chủ hay Back Home cũng rất cần thiết để người lướt web có thể dễ dàng sử dụng. Có nhiều cách khác nhau để thực hiện điều này khi thiết kế web. Sau đây là một cách thực hiện bằng các cú pháp Javascript.

Bạn chỉ việc đặt đoạn mã này tại vị trí muốn hiển thị nút Back Home.

<script>
function gohome(){
if (document.layers)
window.home()
else if (document.all)
window.location="about:home"
else
alert("You need NS 4+ or IE 4+ to go back home!")
}
</script>

<form>
<input type="button" onClick="gohome()" value="Back Home!">
</form>

Nếu bạn muốn sử dụng nút dạng hình thay vì dạng form thì sử dụng đoạn mã dưới đây để thay cho đoạn mã màu đỏ.

<a href="javascript:gohome()"><img src="URL cua button hinh"></a>

Tham khảo theo DynamicDrive.
More about →
vào lúc 00:59 { Add nhận xét }
Nhãn: ,