提示：在标签中添加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. shell注释

    sh里没有多行注释,只能每一行加一个#号.只能像这样: #-------------------------------------------- # 这是一个自动打ipa的脚本,基于webfrogs ...

  2. 【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://bugly.qq.com/bbs/forum.php?mod=viewthread&tid=1277 视频直 ...

  3. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  4. angular2系列教程（八）In-memory web api、HTTP服务、依赖注入、Observable

    大家好,今天我们要讲是angular2的http功能模块,这个功能模块的代码不在angular2里面,需要我们另外引入: index.html <script src="lib/htt ...

  5. npm 使用小结

    本文内容基于 npm 4.0.5 概述 npm (node package manager),即 node 包管理器.这里的 node 包就是指各种 javascript 库. npm 是随同 Nod ...

  6. JDK安装与配置

    JDK安装与配置 一.下载 JDK是ORACLE提供免费下载使用的,官网地址:https://www.oracle.com/index.html 一般选择Java SE版本即可,企业版的选择Java ...

  7. 查看mac中磁盘空间占用情况

    今天发现磁盘空间不够了,首先要找到那些文件夹占用了磁盘空间. du命令很好使 du -c -d 1 -m | sort -n -c 显示当前文件夹总计占用空间 -d 1 层级为1,即只显示当前目录下一 ...

  8. AutoMapper(四)

    返回总目录 自定义值解析 虽然AutoMapper覆盖了相当一部分目标成员的映射场景,但是还有 1-5%的目标值需要解析处理一下.很多时候,自定义的值解析是可以放在领域层的领域逻辑.然而,如果该逻辑只 ...

  9. C#高级知识点&(ABP框架理论学习高级篇)——白金版

    前言摘要 很早以前就有要写ABP高级系列教程的计划了,但是迟迟到现在这个高级理论系列才和大家见面.其实这篇博客很早就着手写了,只是楼主一直写写停停.看看下图,就知道这篇博客的生产日期了,谁知它的出厂日 ...

  10. 谈谈 Lock

    上来先看MSDN关于lock的叙述: lock  关键字将语句块标记为临界区,方法是获取给定对象的互斥锁,执行语句,然后释放该锁.  下面的示例包含一个 lock 语句. lock  关键字可确保当一 ...