提示：在标签中添加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. C# 文章导航

    1. C#相关文章 1.1 C# 基础(一) 访问修饰符.ref与out.标志枚举等等 1.2 C# 基础(二) 类与接口 1.3 C# DateTime日期格式化 1.4 C# DateTime与时 ...

  2. 关于开启.NET在线提升教育培训的通知！ - 可在此页面观看在线直播！

    年前在线公开课程通知: 近期在开启VIP课程,隔天讲一次,年前其它时间插空讲公开课,主题:设计模式系列 1:培训 - 大概不会讲的内容: 1:不讲系列. 2:不讲入门. 3:不讲我不懂的! 2:培训 ...

  3. 微信小程序体验(2)：驴妈妈景区门票即买即游

    驴妈妈因为出色的运营能力,被腾讯选为首批小程序内测单位.驴妈妈的技术开发团队在很短的时间内完成了开发任务,并积极参与到张小龙团队的内测问题反馈.驴妈妈认为,移动互联网时代,微信是巨大的流量入口,也是旅 ...

  4. 【Web动画】SVG 实现复杂线条动画

    在上一篇文章中,我们初步实现了一些利用基本图形就能完成的线条动画: [Web动画]SVG 线条动画入门 当然,事物都是朝着熵增焓减的方向发展的,复杂线条也肯定比有序线条要多. 很多时候,我们无法人工去 ...

  5. jQuery.Ajax IE8 无效（CORS）

    今天在开发的时候,遇到一个问题,$.get()在 IE8 浏览器不起作用,但 Chrome,Firefox 却是可以的,网上资料很多,最后发现是 IE8 默认不支持 CORS 请求,需要手动开启下: ...

  6. 【NLP】干货！Python NLTK结合stanford NLP工具包进行文本处理

    干货!详述Python NLTK下如何使用stanford NLP工具包 作者:白宁超 2016年11月6日19:28:43 摘要:NLTK是由宾夕法尼亚大学计算机和信息科学使用python语言实现的 ...

  7. C#中Length和Count的区别（个人观点）

    这篇文章将会很短...短到比你的JJ还短,当然开玩笑了.网上有说过Length和count的区别,都是很含糊的,我没有发现有 文章说得比较透彻的,所以,虽然这篇文章很短,我还是希望能留在首页,听听大家 ...

  8. 【知识必备】一文让你搞懂design设计的CoordinatorLayout和AppbarLayout联动，让Design设计更简单~

    一.写在前面 其实博主在之前已经对design包的各个控件都做了博文说明,无奈个人觉得理解不够深入,所以有了这篇更加深入的介绍,希望各位看官拍砖~ 二.从是什么开始 1.首先我们得知道Coordina ...

  9. PHP之Memcache缓存详解

         Mem:memory缩写(内存):内存缓存 1.  断电或者重启服务器内存数据即消失,即临时数据: Memcache默认端口:11211 存入方式:key=>>value    ...

  10. [转载]强制不使用“兼容性视图”的HTML代码

    在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动选择"兼容性视图",强制IE以最高级别的可用模式显示内容呢?下面就介 ...