<html>

<head>

<title>title及alt提示特效</title>

<style type="text/css">

body{font-size:12px;color:#000000}

td{font-size:12px;color:#000000}

a:link{font-size:12px;color:#000000}

</style>

<script language="javascript">

var pltsPop=null;

var pltsoffsetX = 12; // 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适

var pltsoffsetY = 15; // 弹出窗口位于鼠标下方的距离；3-12 合适

var pltsTitle="";

document.write('<div id=pltsTipLayer style="display: none;position: absolute; z-index:10001"></div>');

function pltsinits()

{

 document.onmouseover = plts;

 document.onmousemove = moveToMouseLoc;

}

function plts()

{ var o=event.srcElement;

 if(o.alt!=null  &&  o.alt!=""){oo.dypop=o.alt;o.alt=""};

 if(o.title!=null  &&  o.title!=""){oo.dypop=o.title;o.title=""};

 pltsPop=o.dypop;

 if(pltsPop!=null && pltsPop!="" && typeof(pltsPop)!="undefined")

 {

 pltsTipLayer.style.left=-1000;

 pltsTipLayer.style.display='';

 var Msg=pltsPop.replace(/\n/g,"<br>");

 MsgMsg=Msg.replace(/\0x13/g,"<br>");

 var re=/\{(.[^\{]*)\}/ig;

 if(!re.test(Msg))pltsTitle="『水木设计联盟』";

 else{

 re=/\{(.[^\{]*)\}(.*)/ig;

 pltsTitle=Msg.replace(re,"$1")+" ";

 re=/\{(.[^\{]*)\}/ig;

 MsgMsg=Msg.replace(re,"");

 MsgMsg=Msg.replace("<br>","");}

 var content =

 '<table style="FILTER:alpha(opacity=90);border: 1px solid #cccccc" id="toolTipTalbe" cellspacing="1" cellpadding="0"><tr><td width="100%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0">'+

 '<tr id="pltsPoptop"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="topleft" align="left">↖'+pltsTitle+'</p><p id="topright" align="right" style="display:none">'+pltsTitle+'↗</font></b></font></td></tr>'+

 '<tr><td "+attr+" style="padding-left:10px;padding-right:10px;padding-top: 8px;padding-bottom:6px;line-height:140%">'+Msg+'</td></tr>'+

 '<tr id="pltsPopbot" style="display:none"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="botleft" align="left">↙'+pltsTitle+'</p><p id="botright" align="right" style="display:none">'+pltsTitle+'↘</font></b></font></td></tr>'+

 '</table></td></tr></table>';

 pltsTipLayer.innerHTML=content;

 toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2);

 moveToMouseLoc();

 return true;

 }

 else

 {

 pltsTipLayer.innerHTML='';

 pltsTipLayer.style.display='none';

 return true;

 }

}

function moveToMouseLoc()

{

 if(pltsTipLayer.innerHTML=='')return true;

 var MouseX=event.x;

 var MouseY=event.y;

 var popHeight=pltsTipLayer.clientHeight;

 var popWidth=pltsTipLayer.clientWidth;

 if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)

 {

 popTopAdjust=-popHeight-pltsoffsetY*1.5;

 pltsPoptop.style.display="none";

 pltsPopbot.style.display="";

 }

 else

 {

 popTopAdjust=0;

 pltsPoptop.style.display="";

 pltsPopbot.style.display="none";

 }

 if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)

 {

 popLeftAdjust=-popWidth-pltsoffsetX*2;

 topleft.style.display="none";

 botleft.style.display="none";

 topright.style.display="";

 botright.style.display="";

 }

 else

 {

 popLeftAdjust=0;

 topleft.style.display="";

 botleft.style.display="";

 topright.style.display="none";

 botright.style.display="none";

 }

 pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust;

 pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust;

 return true;

}

pltsinits();

</script>

</head>

<body>

链接提示效果：<a href="http://www.lanrentuku.com/" target="_blank" title="title及alt提示特效,本程序由水木设计联盟整理推荐，希望大家喜欢">一个很酷的鼠标悬停特效，但有问题指教，我想知道怎么控制悬停时间</a>

</body>

</html>

　　

title及alt提示特效的更多相关文章

  1. title与alt的区别

    html中的title属性和alt属性让人有些混淆. 以前不知道有title这个属性,第一次用到它时,就和alt产生了混淆.一位朋友告诉我说,alt是图片img标签里用的,title是超链接里用的, ...

  2. 【转】title与alt的区别

    html中的title属性和alt属性让人有些混淆. 以前不知道有title这个属性,第一次用到它时,就和alt产生了混淆.一位朋友告诉我说,alt是图片img标签里用的,title是超链接里用的,当 ...

  3. html中的title和alt

    alt是html标签的属性,而title既是html标签,又是html属性. title标签这个不用多说,网页的标题就是写在<title></title>这对标签之内的.tit ...

  4. <img>的title和Alt有什么区别？

    Alt是<img>的特有属性,是图片内容的等价描述,用于图片无法加载时显示,读屏器阅读图片. title 可提高图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分析.鼠 ...

  5. 如何写一个网页标题title的闪动提示(转)

    通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见.如何实现则个功能呢? 思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ...

  6. 如何写一个网页标题title的闪动提示

    通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见.如何实现则个功能呢? 思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ...

  7. css3 小图标提示特效

    最近的计划,就是每天来几个特效,当然这里有限制,在什么候选区只能放一个,还每天有限制发布的,哎, 啊 终于写完了,看到一个挺好玩的东西,想到能不能用网页的特效做出来,试试呗!不过,一想肯东有很多的 相 ...

  8. 手写一个关于title属性自定义提示框解决浏览器（IE）不兼容问题

    <html> <head> <meta charset="utf-8"> <title>无标题页</title> < ...

  9. 5.href和src区别? title和alt【CSS】

    1.href (Hypertext Reference)指定网络资源的位置(超文本引用),从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系,在 link和a 等元素 ...

随机推荐

  1. Android清单文件详解(三)----应用程序的根节点<application>

    <application>节点是AndroidManifest.xml文件中必须持有的一个节点,它包含在<manifest>节点下.通过<application>节 ...

  2. Win7上防火墙开放FTP服务以及ping解决方案（zz）

    1.windows 防火墙开放ftp服务 The following 4 steps will allow both non-secure and SSL FTP traffic through fi ...

  3. Linux及安全——模块

    Linux及安全——模块 一.模块的编译.生成.测试.删除 1.编写模块代码 编写:gedit test.c 查看:cat test.c 2.查看版本信息 3.编写Makefile obj-m :这个 ...

  4. IOS开发之——reveal 的使用

    Reveal是一个iOS程序界面调试工具.使用Reveal,我们可以在iOS开发时动态地查看和修改应用程序的界面. 对于动态或复杂的交互界面,手写UI是不可避免的.通过Reveal,我们可以方便地调试 ...

  5. 百度地图ip定位，不算bug的bug

    做为一个入行不足两年的菜鸟,能在博客园写下第一篇博客,是需要多大的勇气啊.主要还是怕大神们喷啊.其次自己文笔实在太差了. 哈哈~还请各位大神,口下留情啊. 首先说下我的需求:一个需要城市分站的手机站. ...

  6. 整合 Bing translator 到自己的系统中

    整合这个功能, 是因为 aliexpress 的买家来自不同国家, 我的 "小卖家" 同步到买家的留言, 很多西班牙,俄罗斯等小语种的文字, 看不懂. Google 被墙, 基本很 ...

  7. 线段树好题（2004集训队林涛PPT中的3题）

    1.snake:主要是要意识到全局的可能连法只有一种= =(略坑,题目的最小长度是唬人的……),所以关键就是能否构造出符合题意的图,可以考虑搜索解决,搜出一个就OK了,但是会发现那些满足条件中线段在非 ...

  8. 第一节Unity3D简介

    Unity是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏.建筑可视化.实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎.Unity ...

  9. [转载]NSString中判断中文，英文，数字

    曾有需求做个用户名中非法字符的判断,要求是只能输入中英文和数字,其他字符一律非法,故写了下边一个程序mark一下吧~~ NSString *testString = @"春1mianBU觉晓 ...

  10. eclipse中安装svn插件

    Eclipse安装SVN 1.help->Install New Software2.Work With,点击add      name:subclipse      url:http://su ...