<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. PHP基础18：require和include

    <?phph //1.通过 include 或 require 语句,可以将 PHP 文件的内容插入另一个 PHP 文件(在服务器执行它之前) //include 和 require 语句是相同 ...

  2. GEOS库学习之三：空间关系、DE-9IM和谓词

    要判断两个多边形的关系,实际上属于几何图形空间关系判断.几何图形并不只有多边形一种,它包括点.线.面构成的任何图形,两两之间相互关系也有很多种,因此空间关系非常复杂.根据前人的研究,总结出了DE-9I ...

  3. ubuntu16.04下安装jdk和android studio

    1首先要在JDK官网下载对应的Linux的JDK版本.进入该网站后,先选择Accept License Agreement然后即可下载.本人的Linux系统为ubuntukylin 16.04  64 ...

  4. Maven实战之antrun插件

    在 Maven实际使用过程中,有时候在对一些旧有的项目的做从Makefile和ant到Maven迁移时需要对一些步骤做特殊处理,比如说编译JNI代 码,虽然Maven有个native插件可以用,但需要 ...

  5. ASP.NET MVC5 + EF6 入门教程 (6) View中的Razor使用

    文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-ef-6-get-started-model.html 上一节:ASP.NET MVC ...

  6. HoloLens开发手记 - Unity之Spatial Sounds 空间声音

    本文主要讲述如何在项目中使用空间声音特性.我们主要讲述必须的插件组件和Unity声音组件和属性的设置来确保空间声音的实现. Enabling Spatial Sound in Unity 在Unity ...

  7. C#Winform使用扩展方法自定义富文本框(RichTextBox)字体颜色

    在利用C#开发Winform应用程序的时候,我们有可能使用RichTextBox来实现实时显示应用程序日志的功能,日志又分为:一般消息,警告提示 和错误等类别.为了更好地区分不同类型的日志,我们需要使 ...

  8. [BZOJ1876][SDOI2009]superGCD（高精度）

    题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1876 分析: 以为辗转相减会TLE呢……但是好像没这个数据……就这么水过去了…… 辗转 ...

  9. Symfony启动过程详细学习

    想了解symfony的启动过程,必须从启动文件(这里就以开发者模式)开始. <?php /* * web/app_dev.php */ $loader = require_once __DIR_ ...

  10. JavaScript、jQuery、AJAX、JSON 解释