`
xiuying
  • 浏览: 537385 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

用浮动层显示html标签的title信息

    博客分类:
  • web
阅读更多
 代码
  1. <body>  
  2. <img width=100 src="timelogo.gif" title="图片信息" ><p>  
  3. <a href="###" title="文字信息,深灰背景色,黄色文字">文字链接</a><p>  
  4. <input type="text" name="n" id="n" size="20px" title="文本框"/>  
  5. <div style="visibility:hidden;border:0px solid #000000;background-color:#555555;font-size:12px;color:yellow;position:absolute;" id=titlelayer></div>  
  6. <script>  
  7. document.body.onmousemove=quicktitle;   
  8. document.body.onmouseover=gettitle;   
  9. document.body.onmouseout=restoretitle;   
  10.   
  11. var temptitle='';   
  12.   
  13. function gettitle() {   
  14. if(event.srcElement.title && (event.srcElement.title!='' || (event.srcElement.title=='' && temptitle!=''))) {   
  15. titlelayer.style.left=event.x;   
  16. titlelayer.style.top=event.y+20;   
  17. titlelayer.style.visibility='visible';   
  18. temptitle=event.srcElement.title;   
  19. event.srcElement.title='';   
  20. titlelayer.innerText=temptitle;   
  21. }   
  22. }   
  23.   
  24. function quicktitle() {   
  25.  if(titlelayer.style.visibility=='visible') {   
  26. titlelayer.style.left=event.x+document.body.scrollLeft;   
  27. titlelayer.style.top=event.y+20+document.body.scrollTop;   
  28. }   
  29. }   
  30.   
  31. function restoretitle() {   
  32. event.srcElement.title=temptitle;   
  33. temptitle='';   
  34. titlelayer.style.visibility='hidden';   
  35. }   
  36. </script>  
  37. </body>  

感觉在开发中这个用得还比较多,就贴出来了,样式自己美化呵呵。

可以把里面的脚本提取出来做成自己的通用函数,就不用每次在页面上写。

分享到:
评论

相关推荐

    JSP的系统性教材

    ……&lt;/head&gt;:HTML文件的头部标记,在其中可以放置页面的标题以及文件信息等内容,习惯将这两个标签之间的内容统称为HTML的头部。 ……&lt;/body&gt;:用来指明文档的主体区域,网页所要显示的内容都要放置在这个 标记内...

    HTML5与CSS3基础教程(第8版)高清文字

    3.15 为元素添加title属性 61 3.16 添加注释 62 第4章 文本 63 4.1 添加段落 63 4.2 指定细则 64 4.3 标记重要和强调的文本 65 4.4 创建图 67 4.5 指明引用或参考 69 4.6 引述文本 70 ...

    html入门到放弃笔记

    4、title :鼠标悬停时,要显示的文本 Demo : 1、将 学子网的 logo 下载下来 2、显示在自己的网页中 3、超链接 1、语法 标记:内容 属性: 1、href : 要链接的HTML页面URL 2、target : 目标,指定新网页...

    paper-input:Angular.js 的输入指令,带有动画标签、提示、错误消息

    纸张输入angular.js 的输入指令特征浮动标签暗示错误信息用法凉亭安装角纸输入 &lt;!doctype html&gt;&lt;html lang="en" ng-app="app"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title...

    My-Full-stack-WebD-Course:这是一个完整的初学者,以推进由我仅 @rajmondal 创建的全栈 Web 开发课程。 在这个存储库中,我按课程内容跟踪了所有内容

    CSS -&gt; CSS 中的选择器内联、内部和外部 CSS CSS 中的选择器Chrome 开发工具CSS 中的字体CSS 中的颜色边框和背景盒模型、边距和填充浮动和清除样式链接和按钮CSS 显示属性 - 内联、块、内联块CSS 弹性盒自定义属性和...

    文章管理系统

    修复“最新信息”列表页会显示出 没有设置“最新信息”属性的文章BUG 2.修复文章管理,状态查询失效BUG 3.栏目编辑 新增 外部链接/单页面 也可设置打开方式 4.内容页正文底部广告移到正文分页下面 5.新增编号22...

    JS_basics:前端练习 内容为自己的练习题

    JS_basics前端练习 内容为自己的练习题有常见的算法题 以及常考的 Javascript html css vue题目 引自:前端小哥CSS HTML1.行内元素/块级元素,非替换元素/替换元素★★★2.img标签 的title和alt属性★★3.meta标签 ...

    buyeju企业网站系统 v3.0

    1、所有网页title和meta标签自动设计 2、所有前台网页都是生成HTML 3、产品网页是目录结构的URL等等 4、自动生成XML格式的网站地图 二、拥有在线客服功能 1、后台被有潜在客户跟踪功能 通过通过后台直接向潜在...

    DF-seo企业网管理系统 v2.0

    1、所有网页title和meta标签自动设计2、所有前台网页都是生成HTML3、产品网页是目录结构的URL等等4、自动生成XML格式的网站地图二、、拥有强大营销功能1、拥有抓潜工具,可以迅速收集大量的潜在客户联系方式2、后台...

    buyeju企业网站系统 v3.0.rar

    1、所有网页title和meta标签自动设计 2、所有前台网页都是生成HTML 3、产品网页是目录结构的URL等等 4、自动生成XML格式的网站地图 二、拥有在线客服功能 1、后台被有潜在客户跟踪功能 通过通过后台直接向潜在...

    CSS position:absolute全面了解

    绝对定位有着与浮动一样的特性,即包裹性和破坏性。 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度;而绝对定位的元素高度和宽度都没有了。 请看下面代码: XML/HTML Code复制内容到剪贴板 &lt;!...

    DF-seo企业网管理系统 v2.0.rar

    1、所有网页title和meta标签自动设计 2、所有前台网页都是生成HTML 3、产品网页是目录结构的URL等等 4、自动生成XML格式的网站地图 二、、拥有强大营销功能 1、拥有抓潜工具, 可以迅速收集大量的潜在客户联系...

    HTML5与CSS3基础教程(第8版)中文高清版

    1.3 标签:元素、属性、值及其他 ......4 1.4 网页的文本内容 ..............................7 1.5 链接、图像和其他非文本内容 ......8 1.6 文件名和文件夹名 ..........................9 1.7 URL ..................

    SongCMS企业建站后台管理系统v1.1

    ATitle.js:将超链接标签中的Title转成支持Html跟随鼠标显示 Class.asp:前台通用调用类文件 Config.asp:网站后台功能全局设定 Conn.asp:数据库连接文件 Const.asp:前台功能控制页面 Error.asp:错误处理页 ...

    多飞企业网站系统 2.0.rar

    1、所有网页title和meta标签自动设计 2、所有前台网页都是生成HTML 3、产品网页是目录结构的URL等等 4、自动生成XML格式的网站地图 二、、拥有强大营销功能 1、拥有抓潜工具, 可以迅速收集大量的潜在客户联系...

    WEB设计大全

    页脚网页 &lt;br&gt;9.8.3 浮动窗口网页 &lt;br&gt;9.8.4 可伸展网页 &lt;br&gt;9.9 通用站点外观之路 &lt;br&gt;9.10 小结 &lt;br&gt;第10章 文本 &lt;br&gt;10.1 媒体情况 &lt;br&gt;10.1.1 用图形控制文本 &lt;br&gt;10.1.2 举起...

    WEB设计大全(part2)

    页脚网页 &lt;br&gt;9.8.3 浮动窗口网页 &lt;br&gt;9.8.4 可伸展网页 &lt;br&gt;9.9 通用站点外观之路 &lt;br&gt;9.10 小结 &lt;br&gt;第10章 文本 &lt;br&gt;10.1 媒体情况 &lt;br&gt;10.1.1 用图形控制文本 &lt;br&gt;10.1.2 举起...

Global site tag (gtag.js) - Google Analytics