cho mình xin code hiện toolip khi di chuột vào image ạ
[Hỏi đáp] Hiện toolip khi di chuột
25.07.15 13:091
25.07.15 13:152
Bạn đang sài tooltip dạng nào? và muốn hiện gì trong tooltip? demo?
25.07.15 18:093
chưa ạ, mình chưa xài loại toolip nào hết, mình có add zzrank của bạn, muốn hiện toolip về thông tin của nó
mav-land.forumvi.com
mav-land.forumvi.com
25.07.15 18:144
Hở, thế thì thêm thuộc tính title vào ảnh là đc rồi.
- Code:
<img src="http://r28.imgfast.net/users/2816/63/36/82/avatars/1-2.png" title="baivong's avatar" alt="baivong's avatar" />
25.07.15 18:195
ý mình là hiện toolip dạng như toolip của thống kê bài viết dc ko ạ
25.07.15 18:276
HTML:
CSS:
Javascript:
- Code:
<img src="http://r28.imgfast.net/users/2816/63/36/82/avatars/1-2.png" onmouseover="show_tooltip(this, 'baivong\'s avatar');" alt="baivong's avatar" />
CSS:
- Code:
#tooltip {
background-color: #FFF;
border: 2px solid #333;
color: #131313;
max-width: 550px;
padding: 10px;
}
Javascript:
- Code:
var versionMinor = parseFloat(navigator.appVersion),
versionMajor = parseInt(versionMinor),
IE = document.all && !window.opera && 7 > versionMajor,
IE7 = document.all && !window.opera && 7 <= versionMajor,
OP = window.opera,
FF = document.getElementById,
NS = document.layers;
function get_item(a, c) {
if (IE) return c ? window.opener.document.all[a] : document.all[a];
if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
}
var current_tooltip;
function show_tooltip(a, c) {
var b = get_item("tooltip");
b || (b = document.createElement("div"), b.setAttribute("id", "tooltip"), document.body.appendChild(b));
b.style.zIndex = 1000;
b.style.position = "absolute";
b.innerHTML = "<p>" + c + "</p>";
b.style.visibility = "visible";
a.onmousemove = move_tooltip;
a.onmouseout = function () {
b.style.visibility = "hidden"
};
a.title = ""
}
var offsetxpoint = -60,
offsetypoint = 20,
real_body = document.compatMode && "BackCompat" != document.compatMode ? document.documentElement : document.body,
real_body = document.documentElement ? document.documentElement : document.body;
function move_tooltip(a) {
var c = !IE ? a.pageX : event.clientX + real_body.scrollLeft,
d = !IE ? a.pageY : event.clientY + real_body.scrollTop,
b = IE && !window.opera ? real_body.clientWidth - event.clientX - offsetxpoint : window.innerWidth - a.clientX - offsetxpoint - 20,
e = IE && !window.opera ? real_body.clientHeight - event.clientY - offsetypoint : window.innerHeight - a.clientY - offsetypoint - 20,
f = 0 > offsetxpoint ? -1 * offsetxpoint : -1E3;
current_tooltip = get_item("tooltip");
current_tooltip.style.left = b < current_tooltip.offsetWidth ? IE ? real_body.scrollLeft + event.clientX - current_tooltip.offsetWidth + "px" : window.pageXOffset + a.clientX - current_tooltip.offsetWidth + "px" : c < f ? "5px" : c + offsetxpoint + "px";
current_tooltip.style.top = e < current_tooltip.offsetHeight ? IE ? real_body.scrollTop + event.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : window.pageYOffset + a.clientY - current_tooltip.offsetHeight - offsetypoint + "px" : d + offsetypoint + "px"
}
25.07.15 18:327
tks bạn nhiều lắm ạ :*
25.07.15 18:478
à, cho mình phiền baivong một chút nha, mình xài zzrank á, add toolip vào huy chương ở js thì làm sao z bạn, mình hơi đần ạ :(
25.07.15 18:529
Trong code zzRank, dòng 68, nó thế này:
- Code:
all += '<fieldset><legend>' + data_rank[key].title + '</legend><img src="' + data_rank[key].icon + '" alt="' + data_rank[key].title + '" title="' + data_rank[key].desc + '" /></fieldset>';
- Code:
all += '<fieldset><legend>' + data_rank[key].title + '</legend><img src="' + data_rank[key].icon + '" alt="' + data_rank[key].title + '" onmouseover="show_tooltip(this, \'' + data_rank[key].desc + '\');" /></fieldset>';
14.05.16 18:4210
Mình đã chèn CSS vào CSS Stylesheet và Javascript ở trên vào viewtopic_body để cho hiện tooltip của Bài viết liên quan nhưng bị lỗi khi di chuột vào thì nó lại hiển thị tiêu đề bài viết bên dưới một hàng. Ví dụ như khi đưa trỏ chuột vào bài Thêm quà tặng âm nhạc cho forumvi thì nó lại hiển thị bài Quà tặng âm nhạc:
Hình minh hoạ
Rất mong các bạn giúp mình sửa lỗi trên. Cảm ơn các bạn nhiều.
Demo: http://doquangthiem.lifeme.net/
Nick test: Panda
Password: 123panda
Hình minh hoạ
Rất mong các bạn giúp mình sửa lỗi trên. Cảm ơn các bạn nhiều.
Demo: http://doquangthiem.lifeme.net/
Nick test: Panda
Password: 123panda
27.08.16 18:5711
Cho cái thuộc tính title hiển thị như cái tooltip mà BaiVong hướng dẫn được ko? như vậy thì tất cả thuộc tính title trên toàn forum sẽ được hiển thị tooltip khi rê chuột vào.Zzbaivong wrote:Hở, thế thì thêm thuộc tính title vào ảnh là đc rồi.
- Code:
<img src="http://r28.imgfast.net/users/2816/63/36/82/avatars/1-2.png" title="baivong's avatar" alt="baivong's avatar" />
29.08.16 18:4412
Cho em hỏi ngoài lề 1 chút
thế cái code này có chức năng gì mà sao bác lúc nào cũng dùng vậy ( hay là để tương thích trên mọi trình duyệt )
thế cái code này có chức năng gì mà sao bác lúc nào cũng dùng vậy ( hay là để tương thích trên mọi trình duyệt )
- Code:
var versionMinor = parseFloat(navigator.appVersion),
versionMajor = parseInt(versionMinor),
IE = document.all && !window.opera && 7 > versionMajor,
IE7 = document.all && !window.opera && 7 <= versionMajor,
OP = window.opera,
FF = document.getElementById,
NS = document.layers;
function get_item(a, c) {
if (IE) return c ? window.opener.document.all[a] : document.all[a];
if (FF) return c ? window.opener.document.getElementById(a) : document.getElementById(a);
if (NS) return c ? window.opener.document.layers[a] : document.layers[a]
}
29.08.16 22:2113
anhdaodaica1 wrote:Cho cái thuộc tính title hiển thị như cái tooltip mà BaiVong hướng dẫn được ko? như vậy thì tất cả thuộc tính title trên toàn forum sẽ được hiển thị tooltip khi rê chuột vào.Zzbaivong wrote:Hở, thế thì thêm thuộc tính title vào ảnh là đc rồi.
- Code:
<img src="http://r28.imgfast.net/users/2816/63/36/82/avatars/1-2.png" title="baivong's avatar" alt="baivong's avatar" />
Trang Home có 2 tooltip kìa tách bỏ 1 cái ra đi rồi tính tiếp .
29.08.16 23:4714
1 cái của lasttopic, xóa thì nó không hiện thông tin khi rê chuột ^^loving9you wrote:anhdaodaica1 wrote:Cho cái thuộc tính title hiển thị như cái tooltip mà BaiVong hướng dẫn được ko? như vậy thì tất cả thuộc tính title trên toàn forum sẽ được hiển thị tooltip khi rê chuột vào.Zzbaivong wrote:Hở, thế thì thêm thuộc tính title vào ảnh là đc rồi.
- Code:
<img src="http://r28.imgfast.net/users/2816/63/36/82/avatars/1-2.png" title="baivong's avatar" alt="baivong's avatar" />
Trang Home có 2 tooltip kìa tách bỏ 1 cái ra đi rồi tính tiếp .
30.08.16 12:3115
Không đúng Last của Baivong đâu có 2 tooltip như vậy , do bạn add thêm JS tooltip nên mới vậy .
30.08.16 18:5416