Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

#1on Tue Nov 20, 2012 11:49 am

avatar

TuanAnh



»†ổñg Quån «

default
A) Hiệu Ứng Tooltip
demo: rê chuột vào tiêu đề bài này.

Spoiler:
Cách làm:

-Tạo 1 trang HML và cho code này vào:

Code:
var offsetfromcursorX = 12;
var offsetfromcursorY = 10;
var offsetdivfrompointerX = 10;
var offsetdivfrompointerY = 13;
document.write('<div id="dhtmltooltip"></div>');
document.write('<img id="dhtmlpointer" src="http://www.c3zone.net/users/2611/10/63/87/album/pointe10.gif">');
var ie = document.all;
var ns6 = document.getElementById && ! document.all;
var enabletip = false;
var  tipobj = document.getElementById("dhtmltooltip");
var pointerobj = document.getElementById("dhtmlpointer");
function ietruebody() {
  return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
}
String.prototype.trim = function () {
    return this.replace(/^\s*/, "").replace(/\s*$/, "");
}
function showtip(thetext, thewidth, thecolor) {
  if (ns6 || ie) {
      if (typeof thewidth != "undefined")
        tipobj.style.width = thewidth + "px";
      if (typeof thecolor != "undefined" && thecolor != "")
        tipobj.style.backgroundColor = thecolor;
      thetext = thetext.trim();
      var arr = thetext.split(" ");
      for(i=0;i<arr.length;i++)
        if(arr[i].length>=40)
            thetext=thetext.replace(arr[i],arr[i].substr(0,40)+"...");
      tipobj.innerHTML = thetext;     
      enabletip = true;
      return false;
  }
}
function positiontip(e) {
  if (enabletip) {     
      var nondefaultpos = false;
      var curX = (ns6) ? e.pageX : event.clientX + ietruebody().scrollLeft;
      var curY = (ns6) ? e.pageY : event.clientY + ietruebody().scrollTop;
      var winwidth = ie && ! window.opera ? ietruebody().clientWidth : window.innerWidth - 20;
      var winheight = ie && ! window.opera ? ietruebody().clientHeight : window.innerHeight - 20;
      var rightedge = ie && ! window.opera ? winwidth - event.clientX - offsetfromcursorX : winwidth - e.clientX - offsetfromcursorX;
      var bottomedge = ie && ! window.opera ? winheight - event.clientY - offsetfromcursorY : winheight - e.clientY - offsetfromcursorY;
      var leftedge = (offsetfromcursorX < 0) ? offsetfromcursorX * (- 1) : - 1000;
      if (rightedge < tipobj.offsetWidth) {
        tipobj.style.left = curX - tipobj.offsetWidth + "px";
        nondefaultpos = true;
      }
      else if (curX < leftedge)
        tipobj.style.left = "5px";
      else {
        tipobj.style.left = curX + offsetfromcursorX - offsetdivfrompointerX + "px";
        pointerobj.style.left = curX + offsetfromcursorX + "px";
      }
      if (bottomedge < tipobj.offsetHeight) {
        tipobj.style.top = curY - tipobj.offsetHeight - offsetfromcursorY + "px";
        nondefaultpos = true;
      }
      else {
        tipobj.style.top = curY + offsetfromcursorY + offsetdivfrompointerY + "px";
        pointerobj.style.top = curY + offsetfromcursorY + "px";
      }
      tipobj.style.visibility = "visible";
 
      if (! nondefaultpos)
        pointerobj.style.visibility = "visible";
      else
        pointerobj.style.visibility = "hidden";
  }
}
function hidetip() {
  if (ns6 || ie) {
      enabletip = false;
      tipobj.style.visibility = "hidden";
      pointerobj.style.visibility = "hidden";
      tipobj.style.left = "-1000px";
      tipobj.style.backgroundColor = '';
      tipobj.style.width = '';
  }
}
document.onmousemove = positiontip;
-Vào header và cho code này vào
Code:
<script type="text/javascript" src="LINK TRANG HTML VỪA TẠO"></script>
-Cho code sau vào CSS
Code:
/* tooltip đen-------------------------------------------------------------*/

