提示：在标签中添加title属性

1.文本中如何添加提示信息？

　　1.1直接在标签中加title=“值”；

　　例如：<p title="爱笑，爱哭，爱生活">我是女生，漂亮的女生，我是女生，爱哭的女生</p>

　　1.2当鼠标移到p标签上时，显示title里面的内容。

2.图片中如何添加提示信息？

2.1在整张图片中添加提示信息

　　直接在img标签中添加title=“内容”；另外：alt属性在图片加载不出来时候显示

　　例如：<img src="http://www.ld12.com/upimg358/allimg/20161213/x1jbf4jqu12444.gif" alt="tupian"  title="tupian">

　　当鼠标移到img标签上时显示title里面的内容

2.2在指定区域显示提示信息

　　步骤：a.在img标签中添加usemap="#内容"

　　　　　b.在img同级中添加map标签，并且在map标签里面添加area标签

　　　　　c.map标签里的id名和name名必须同img里的usemap里的内容一致

3.完整代码。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>usemap用法</title>

</head>

<body>

    <!-- 在文本中添加提示信息 -->

    <p title="爱笑，爱哭，爱生活">我是女生，漂亮的女生，我是女生，爱哭的女生</p>

    <!-- 在整张图片中添加提示信息 -->

    <img src="http://www.ld12.com/upimg358/allimg/20161213/x1jbf4jqu12444.gif" alt="tupian" title="tupian">    

    <!-- 在图片固定位置添加提示信息 -->

    <img src="http://www.ld12.com/upimg358/allimg/20161213/x1jbf4jqu12444.gif" alt="tupian" usemap="#tupian">

    <map name="tupian" id="tupian">

        <area shape="rect" coords="0,0,50,50" title="爱你" alt="图片">

        <!-- <area shape="cicle" coords="200,200,50" href="" alt=""> -->

        <!-- <area shape="polygon" coords="10,10,20,20,30,30,40，40" href="" alt="" title="爱你"> -->

    </map>

</body>

</html>

4.area中的shape和coords详解

　　shape选择的区域coords坐标

　　shape的值：default默认的区域    rect矩形区域     cicle圆形区域  poly多边形区域

　　4.1矩形：顶点坐标为（0,0）斜对角线坐标（200,200）

　　　　写法：<area shape="rect" coords="0,0,200,200" title="图片" alt="图片">

     4.2 圆形：圆心坐标（200,200）半径50

　　　　写法：<area shape="cicle" coords="200,200,50" href="" alt="">

　　4.3不规则图形：由坐标（10,10）（20,20）（30,30）（40,25）围成的多边形

　　　　写法：<area shape="polygon" coords="10,10,20,20,30,30,40,25" href="" alt="">

　　　　注意：不规则图形坐标值是成对出现的，所以coords里的值也是成对出现的，否则设置无效

　　　　　

　　

html中如何添加提示信息的更多相关文章

  1. HTML5中新添加事件

    HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

  2. Loadrunner中动态添加虚拟用户

    添加的虚拟用户会立马开始执行: 场景组的两种模式: Vuser组模式: Vuser组模式中,对于压力负载机是不能同时添加多个 但是我们可以在一个脚本里通过多次添加Vuser,每次添加30个Vuser, ...

  3. Android 在布局容器中动态添加控件

    这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...

  4. jplayer中动态添加列表曲目（js提取request中的list数据作为js参数使用）

    jplayer 的播放列表使用如下: $(document).ready(function(){ new jPlayerPlaylist({ jPlayer: "#jquery_jplaye ...

  5. Android 在程序中动态添加 View 布局或控件

    有时我们需要在程序中动态添加布局或控件等,下面用程序来展示一下相应的方法: 1.addView 添加View到布局容器 2.removeView 在布局容器中删掉已有的View 3.LayoutPar ...

  6. WCF 在VS中，添加服务引用，地址输入http://ip/Service.svc，点击前往，提示错误，内容如下：

    WCF的service端的webconfig如下: <?xml version="1.0"?> <configuration> <system.ser ...

  7. VC中动态添加控件

    VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...

  8. DevExpress中，添加Winform窗体到DockPanel z

    DevExpress中,添加Winform窗体到DockPanel // 在使用DevExpress过程中,原先已经创建好的导航窗体,如何添加到DockPanel中进行展示? FormX frmX = ...

  9. 在VS工程中，添加c/c++工程中外部头文件及库

    在VS工程中,添加c/c++工程中外部头文件及库的基本步骤: 1.添加工程的头文件目录:工程---属性---配置属性---c/c++---常规---附加包含目录:加上头文件存放目录. 2.添加文件引用 ...

随机推荐

  1. Be Better：遇见更好的自己-2016年记

    其实并不能找到好的词语来形容过去的一年,感觉就如此平淡的过了!没有了毕业的稚气,看事情淡了,少了一丝浮躁,多了一分认真.2016也许就是那句话-多读书,多看报,少吃零食多睡觉,而我更愿意说--Be B ...

  2. wepack+sass+vue 入门教程（一）

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  3. 【原】Github+Hexo+NextT搭建个人博客

    摘要 GitHub 是一个开源项目的托管网站,相信很多人都听过.在上面有很多高质量的项目代码,我们也可以把自己的项目代码托管到GitHub,与朋友们共享交流.GitHub Pages 是Github为 ...

  4. 视频 - 在 VirtualBox 中部署 OpenStack

    大家新年好,CloudMan 今天给大家带来一件新年礼物. 一直以来大家都反馈 OpenStack 学习有两大障碍:1. 实验环境难搭2. 体系复杂,难道大今天我就先帮大家解决环境问题.前两天我抽空在 ...

  5. python开发环境搭建

    虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运 ...

  6. IIC驱动移植在linux3.14.78上的实现和在linux2.6.29上实现对比（deep dive)

    首先说明下为什么写这篇文章,网上有许多博客也是介绍I2C驱动在linux上移植的实现,但是笔者认为他们相当一部分没有分清所写的驱动时的驱动模型,是基于device tree, 还是基于传统的Platf ...

  7. GPG终极指南（加密/签名）

    我们平时都听过非对称加密,公钥和私钥,签名验证,但这些证书都是怎么得到的呢?本篇文章会解答这些问题. 背景介绍 加密的一个简单但又实用的任务就是发送加密电子邮件.多年来,为电子邮件进行加密的标准一直是 ...

  8. 以项目谈WebGIS中Web制图的设计和实现

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景介绍 一般WebGIS项目中,前端展示数据的流程基本是先做数据入 ...

  9. 程序猿都没对象，JS竟然有对象？

    现在做项目基本是套用框架,不论是网上的前端还是后端框架,也会寻找一些封装好的插件拿来即用,但还是希望拿来时最好自己过后再回过头了解里面的原理,学习里面优秀的东西,不论代码封装性,还是小到命名. 好吧, ...

  10. 免费公开课，讲解强大的文档集成组件Aspose，现在可报名

    课程①:Aspose.Total公开课内容:讲解全能型文档管理工具Aspose.Total主要功能及应用领域时间:2016-11-24 14:30 (暂定)报名地址:http://training.e ...