các kiểu chú thích siêu liên kết

• Bao gồm tiêu đề
• Không kèm tiêu đề
• Xuất hiện phía phải bên dưới trỏ chuột
• Xuất hiện ở giữa bên dưới trỏ chuột
• Xuất hiện bên trái phía dưới trỏ chuột
• Nổi góc trái bên trên màn h́nh
• Cố định một vị trí duy nhất
• Bảng giữ nguyên có kèm liên kết và nút đóng
• Giữ nguyên vị trí sau khi dời trỏ đi chỗ khác
• Tọa độ X từ trỏ chuột
• Tọa độ Y từ trỏ chuột
• Hiệu ứng xuất hiện ngẫu nhiên
• Mở kiểu khác
• Bảng liệt kê

HTML:

<SCRIPT language="JavaScript1.2" src="https://bendoi.googlecode.com/svn/trunk/js/link-title-Source.js"type="text/javascript"></SCRIPT>
<DIV id="TipLayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100"></DIV>
<SCRIPT language="JavaScript1.2" src="https://bendoi.googlecode.com/svn/trunk/js/link-title.js" type="text/javascript"></SCRIPT>
<ul>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[14],Style[12])" onMouseOut="htm()">Bao gồm tiêu đề</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[15],Style[12])" onMouseOut="htm()">Không kèm tiêu đề</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[3],Style[12])" onMouseOut="htm()">Xuất hiện phía phải bên dưới trỏ chuột</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[4],Style[1])" onMouseOut="htm()">Xuất hiện ở giữa bên dưới trỏ chuột</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[5],Style[2])" onmouseout="htm()">Xuất hiện bên trái phía dưới trỏ chuột</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[6],Style[3])" onMouseOut="htm()">Nổi góc trái bên trên màn h́nh</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[7],Style[4])" onMouseOut="htm()">Cố định một vị trí duy nhất</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[8],Style[5])" onmouseout="htm()">Bảng giữ nguyên có kèm liên kết và nút đóng</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[9],Style[6])" onMouseOut="htm()">Giữ nguyên vị trí sau khi dời trỏ đi chỗ khác</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[10],Style[7])" onMouseOut="htm()">Tọa độ X từ trỏ chuột</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[11],Style[8])" onMouseOut="htm()">Tọa độ Y từ trỏ chuột</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[12],Style[9])" onmouseout="htm()">Hiệu ứng xuất hiện ngẫu nhiên</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[13],Style[10])" onMouseOut="htm()">Mở kiểu khác</A></li>
<li><A href="http://web.bendoi.vn" onMouseOver="stm(Text[16],Style[12])" onMouseOut="htm()">Bảng liệt kê</A></li>
</ul>

link-title.JS