#dhtmlpointer, #dhtmltooltip
{
  z-index: 999;
  left: -300px; top:0px;
  visibility: hidden;
  position: absolute;
}
#dhtmltooltip
{-moz-opacity:.8;filter:alpha(opacity=80);left:-300px;opacity:.8;position:absolute;top:0;visibility:hidden;z-index:999}#c3tooltip{-moz-border-radius:6px;-webkit-border-radius:6px;background-color:#000;border:#000 0 solid;border-radius:6px;color:#fff;font-family:Arial;font-size:9pt;font-weight:700;max-width:340px;padding:15px;text-align:left;width:expression(document.body.clientWidth>340?"340px":"auto")}
B)Cách chèn hiệu ứng tooltip

Spoiler:
-Chèn theo cú pháp sau:
Code:
<b onmouseover="showtip('Nội Dung Hiển Thị Khi Rê Chuột Vào')" onmouseout="hidetip()" href="Đường Dẫn">Nôi Dung Muốn Chén Tooltip</b>

Lưu Ý: href="Đường Dẫn" Chỉ áp dụng cho nội dung tooltip muốn chèn muốn liên kết tới một địa chỉ khác.

VD: Chèn tooltip vào menu đăng kí :
Code:
<b onmouseover="showtip('Nếu bạn chưa có tài khoản thì vào đây là đúng rùi đó')" onmouseout="hidetip()" href="/register">Đăng Kí</b>

VD: tạo tooltip ở tiêu đề bài viết:


Code:
<b onmouseover="showtip('Thời Gian Gửi: {postrow.displayed.POST_DATE}')" onmouseout="hidetip()">{TOPIC_TITLE}</b>
cái này sẽ ko có href="Đường Dẫn"

Các cái khác bạn cứ làm theo mẫu là được

Chúc Bạn Thành Công







Chào bạn Khách viếng thăm đến với diễn đàn I LOVE YOU!


Bạn đã gửi 0 bài vào diễn đàn cố gằng phát huy nhé
Trả lời trích dẫnTrả lời

#2on Sun Nov 25, 2012 9:06 am

avatar

NguyenHung



» Thàñh Vïêñ Mới

default
Anh có thể hướng dẫn chèn tooltip lên bài viết liên quan giống forum của anh được ko???



Trả lời trích dẫnTrả lời

#3on Sun Nov 25, 2012 9:16 am

avatar

TuanAnh



»†ổñg Quån «

default
Bạn vào search_results_topics tìm code:
Code:
{searchresults.TOPIC_TITLE}

thay bằng
Code:
<b onmouseover="showtip('<font color="red"Thuộc chuyên mục:</font> {searchresults.FORUM_NAME}');" onmouseout="hidetip();" >{searchresults.TOPIC_TITLE}</b>







Chào bạn Khách viếng thăm đến với diễn đàn I LOVE YOU!


Bạn đã gửi 0 bài vào diễn đàn cố gằng phát huy nhé
Trả lời trích dẫnTrả lời

#4on Sun Nov 25, 2012 3:58 pm

avatar

NguyenHung



» Thàñh Vïêñ Mới

default
Thank anh

Trả lời trích dẫnTrả lời

#5on Wed May 08, 2013 7:35 pm

avatar

phamthohoa



» Thàñh Vïêñ Mới

default
Tuấn anh ơi hướng dẫn mình chèn vào mod_recent_topics (latest topic) với, mình mò mãi không được, khổ quá Sad(

Trả lời trích dẫnTrả lời

Sponsored content




default

Trả lời trích dẫnTrả lời

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Permissions in this forum:
Bạn không có quyền trả lời bài viết