Loading post navigation ...
 
 

Pro page

14
Nhận xét

Tạo hiệu ứng mô tả cho link liên kết - Sử dụng Javascript

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - Ở các thủ thuật trước mình có hướng dẫn các bạn tạo hiệu ứng mô tả chỉ dùng CSS, ở bài viết này mình sẽ giới thiệu việc tạo hiệu ứng mô tả dùng JS. Với thủ thuật này thì popup mô tả sẽ di chuyển theo con chuột, không như cách ta dùng CSS, popup chỉ hiển thị ở 1 vị trí cố định.


Xem demo trực tiếp ở đây: http://data.fandung.com/blog/html/tooltips.html

Hình ảnh minh họa:


Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script language="javascript" src="http://data.fandung.com/js/tooltip.js"></script>

<style type="text/css">
#dhtmltooltip{
border-right: black 1px solid;
padding-right: 4px;
border-top: black 1px solid;
padding-left: 4px;
font-size: 10pt;
z-index: 100;
filter: alpha(opacity=90);
-moz-opacity: .90;
-khtml-opacity: .90;
opacity: .90;
left: -300px;
visibility: hidden;
padding-bottom: 4px;
border-left: black 1px solid;
padding-top: 4px;
border-bottom: black 1px solid;
font-family: Arial;
position: absolute;
background-color: lightyellow;
width: 250px;
}
#dhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;

}
</style>

4. Save template.
5. Và sau đây code HTML:

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

-Thay đổi code màu xanh cho tương ứng với link liên kết của bạn.

Với thủ thuật này mình vẫn chưa áp dụng nó vào cho thủ thuật Recent post được.

Tham khảo từ source trên Net

Chúc các bạn thành công.


Enter your mail address:

14

vietutd

Anh đã ứng dụng cho www.vietutd.com. Cảm ơn Fan Dũng

fandung

:D, hum nay mạng ở nhà bị khìn, chán thiệt, làm phải ra tiệm net

garivamaxo

FD có thể hướng dẫn mình cách làm hiển thị feed content như blog bạn đc ko ?
Loay hoay cả chiều ko ra :(

http://feeds2.feedburner.com/Down4Share

Mong sớm hồi âm của bạn ! :)

fandung

@garivamaxo : bạn nói sao mình chưa hiểu, mình thấy trang feed của bạn cũng giống mình mà, đều hiển thị như nhau.

garivamaxo

@FD: Blog của bạn nè:
http://upanh.com/uploads/27-June-2009/nqpeg520yrv2q6jkfesi.jpg
những chỗ khác mình khoanh đỏ rồi đó , cái khác mình thắc mắc nhất là link có dạng feedproxy.google.com
Còn của mình nè:
http://upanh.com/uploads/27-June-2009/b0ij0l4itvt3s9259hc.jpg

Loay hoay cả chiều ko ra nổi , bó tay >.<

Mong FD chỉ giáo thêm ! :)

Thanks !

garivamaxo

Thanks FD , mình tìm ra rồi , do mình chọn podcast khi add link feed !

Cảm ơn sự giúp đỡ nhiệt tình của FD !

Chúc bạn vui vẻ và ngày càng phát triển blog! :)

fandung

@garivamaxo : tự tìm ra được là tốt rồi, như thế nhanh tiến bộ hơn :D

Cám ơn về lời chúc của bạn :)

Ngankvn ®

Cái này thấy xài đơn giản hơn nên mình đang dùng :D .

Nhưng mà phần mô tả chỉ đc phép viết liền tù tì thôi hả Dzũng ??? Mình chỉ cần xuống dòng mọt cái là nó ko hiện liền !!!

Phan Dũng

ủa, đc mà Ngân, file demo mình có xuống hàng đó, dùng lệnh <br/> cho nó xuống.

Ngankvn ®

Demo của Dzũng là một file text rồi đổi đuôi sang HTML thì làm gì mà chả đc .Mình chèn vào Entry mà - thẻ xuống dòng đó dùng bên trong mô tả sẽ bị báo lỗi ngay

Phan Dũng

Uh đúng Ngân à, mình quên mất cái vụ này. thôi cứ làm 1 hàng luôn đi, ko có thì dùng CSS cho tiện :D

Gohooh.Com

Hay lắm
Nhưng làm như vậy thì thủ công wa(mõi link thì chèn 1 cai, nếu nhiều link thì chít)
Tớ thử thây mấy giá tri5 bằng biến nhưng không biết cách nào lấy biến cả, ai đã từng chèn vao forum ... thì chỉ tớ với
http://gohooh.com

umemomo

Cái này còn dùng được không? Sao mình thử vào blog của mình nó bị lỗi vậy.

Ngôi Nhà Chung

hay quá đi mất..thanks anh Dũng



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home