<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. 那些年我们写过的T-SQL（下篇）(转)

    原文:http://www.cnblogs.com/wanliwang01/p/TSQL_Base04.html   下篇的内容很多都会在工作中用到,尤其是可编程对象,那些年我们写过的存储过程,有木有 ...

  2. opencv3学习：reshape函数

    在opencv中,reshape函数比较有意思,它既可以改变矩阵的通道数,又可以对矩阵元素进行序列化,非常有用的一个函数. 函数原型: C++: Mat Mat::reshape() const 参数 ...

  3. Java系列：Add Microsoft SQL JDBC driver to Maven

    Maven does not directly support some libraries, like Microsoft's SQL Server JDBC. This tutorial will ...

  4. 实验二实验报告 20135324&&20135330

    北京电子科技学院(BESTI) 实 验 报 告 课程: 深入理解计算机系统 班级: 1353 姓名: 杨舒雯 张若嘉 学号: 20135324 20135330 成绩: 指导教师: 娄嘉鹏 实验日期: ...

  5. File类和RandomAccessFile类

    目录 File类     File类常用操作     (1)创建文件     (2)删除文件     (3)创建文件夹     (4)列出指定目录全部文件     (5)删除目录 RandomAcce ...

  6. CUDA编程学习（一）

    /****c code****/ #include<stdio.h> int main() { printf("Hello world!\n); ; } /****CUDA co ...

  7. PRML读书会第三章 Linear Models for Regression(线性基函数模型、正则化方法、贝叶斯线性回归等)

    主讲人 planktonli planktonli(1027753147) 18:58:12  大家好,我负责给大家讲讲 PRML的第3讲 linear regression的内容,请大家多多指教,群 ...

  8. 一个js验证类

    //******************************************************************* //作者: 丁伯洋 //日期: 2006-4-27 //概要 ...

  9. fis-receiver：一行命令将项目部署到远程服务器

    前言 本项目基于FIS2,没了.其实fis项目本身就提供了php版本的范例,这里翻译成node版本. 项目地址:https://github.com/chyingp/fis-receiver 服务端接 ...

  10. jdbc基础 (二) 通过properties配置文件连接数据库

    csdn博文地址:jdbc基础 (二) 通过properties配置文件连接数据库 上一篇描述了对mysql数据库的简单操作,下面来看一下开发中应该如何灵活应用. 因为jdbc对数据库的驱动加载.连接 ...