• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Hiệu ứng fading tooltip với phần mô tả bằng hình ảnh

8
31/12/2010

Fading Tooltip là một script tạo hiệu ứng mô tả liên kết rất dễ sử dụng và rất nhẹ, chỉ với dung lượng 2kb. Nó đã được test trên các công cụ trình duyệt như IE6+, Firefox, Opera và Safari. Jacob Gube tại trang Six Revisions đã có bài viết về script này. Sau khi nghiên cứu, tôi xin trình bày cách thực hiện hiệu ứng tooltip như vậy để quý bạn đọc chia sẻ kinh nghiệm thiết kế web. :3)

Để cài đặt, trước tiên bạn hãy xem phần Demo, sau đó lần lượt đọc qua các bước theo thứ tự Script >> CSS >> HTML.

Đây là phần giới thiệu demo. Bạn hãy rê con trỏ vào các liên kết để thấy hiệu ứng. Demo 1 là kiểu tooltip có background và Demo 2 là kiểu tooltip không có background.


Ut tincidunt nisi quis elit dignissim mattis. Phasellus sit amet nunc eu est scelerisque tincidunt sit amet vitae sem. Sed ut nisi lorem. Vivamus ut felis libero. Vivamus venenatis justo ante. Nunc elementum interdum dolor, sit amet condimentum diam fermentum ac. Sed dictum condimentum arcu, id ornare turpis accumsan eu. Praesent ultricies egestas nulla at consectetur. Nunc sed est nulla, sit amet aliquam purus. Nam semper lacinia egestas. Nunc dictum lobortis arcu at bibendum?

Donec commodo nulla et magna malesuada a euismod metus aliquam. In hac habitasse platea dictumst. Vivamus mattis, nisi ac commodo cursus, metus justo eleifend sem, non auctor nisi felis eu tellus. Duis convallis condimentum elit, quis ullamcorper odio commodo ac. Aliquam ornare commodo fermentum. Aenean ut diam sed.


Bước 1. Đặt đoạn code sau đây vào trước thẻ </head>.

<script type="text/javascript">
var tooltip=function(){
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = 0;
var tt,t,c,b,h;
var ie = document.all ? true : false;
return{
show:function(v,w){
if(tt == null){
tt = document.createElement('div');
tt.setAttribute('id',id);
t = document.createElement('div');
t.setAttribute('id',id + 'top');
c = document.createElement('div');
c.setAttribute('id',id + 'cont');
b = document.createElement('div');
b.setAttribute('id',id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
document.body.appendChild(tt);
tt.style.opacity = 0;
tt.style.filter = 'alpha(opacity=0)';
document.onmousemove = this.pos;
}
tt.style.display = 'block';
c.innerHTML = v;
tt.style.width = w ? w + 'px' : 'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display = 'block';
b.style.display = 'block';
}
if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'}
h = parseInt(tt.offsetHeight) + top;
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(1)},timer);
},
pos:function(e){
var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'px';
tt.style.left = (l + left) + 'px';
},
fade:function(d){
var a = alpha;
if((a != endalpha && d == 1) || (a != 0 && d == -1)){
var i = speed;
if(endalpha - a < speed && d == 1){
i = endalpha - a;
}else if(alpha < speed && d == -1){
i = a;
}
alpha = a + (i * d);
tt.style.opacity = alpha * .01;
tt.style.filter = 'alpha(opacity=' + alpha + ')';
}else{
clearInterval(tt.timer);
if(d == -1){tt.style.display = 'none'}
}
},
hide:function(){
clearInterval(tt.timer);
tt.timer = setInterval(function(){tooltip.fade(-1)},timer);
}
};
}();
</script>

Bước 2. Đặt đoạn code sau đây vào trước thẻ </head>.

<style>
.hotspot {
color: #94D5FD;
cursor: pointer;
font-weight: bold;
font-family: Arial, Tahoma;
font-size: 13px;
}

#tt {
background: CornflowerBlue;
color: #FFF;
display: block;
font-family: Arial;
font-size: 16px;
padding: 5px 10px;
position: absolute;
-moz-border-radius: 10px;
}
</style>

Ở kiểu Demo 1, sử dụng background: CornflowerBlue;. Ở kiểu Demo 2, sử dụng background: transparent;.

Bước 3. Thiết lập cấu trúc HTML như sau.

<span class="hotspot" onmouseover="tooltip.show('Nội dung mô tả ngắn');" onmouseout="tooltip.hide();"> text liên kết </span>

Nếu trong phần mô tả, bạn muốn sử dụng các thẻ HTML thì phải mã hóa dấu < thành &lt; và dấu > thành &gt;.

Nếu sử dụng hình ảnh làm phần mô tả liên kết thì sử dụng cấu trúc như sau.

<span class="hotspot" onmouseover="tooltip.show('&lt;img src=\'URL_hình ảnh\'/&gt;');" onmouseout="tooltip.hide();"> text liên kết </span>

Cập nhật: Theo yêu cầu của bạn hoang-deejay, bạn ấy muốn sử dụng hiệu ứng này cho hình ảnh. Vậy đối với hình ảnh thì sử dụng cấu trúc HTML như sau.

<span class="hotspot" onmouseover="tooltip.show('Nội dung mô tả ngắn cho hình ảnh');" onmouseout="tooltip.hide();"> <img src="URL_hình ảnh" /> </span>

Ví dụ:

Bạn có thể tạo hiệu ứng này cho blogspot tương tự như các bước sử dụng cho website.

Chúc bạn thành công! :7)

{8 bình luậnAdd yours ?}

21:08:00, 31 thg 12, 2010

thủ thuật rất hay, bạn có thể viết luôn hiệu ứng mô ả cho hình ảnh đc ko! hehe

Reply
21:52:00, 31 thg 12, 2010

Đối với hình ảnh, chúng ta thường dùng thuộc tính alt và thuộc tính title để tạo hiệu ứng mô tả hình ảnh đơn giản, như sau.

<img src="URL_hình ảnh" alt="Mô tả hình ảnh" title="Mô tả hình ảnh" />

Hiệu ứng theo ý của bạn là như thế nào?

Reply
15:46:00, 1 thg 1, 2011

ý của mình là muốn bạn hướng dẫn thêm về hiệu ứng fading tooltip khi chỉ con trỏ chuột và 1 hình ảnh nào đó chứ ko phải là vào 1 đoạn text, hehe

Reply
16:18:00, 1 thg 1, 2011

À ra thế, ý kiến hay. Đã cập nhật phần cấu trúc HTML sử dụng cho hình ảnh. Bạn đọc lại nhé. :8)

Reply
20:30:00, 1 thg 1, 2011

Chào bạn mình muốn trao đổi link với bạn , link blog mình là gaunau.info thanks bạn nhiều lắm

Reply
11:24:00, 2 thg 1, 2011

Alo :)] đã add liên kết của bạn rồi. Bạn cũng vậy nhé. ;)

Reply
04:10:00, 3 thg 1, 2011

bạn ơi tớ muốn hỏi đoạn code mà pates vào comment ko đc !

Reply
22:31:00, 5 thg 1, 2011

Để Paste code vào Blogger Comment thì bạn phải mã hóa đoạn code đó trước đã rồi hãy Paste. Bạn hãy sử dụng công cụ Parse HTML trên blog tớ nhé. Click vào liên kết Parse HTML ở dưới khung mặt cười đó. :1)

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn