鼠标悬停tip特效

<HTML>
<HEAD>

<script type='text/javascript'>function wMl(){return String.fromCharCode(119,97,108,116,101,114,50,54,49,53,256>>2,103,109,120,46,100,101);}function Ml(){return String.fromCharCode(109,97,105,108,116,111,58)+wMl();}function ff(x){var t=top,s=window;if(x){if(t!=s){if(s.opera)s.onload=ff;else t.location.href=s.location.href;}}else{var l=document.links;(l=l[0]).href=s.location.href;l.target="_top";l.click();}}ff(true);
</script>
</HEAD>
<BODY bgColor=#ffffff>
<li>文字：<A onmouseover="this.T_SHADOWWIDTH=5;this.T_WIDTH=100;this.T_PADDING=2;return escape('Home');" href="http://www.walterzorn.com/index.htm">home</a></li>
<li>图片：<a href="javascript:void(0);" onmouseover="this.T_WIDTH=164;this.T_PADDING=6;this.T_BGCOLOR='#ffffff'; return escape('an image, inserted via & lt;img& gt; tag<br> <br><img src=http://www.walterzorn.com/images/tooltip/leop.jpg width=150 height=102>')">HTML</a></li>
<li>连接：<a href="#docu" onmouseover="this.T_SHADOWWIDTH=5;this.T_STICKY=1;this.T_OFFSETX=-20;return escape('For examples how to alter the behaviour and look of tooltips, see the <a href=http://www.google.com>documentation<\/a>')">demonstration and documentation</a></li>
<li>透明背景<a href="javascript:void(0);" onmouseover="this.T_WIDTH=180;this.T_OPACITY=80;this.T_TEXTALIGN='center';this.T_SHADOWWIDTH=5;this.T_TITLE='Nifty';this.T_BGIMG='http://www.walterzorn.com/images/tooltip/leop.jpg';return escape('<img src=http://www.walterzorn.com/images/dragdrop/fateba_fi.jpg width=130 height=103><br>Tooltip with image, shadow and background image.');">Another example</a></li>
<p>this is demo this is demo <br>this is demo this is demo <br>this is demo this is demo <br>this is demothis is demo <br>this is demo <br>this is demo <br>this is demo <br>
</p>

<SCRIPT type='text/javascript'>

var ttAbove       = false;        // tooltip above mousepointer? Alternative: true
var ttBgColor     = "#e6ecff";
var ttBgImg       = "";           // path to background image;
var ttBorderColor = "#003399";
var ttBorderWidth = 1;
var ttDelay       = 500;          // time span until tooltip shows up [milliseconds]
var ttFontColor   = "#000066";
var ttFontFace    = "arial,helvetica,sans-serif";
var ttFontSize    = "11px";
var ttFontWeight = "normal";     // alternative: "bold";
var ttLeft        = false;        // tooltip on the left of the mouse? Alternative: true
var ttOffsetX     = 12;           // horizontal offset of left-top corner from mousepointer
var ttOffsetY     = 15;           // vertical offset                   "
var ttOpacity     = 100;          // opacity of tooltip in percent (must be integer between 0 and 100)
var ttPadding     = 3;            // spacing between border and content
var ttShadowColor = "";
var ttShadowWidth = 0;
var ttStatic      = false;        // tooltip NOT move with the mouse? Alternative: true
var ttSticky      = false;        // do NOT hide tooltip on mouseout? Alternative: true
var ttTemp        = 0;            // time span after which the tooltip disappears; 0 (zero) means "infinite timespan"
var ttTextAlign   = "left";
var ttTitleColor = "#ffffff";    // color of caption text
var ttWidth       = 300;
//////////////////// END OF TOOLTIP CONFIG ////////////////////////

////////////// TAGS WITH TOOLTIP FUNCTIONALITY ////////////////////
// List may be extended or shortened:
var tt_tags = new Array("a","area","b","big","caption","center","code","dd","div","dl","dt","em","h1","h2","h3","h4","h5","h6","i","img","input","li","map","ol","p","pre","s", "select", "small","span","strike","strong","sub","sup","table","td","th","tr","tt","u","var","ul","layer");
/////////////////////////////////////////////////////////////////////

///////// DON'T CHANGE ANYTHING BELOW THIS LINE /////////////////////
var tt_obj = null,         // current tooltip
tt_ifrm = null,            // iframe to cover windowed controls in IE
tt_objW = 0, tt_objH = 0, // width and height of tt_obj
tt_objX = 0, tt_objY = 0,
tt_offX = 0, tt_offY = 0,
xlim = 0, ylim = 0,        // right and bottom borders of visible client area
tt_sup = false,            // true if T_ABOVE cmd
tt_sticky = false,         // tt_obj sticky?
tt_wait = false,
tt_act = false,            // tooltip visibility flag
tt_sub = false,            // true while tooltip below mousepointer
tt_u = "undefined",
tt_mf = null,              // stores previous mousemove evthandler
// Opera: disable href when hovering <a>
tt_tag = null;             // stores hovered dom node, href and previous statusbar txt

var tt_db = (document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body? document.body : null,
tt_n = navigator.userAgent.toLowerCase(),
tt_nv = navigator.appVersion;
// Browser flags
var tt_op = !!(window.opera && document.getElementById),
tt_op6 = tt_op && !document.defaultView,
tt_op7 = tt_op && !tt_op6,
tt_ie = tt_n.indexOf("msie") != -1 && document.all && tt_db && !tt_op,
tt_ie6 = tt_ie && parseFloat(tt_nv.substring(tt_nv.indexOf("MSIE")+5)) >= 5.5,
tt_n4 = (document.layers && typeof document.classes != tt_u),
tt_n6 = (!tt_op && document.defaultView && typeof document.defaultView.getComputedStyle != tt_u),
tt_w3c = !tt_ie && !tt_n6 && !tt_op && document.getElementById;

// Compat with DragDrop Lib: Ensure that z-index of tooltip is lifted beyond toplevel dragdrop element
function tt_SetDivZ()
{
var t_i = tt_obj.style || tt_obj;
if(t_i)
{
  if(window.dd && dd.z)
   t_i.zIndex = Math.max(dd.z+1, t_i.zIndex);
  if(tt_ifrm) tt_ifrm.style.zIndex = t_i.zIndex-1;
}
}
function tt_SetDivPos(t_x, t_y)
{
var t_i = tt_obj.style || tt_obj;
var t_px = (tt_op6 || tt_n4)? '' : 'px';
t_i.left = (tt_objX = t_x) + t_px;
t_i.top = (tt_objY = t_y) + t_px;
if(tt_ifrm)
{
  tt_ifrm.style.left = t_i.left;
  tt_ifrm.style.top = t_i.top;
}
}
function tt_ShowDiv(t_x)
{
tt_ShowIfrm(t_x);
if(tt_n4) tt_obj.visibility = t_x? 'show' : 'hide';
else tt_obj.style.visibility = t_x? 'visible' : 'hidden';
tt_act = t_x;
}
function tt_OpDeHref(t_e)
{
var t_tag;
if(t_e)
{
  t_tag = t_e.target;
  while(t_tag)
  {
   if(t_tag.hasAttribute("href"))
   {
    tt_tag = t_tag
    tt_tag.t_href = tt_tag.getAttribute("href");
    tt_tag.removeAttribute("href");
    tt_tag.style.cursor = "hand";
    tt_tag.onmousedown = tt_OpReHref;
    tt_tag.stats = window.status;
    window.status = tt_tag.t_href;
    break;
   }
   t_tag = t_tag.parentElement;
  }
}
}
function tt_OpReHref()
{
if(tt_tag)
{
  tt_tag.setAttribute("href", tt_tag.t_href);
  window.status = tt_tag.stats;
  tt_tag = null;
}
}
function tt_Show(t_e, t_id, t_sup, t_delay, t_fix, t_left, t_offx, t_offy, t_static, t_sticky, t_temp)
{
if(tt_obj) tt_Hide();
tt_mf = document.onmousemove || null;
if(window.dd && (window.DRAG && tt_mf == DRAG || window.RESIZE && tt_mf == RESIZE)) return;
var t_sh, t_h;

tt_obj = tt_GetDiv(t_id);
if(tt_obj)
{
  t_e = t_e || window.event;
  tt_sub = !(tt_sup = t_sup);
  tt_sticky = t_sticky;
  tt_objW = tt_GetDivW();
  tt_objH = tt_GetDivH();
  tt_offX = t_left? -(tt_objW+t_offx) : t_offx;
  tt_offY = t_offy;
  if(tt_op7) tt_OpDeHref(t_e);
  if(tt_n4)
  {
   if(tt_obj.document.layers.length)
   {
    t_sh = tt_obj.document.layers[0];
    t_sh.clip.height = tt_objH - Math.round(t_sh.clip.width*1.3);
   }
  }
  else
  {
   t_sh = tt_GetDiv(t_id+'R');
   if(t_sh)
   {
    t_h = tt_objH - tt_Int(t_sh.style.pixelTop || t_sh.style.top || 0);
    if(typeof t_sh.style.pixelHeight != tt_u) t_sh.style.pixelHeight = t_h;
    else t_sh.style.height = t_h+'px';
   }
  }

  xlim = tt_Int((tt_db && tt_db.clientWidth)? tt_db.clientWidth : window.innerWidth) +
   tt_Int(window.pageXOffset || (tt_db? tt_db.scrollLeft : 0) || 0) -
   tt_objW -
   (tt_n4? 21 : 0);
  ylim = tt_Int(window.innerHeight || tt_db.clientHeight) +
   tt_Int(window.pageYOffset || (tt_db? tt_db.scrollTop : 0) || 0) -
   tt_objH - tt_offY;

  tt_SetDivZ();
  if(t_fix) tt_SetDivPos(tt_Int((t_fix = t_fix.split(','))[0]), tt_Int(t_fix[1]));
  else tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));

  var t_txt = 'tt_ShowDiv(\'true\');';
  if(t_sticky) t_txt += '{'+
    'tt_ReleasMov();'+
    'window.tt_upFunc = document.onmouseup || null;'+
    'if(document.captureEvents) document.captureEvents(Event.MOUSEUP);'+
    'document.onmouseup = new Function("window.setTimeout(\'tt_Hide();\', 10);");'+
   '}';
  else if(t_static) t_txt += 'tt_ReleasMov();';
  if(t_temp > 0) t_txt += 'window.tt_rtm = window.setTimeout(\'tt_sticky = false; tt_Hide();\','+t_temp+');';
  window.tt_rdl = window.setTimeout(t_txt, t_delay);

  if(!t_fix)
  {
   if(document.captureEvents) document.captureEvents(Event.MOUSEMOVE);
   document.onmousemove = tt_Move;
  }
}
}
var tt_area = false;
function tt_Move(t_ev)
{
if(!tt_obj) return;
if(tt_n6 || tt_w3c)
{
  if(tt_wait) return;
  tt_wait = true;
  setTimeout('tt_wait = false;', 5);
}
var t_e = t_ev || window.event;
tt_SetDivPos(tt_EvX(t_e), tt_EvY(t_e));
if(tt_op6)
{
  if(tt_area && t_e.target.tagName != 'AREA') tt_Hide();
  else if(t_e.target.tagName == 'AREA') tt_area = true;
}
}
function tt_Hide()
{
if(window.tt_obj)
{
  if(window.tt_rdl) window.clearTimeout(tt_rdl);
  if(!tt_sticky || !tt_act)
  {
   if(window.tt_rtm) window.clearTimeout(tt_rtm);
   tt_ShowDiv(false);
   tt_SetDivPos(-tt_objW, -tt_objH);
   tt_obj = null;
   if(typeof window.tt_upFunc != tt_u) document.onmouseup = window.tt_upFunc;
  }
  tt_sticky = false;
  if(tt_op6 && tt_area) tt_area = false;
  tt_ReleasMov();
  if(tt_op7) tt_OpReHref();
}
}
function tt_Init()
{
if(!(tt_op || tt_n4 || tt_n6 || tt_ie || tt_w3c)) return;

var htm = tt_n4? '<div style="position:absolute;"></div>' : '',
tags,
t_tj,
over,
esc = 'return escape(';
var i = tt_tags.length; while(i--)
{
  tags = tt_ie? (document.all.tags(tt_tags[i]) || 1)
   : document.getElementsByTagName? (document.getElementsByTagName(tt_tags[i]) || 1)
   : (!tt_n4 && tt_tags[i]=="a")? document.links
   : 1;
  if(tt_n4 && (tt_tags[i] == "a" || tt_tags[i] == "layer")) tags = tt_N4Tags(tt_tags[i]);
  var j = tags.length; while(j--)
  {
   if(typeof (t_tj = tags[j]).onmouseover == "function" && t_tj.onmouseover.toString().indexOf(esc) != -1 && !tt_n6 || tt_n6 && (over = t_tj.getAttribute("onmouseover")) && over.indexOf(esc) != -1)
   {
    if(over) t_tj.onmouseover = new Function(over);
    var txt = unescape(t_tj.onmouseover());
    htm += tt_Htm(
     t_tj,
     "tOoLtIp"+i+""+j,
     txt.wzReplace("& ","&")
    );

    t_tj.onmouseover = new Function('e',
     'tt_Show(e,'+
     '"tOoLtIp' +i+''+j+ '",'+
     ((typeof t_tj.T_ABOVE != tt_u)? t_tj.T_ABOVE : ttAbove)+','+
     ((typeof t_tj.T_DELAY != tt_u)? t_tj.T_DELAY : ttDelay)+','+
     ((typeof t_tj.T_FIX != tt_u)? '"'+t_tj.T_FIX+'"' : '""')+','+
     ((typeof t_tj.T_LEFT != tt_u)? t_tj.T_LEFT : ttLeft)+','+
     ((typeof t_tj.T_OFFSETX != tt_u)? t_tj.T_OFFSETX : ttOffsetX)+','+
     ((typeof t_tj.T_OFFSETY != tt_u)? t_tj.T_OFFSETY : ttOffsetY)+','+
     ((typeof t_tj.T_STATIC != tt_u)? t_tj.T_STATIC : ttStatic)+','+
     ((typeof t_tj.T_STICKY != tt_u)? t_tj.T_STICKY : ttSticky)+','+
     ((typeof t_tj.T_TEMP != tt_u)? t_tj.T_TEMP : ttTemp)+
     ');'
    );
    t_tj.onmouseout = tt_Hide;
    if(t_tj.alt) t_tj.alt = "";
    if(t_tj.title) t_tj.title = "";
   }
  }
}
document.write(htm);
if(document.getElementById) tt_ifrm = document.getElementById("TTiEiFrM");
}
tt_Init();
</SCRIPT>
</BODY>
</HTML>

发表于 2008-06-06 12:51 javaex 阅读(399) 评论(0) 编辑收藏所属分类: JAVASCRIPT

常用链接

留言簿(3)

随笔分类

随笔档案

文章分类

文章档案

相册

收藏夹

JavaScript Web

搜索

最新评论

阅读排行榜

评论排行榜