var FiltersEnabled = 1
//Text[...]=[Tieu de,Dong chu chinh]
Text[0]=["Tieu de","Dong chu chinh"]
Text[1]=["Tieu de","Dong chu chinh"]
Text[2]=["Tieu de","Dong chu chinh"]
Text[3]=["Phia duoi tay phai","Noi dat dong chu"]
Text[4]=["Phia duoi o giua","Noi dat dong chu"]
Text[5]=["Phia duoi tay trai","Noi dat dong chu"]
Text[6]=["Noi goc tren man hinh","Noi dat dong chu"]
Text[7]=["Co dinh mot vi tri","Noi dat dong chu"]
Text[8]=["Giu nguyen - lien ket - nut dong","Noi dat dong chu"]
Text[9]=["Giu nguyen vi tri canh tro chuot","Noi dat dong chu"]
Text[10]=["Toa do X tu tro chuot","Dinh vi voi toa do 40 X "]
Text[11]=["Toa do Y tu tro chuot","Dinh vi voi toa do 50 Y"]
Text[12]=["Hieu ung ngau nhien","Noi dat dong chu"]
Text[13]=["Mot kieu xuat hien khac","Noi dat dong chu"]
Text[14]=["Tua de","Noi dat dong chu"]
Text[15]=["","Chi don thuan dat dong chu"]
Text[16]=["","Bang liet ke :<li>noi dung 1</li> <li>noi dung 2</li> <li>noi dung 3</li> <li>noi dung 4</li>"]
// Style[...]=[Mau dong chu tieu de,Mau dong chu chinh,Mau nen tieu de,Mau nen cua dong chu,Hinh nen duoi tieu de,Hinh nen duoi dong chu chinh,Vi tri cua tieu de,Vi tri cua dong chu chinh,Loai font tieu de,Loai font dong chu chinh,Tip Position,Kieu Sticky,Co font cua dong tieu de,Co font cua dong chu chinh,Chieu rong,Chieu cao,Co vien cua khung,PadTextArea,Toa do X,Toa do Y,Thong so chuyen tiep,Khoang thoi gian chuyen tiep,Muc trong suot,Kieu bong do,Mau cua bong]
Style[0]=["#00CC00","#AAAAFF","#000000","#222222","","","","","","","","","","",200,"",2,2,10,10,51,1,0,"",""]
Style[1]=["#FF0000","#FFFFFF","#000000","#666666","","","","","","","center","","","",200,"",2,2,10,10,"","","","",""]
Style[2]=["#FFFF00","#FFFFFF","#000000","#666666","","","","","","","left","","","",200,"",2,2,10,10,"","","","",""]
Style[3]=["#00CC00","#FFFFFF","#000000","#666666","","","","","","","float","","","",200,"",2,2,10,10,"","","","",""]
Style[4]=["#FFFF00","#FFFFFF","#000000","#666666","","","","","","","fixed","","","",200,"",2,2,1,1,"","","","",""]
Style[5]=["#FF0000","#FFFFFF","#000000","#666666","","","","","","","","sticky","","",200,"",2,2,10,10,"","","","",""]
Style[6]=["#0000FF","#FFFFFF","#000000","#666666","","","","","","","","keep","","",200,"",2,2,10,10,"","","","",""]
Style[7]=["#9900FF","#FFFFFF","#000000","#666666","","","","","","","","","","",200,"",2,2,40,10,"","","","",""]
Style[8]=["#FF9900","#FFFFFF","#000000","#666666","","","","","","","","","","",200,"",2,2,10,50,"","","","",""]
Style[9]=["#6600FF","#FFFFFF","#000000","#666666","","","","","","","","","","",200,"",2,2,10,10,51,0.5,75,"simple","gray"]
Style[10]=["#FFFFFF","#FFFFFF","#000000","#666666","","","right","","Impact","cursive","center","",3,5,200,150,5,20,10,0,50,1,80,"complex","gray"]
Style[11]=["#333333","#FFFFFF","#000000","#666666","","","","","","","","","","",200,"",2,2,10,10,51,0.5,45,"simple","gray"]
Style[12]=["#00CC00","#FFFFFF","#000000","#666666","","","","","","","","","","",200,"",2,2,10,10,"","","","",""]
applyCssFilter()

link-title-Source.JS

