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></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ự " và ' 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.