提示：在标签中添加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. ASP.NET路由模型解析

    大家好,我又来吹牛逼了 ~-＿-~ 转载请注明出处:来自吹牛逼之<ASP.NET路由模型解析> 背景:很多人知道Asp.Net中路由怎么用的,却不知道路由模型内部的运行原理,今天我就给大家 ...

  2. JavaScript String对象

    本编主要介绍String 字符串对象. 目录 1. 介绍:阐述 String 对象的说明以及定义方式. 2. 实例属性:介绍 String 对象的实例属性: length. 3. 实例方法:介绍 St ...

  3. 前端学HTTP之报文首部

    前面的话 首部和方法配合工作,共同决定了客户端和服务器能做什么事情.在请求和响应报文中都可以用首部来提供信息,有些首部是某种报文专用的,有些首部则更通用一些.本文将详细介绍HTTP报文中的首部 结构 ...

  4. 9、 Struts2验证(声明式验证、自定义验证器)

    1. 什么是Struts2 验证器 一个健壮的 web 应用程序必须确保用户输入是合法.有效的. Struts2 的输入验证 基于 XWork Validation Framework 的声明式验证: ...

  5. UWP开发之Mvvmlight实践七：如何查找设备（Mobile模拟器、实体手机、PC）中应用的Log等文件

    在开发中或者后期测试乃至最后交付使用的时候,如果应用出问题了我们一般的做法就是查看Log文件.上章也提到了查看Log文件,这章重点讲解下如何查看Log文件?如何找到我们需要的Packages安装包目录 ...

  6. SDWebImage源码解读 之 SDWebImageCompat

    第三篇 前言 本篇主要解读SDWebImage的配置文件.正如compat的定义,该配置文件主要是兼容Apple的其他设备.也许我们真实的开发平台只有一个,但考虑各个平台的兼容性,对于框架有着很重要的 ...

  7. 【Reading Note】Python读书杂记

    赋值 >>> list=[] >>> app=[list,list,list] >>> app [[], [], []] >>> ...

  8. scp报错 -bash: scp: command not found

    环境:RHEL6.5 使用scp命令报错: [root@oradb23 media]# scp /etc/hosts oradb24:/etc/ -bash: scp: command not fou ...

  9. 简析服务端通过GT导入SHP至PG的方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 项目中需要在浏览器端直接上传SHP后服务端进行数据的自动入PG ...

  10. Redis简单案例(二) 网站最近的访问用户

    我们有时会在网站中看到最后的访问用户.最近的活跃用户等等诸如此类的一些信息.本文就以最后的访问用户为例, 用Redis来实现这个小功能.在这之前,我们可以先简单了解一下在oracle.sqlserve ...