<!--
var ua = navigator.userAgent
var ps = navigator.productSub
var dom = (document.getElementById)? 1:0
var ie4 = (document.all&&!dom)? 1:0
var ie5 = (document.all&&dom)? 1:0
var nn4 =(navigator.appName.toLowerCase() == "netscape" && parseInt(navigator.appVersion) == 4)
var nn6 = (dom&&!ie5)? 1:0
var sNav = (nn4||nn6||ie4||ie5)? 1:0
var cssFilters = ((ua.indexOf("MSIE 5.5")>=0||ua.indexOf("MSIE 6")>=0)&&ua.indexOf("Opera")<0)? 1:0
var Style=[],Text=[],Count=0,sbw=0,move=0,hs="",mx,my,scl,sct,ww,wh,obj,sl,st,ih,iw,vl,hl,sv,evlh,evlw,tbody
var HideTip = "eval(obj+sv+hl+';'+obj+sl+'=0;'+obj+st+'=-800')"
var doc_root = ((ie5&&ua.indexOf("Opera")<0||ie4)&&document.compatMode=="CSS1Compat")? "document.documentElement":"document.body"
var PX = (nn6)? "px" :""
if(sNav) {
window.onresize = ReloadTip
document.onmousemove = MoveTip
if(nn4) document.captureEvents(Event.MOUSEMOVE)
} if(nn4||nn6) {
mx = "e.pageX"
my = "e.pageY"
scl = "window.pageXOffset"
sct = "window.pageYOffset" if(nn4) {
obj = "document.TipLayer."
sl = "left"
st = "top"
ih = "clip.height"
iw = "clip.width"
vl = "'show'"
hl = "'hide'"
sv = "visibility="
}
else obj = "document.getElementById('TipLayer')."
}
if(ie4||ie5) {
obj = "TipLayer."
mx = "event.x"
my = "event.y"
scl = "eval(doc_root).scrollLeft"
sct = "eval(doc_root).scrollTop"
if(ie5) {
mx = mx+"+"+scl
my = my+"+"+sct
}
}
if(ie4||dom){
sl = "style.left"
st = "style.top"
ih = "offsetHeight"
iw = "offsetWidth"
vl = "'visible'"
hl = "'hidden'"
sv = "style.visibility="
}
if(ie4||ie5||ps>=20020823) {
ww = "eval(doc_root).clientWidth"
wh = "eval(doc_root).clientHeight"
} else {
ww = "window.innerWidth"
wh = "window.innerHeight"
evlh = eval(wh)
evlw = eval(ww)
sbw=15
}
function applyCssFilter(){
if(cssFilters&&FiltersEnabled) {
var dx = " progid:DXImageTransform.Microsoft."
TipLayer.style.filter = "revealTrans()"+dx+"Fade(Overlap=1.00 enabled=0)"+dx+"Inset(enabled=0)"+dx+"Iris(irisstyle=PLUS,motion=in enabled=0)"+dx+"Iris(irisstyle=PLUS,motion=out enabled=0)"+dx+"Iris(irisstyle=DIAMOND,motion=in enabled=0)"+dx+"Iris(irisstyle=DIAMOND,motion=out enabled=0)"+dx+"Iris(irisstyle=CROSS,motion=in enabled=0)"+dx+"Iris(irisstyle=CROSS,motion=out enabled=0)"+dx+"Iris(irisstyle=STAR,motion=in enabled=0)"+dx+"Iris(irisstyle=STAR,motion=out enabled=0)"+dx+"RadialWipe(wipestyle=CLOCK enabled=0)"+dx+"RadialWipe(wipestyle=WEDGE enabled=0)"+dx+"RadialWipe(wipestyle=RADIAL enabled=0)"+dx+"Pixelate(MaxSquare=35,enabled=0)"+dx+"Slide(slidestyle=HIDE,Bands=25 enabled=0)"+dx+"Slide(slidestyle=PUSH,Bands=25 enabled=0)"+dx+"Slide(slidestyle=SWAP,Bands=25 enabled=0)"+dx+"Spiral(GridSizeX=16,GridSizeY=16 enabled=0)"+dx+"Stretch(stretchstyle=HIDE enabled=0)"+dx+"Stretch(stretchstyle=PUSH enabled=0)"+dx+"Stretch(stretchstyle=SPIN enabled=0)"+dx+"Wheel(spokes=16 enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=0,motion=forward enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=0,motion=reverse enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=1,motion=forward enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=1,motion=reverse enabled=0)"+dx+"Zigzag(GridSizeX=8,GridSizeY=8 enabled=0)"+dx+"Alpha(enabled=0)"+dx+"Dropshadow(OffX=3,OffY=3,Positive=true,enabled=0)"+dx+"Shadow(strength=3,direction=135,enabled=0)"
}
}
function stm(t,s) {
  if(sNav) {
  if(t.length<2||s.length<25) {
var ErrorNotice = "DHTML TIP MESSAGE VERSION 1.2 ERROR NOTICE.\n"
if(t.length<2&&s.length<25) alert(ErrorNotice+"It looks like you removed an entry or more from the Style Array and Text Array of this tip.\nTheir should be 25 entries in every Style Array even though empty and 2 in every Text Array. You defined only "+s.length+" entries in the Style Array and "+t.length+" entry in the Text Array. This tip won't be viewed to avoid errors")
else if(t.length<2) alert(ErrorNotice+"It looks like you removed an entry or more from the Text Array of this tip.\nTheir should be 2 entries in every Text Array. You defined only "+t.length+" entry. This tip won't be viewed to avoid errors.")
else if(s.length<25) alert(ErrorNotice+"It looks like you removed an entry or more from the Style Array of this tip.\nTheir should be 25 entries in every Style Array even though empty. You defined only "+s.length+" entries. This tip won't be viewed to avoid errors.")
  }
  else {
var ab = "" ;var ap = ""
var titCol = (s[0])? "COLOR='"+s[0]+"'" : ""
var txtCol = (s[1])? "COLOR='"+s[1]+"'" : ""
var titBgCol = (s[2])? "BGCOLOR='"+s[2]+"'" : ""
var txtBgCol = (s[3])? "BGCOLOR='"+s[3]+"'" : ""
var titBgImg = (s[4])? "BACKGROUND='"+s[4]+"'" : "" var txtBgImg = (s[5])? "BACKGROUND='"+s[5]+"'" : ""
var titTxtAli = (s[6] && s[6].toLowerCase()!="left")? "ALIGN='"+s[6]+"'" : ""
var txtTxtAli = (s[7] && s[7].toLowerCase()!="left")? "ALIGN='"+s[7]+"'" : ""
var add_height = (s[15])? "HEIGHT='"+s[15]+"'" : ""
if(!s[8])  s[8] = "Verdana,Arial,Helvetica"
if(!s[9])  s[9] = "Verdana,Arial,Helvetica" if(!s[12]) s[12] = 1
if(!s[13]) s[13] = 1
if(!s[14]) s[14] = 200
if(!s[16]) s[16] = 0
if(!s[17]) s[17] = 0
if(!s[18]) s[18] = 10
if(!s[19]) s[19] = 10
hs = s[11].toLowerCase()
if(ps==20001108){
if(s[2]) ab="STYLE='border:"+s[16]+"px solid"+" "+s[2]+"'"
ap="STYLE='padding:"+s[17]+"px "+s[17]+"px "+s[17]+"px "+s[17]+"px'"}
var closeLink=(hs=="sticky")? "<TD ALIGN='right'><FONT SIZE='"+s[12]+"' FACE='"+s[8]+"'><A HREF='javascript:void(0)' ONCLICK='stickyhide()' STYLE='text-decoration:none;color:"+s[0]+"'><B>Close</B></A></FONT></TD>":""
var title=(t[0]||hs=="sticky")? "<TABLE WIDTH='100%' BORDER='0' CELLPADDING='0' CELLSPACING='0'><TR><TD "+titTxtAli+"><FONT SIZE='"+s[12]+"' FACE='"+s[8]+"' "+titCol+"><B>"+t[0]+"</B></FONT></TD>"+closeLink+"</TR></TABLE>" : ""
var txt="<TABLE "+titBgImg+" "+ab+" WIDTH='"+s[14]+"' BORDER='0' CELLPADDING='"+s[16]+"' CELLSPACING='0' "+titBgCol+" ><TR><TD>"+title+"<TABLE WIDTH='100%' "+add_height+" BORDER='0' CELLPADDING='"+s[17]+"' CELLSPACING='0' "+txtBgCol+" "+txtBgImg+"><TR><TD "+txtTxtAli+" "+ap+" VALIGN='top'><FONT SIZE='"+s[13]+"' FACE='"+s[9]+"' "+txtCol +">"+t[1]+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
if(nn4) {
with(eval(obj+"document")) {
open()
write(txt)
close()
}
}
else eval(obj+"innerHTML=txt")
tbody = {
Pos:s[10].toLowerCase(),
Xpos:s[18],
Ypos:s[19],
Transition:s[20],
Duration:s[21],
Alpha:s[22],
ShadowType:s[23].toLowerCase(),
ShadowColor:s[24],
Width:parseInt(eval(obj+iw)+3+sbw)
}
if(ie4) {
TipLayer.style.width = s[14]
tbody.Width = s[14]
}
Count=0 move=1
  }
  }
}
function MoveTip(e) {
if(move) {
var X,Y,MouseX = eval(mx),MouseY = eval(my); tbody.Height = parseInt(eval(obj+ih)+3)
tbody.wiw = parseInt(eval(ww+"+"+scl)); tbody.wih = parseInt(eval(wh+"+"+sct))
switch(tbody.Pos) {
case "left" : X=MouseX-tbody.Width-tbody.Xpos; Y=MouseY+tbody.Ypos; break
case "center": X=MouseX-(tbody.Width/2); Y=MouseY+tbody.Ypos; break
case "float": X=tbody.Xpos+eval(scl); Y=tbody.Ypos+eval(sct); break case "fixed": X=tbody.Xpos; Y=tbody.Ypos; break default: X=MouseX+tbody.Xpos; Y=MouseY+tbody.Ypos
}
if(tbody.wiw<tbody.Width+X) X = tbody.wiw-tbody.Width
if(tbody.wih<tbody.Height+Y+sbw) {
if(tbody.Pos=="float"||tbody.Pos=="fixed") Y = tbody.wih-tbody.Height-sbw
else Y = MouseY-tbody.Height
}
if(X<0) X=0
eval(obj+sl+"=X+PX;"+obj+st+"=Y+PX")
ViewTip()
}
}
function ViewTip() {
  Count++
if(Count == 1) {
if(cssFilters&&FiltersEnabled) { for(Index=28; Index<31; Index++) { TipLayer.filters[Index].enabled = 0 }
for(s=0; s<28; s++) { if(TipLayer.filters[s].status == 2) TipLayer.filters[s].stop() }
if(tbody.Transition == 51) tbody.Transition = parseInt(Math.random()*50)
var applyTrans = (tbody.Transition>-1&&tbody.Transition<24&&tbody.Duration>0)? 1:0
var advFilters = (tbody.Transition>23&&tbody.Transition<51&&tbody.Duration>0)? 1:0
var which = (applyTrans)?0:(advFilters)? tbody.Transition-23:0
if(tbody.Alpha>0&&tbody.Alpha<100) {
  TipLayer.filters[28].enabled = 1
  TipLayer.filters[28].opacity = tbody.Alpha
}
if(tbody.ShadowColor&&tbody.ShadowType == "simple") {
  TipLayer.filters[29].enabled = 1
  TipLayer.filters[29].color = tbody.ShadowColor
}
else if(tbody.ShadowColor&&tbody.ShadowType == "complex") {
  TipLayer.filters[30].enabled = 1
  TipLayer.filters[30].color = tbody.ShadowColor
}
if(applyTrans||advFilters) {
eval(obj+sv+hl)
  if(applyTrans) TipLayer.filters[0].transition = tbody.Transition
  TipLayer.filters[which].duration = tbody.Duration
  TipLayer.filters[which].apply()
}
}
  eval(obj+sv+vl)
if(cssFilters&&FiltersEnabled&&(applyTrans||advFilters)) TipLayer.filters[which].play()
if(hs == "sticky") move=0
  }
}
function stickyhide() {
eval(HideTip)
}
function ReloadTip() {
if(nn4&&(evlw!=eval(ww)||evlh!=eval(wh))) location.reload()
else if(hs == "sticky") eval(HideTip)
}
function htm() {
if(sNav) {
if(hs!="keep") {
move=0;
if(hs!="sticky") eval(HideTip)
} }
}
//-->

Thanks gelukrait@yahoo.com

---

Bạn cần tối thiểu 20k để có được hiệu ứng này, với 20k là con số đáng do dự cho một hiệu ứng của siêu liên kết.