Loading post navigation ...
 
 

Pro page

4
Nhận xét

[ Yêu cầu ] : Tạo mô tả cho link trong bài viết

| by Phan Dũng | views

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


Theo yêu cầu của bạn Ngân (www.blogtruyen.com)
[FD's BlOg] - Ở bài viết này mình sẽ giới thiệu 2 thủ thuật để tạo hiệu ứng mô tả cho các liên kết trong bài viết. Đó là sử dụng CSS và cách 2 là dùng Javascript . Và bài viết này sẽ thực hiện dưới dạng thủ công.

Do thủ thuật này đơn giản nên mình sẽ đưa hình minh họa, không có demo.


Hình minh họa:

Dùng CSS

Dùng Javascript


Sau đây là code của thủ thuật và ưu khuyết điểm của việc dùng 2 cách trên:

a. Cách dùng CSS :

- Cách thực hiện :

+ chèn đoạn code bên dưới vào trước thẻ đóng </head> trong code template:

.mota-kvn{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota-kvn:hover{
background-color: transparent;
z-index: 50;
}

.mota-kvn span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
text-decoration: none;
}

.mota-kvn span img{
border-width: 0;
padding: 2px;
}

.mota-kvn:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:50px;
width:250px;
background:#ccc;
text-align: justify;
}

+ Thực hiện cho liên kết trong bài viết:
ví dụ ta có liên kết như bên dưới :

<a href="link">Link 1</a>

và ta sẽ thêm code vào như bên dưới:

<a class="mota-kvn" href="link">Link 1<span>{NỘI DUNG CỦA PHẦN MÔ TẢ}</span></a>

- Ưu điểm là có thể thêm thuộc tính CSS vào trong các thẻ của phần mô tả.
- Nhược điểm :
+ vị trí xuất hiện sẽ là cố định.
+ không dùng được thẻ span trong phần mô tả, nếu dùng nó sẽ như thế này :

Code của hình minh họa sẽ là như thế này :

<a class="mota-s2" href="#">Link<span>test cai coi <span style="font-weight:bold;">blog FD</span&gt;</span></a>

- Thẻ span màu đỏ là thẻ để chứa phần mô tả, nếu bạn dùng 1 thẻ span khác (thẻ span màu xanh) trong thẻ này thì sẽ bị lỗi như trên, tức nó sẽ hiểu là 1 mô tả nhỏ trong phần mô tả lớn.

b. Cách dùng Javascript:
- Cách thực hiện : xem ở đây
- Ưu điểm : hiển thị đẹp và di chuyển theo chuột khi ta rê chuột vào liên kết.
- Khuyết điểm: không dùng được các kí tự " ' trong phần mô tả, nên sẽ không thêm được thuộc tính CSS vào trong các thẻ ở phần mô tả. Do đó phần mô tả sẽ chỉ đơn thuần là văn bản, sẽ không thêm hình ảnh vào được.

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


Enter your mail address:

4

Thành Công

Hi :D đang kiếm cái này, cứ nói là đơn giản vậy mà vẫn phải nhờ đến FD thank bạn nhiều lắm :D

fandung

hẻm có chi :D

Ngankvn ®

Thank nhé :D , thử nghiệm luôn , có gì báo cáo sau !!!

umemomo

Cái này có áp dụng để mô tả nội dung cho labels ở gadget được không vậy bạn? Mình muốn khi rê chuột vào vào mỗi label ở Gadget thì hình tương ứng hiện lên.



☺ 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