<map>标签：带有可点击区域的图像映射

定义一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

效果图：

点击相应蓝色标签可进入详情页面浏览。

代码：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图像映射-Map</title>

</head>

<body>

    <h1>图像映射示例</h1>

    <img src="home.jpg" alt="" width="584px" height="399px" usemap="#homeMap"/>

    <map name="homeMap" id="homeMap">

        <area shape="circle" coords="160,270,20" href="coach.jpg" alt="沙发" target="_blank"/>

        <area shape="circle" coords="250,130,20" href="Painting.jpg" alt="挂画" />

        <area shape="circle" coords="160,370,20" href="carpet.jpg" alt="地毯" />

        <area shape="circle" coords="510,50,20" href="clapboard.jpg" alt="地毯" />

    </map>

</body>

</html>

讲解：

图像映射map的更多相关文章

  1. 图像映射<map>、<area>

    1.<map>定义图像映射,图像映射(image-map)指带有可单击区域的一幅图像. 2.<area>定义图像映射中的区域,area元素永远嵌套在map元素内部,area元素 ...

  2. HTML <map> 标签－创建带有可点击区域的图像映射

    定义和用法 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 所有主流浏览器都支持 <map> 标签. 注释:area 元素永远嵌套在 map 元素内部. ...

  3. 带有可点击区域的图像映射：HTML <map> 标签

    实例 带有可点击区域的图像映射: <img src="planets.jpg" border="0" usemap="#planetmap&qu ...

  4. html 图像映射（一个图像多个连接）

    以前就见过那种导航地图,点击地图的不同省份分别跳到不同的连接,现在用html实现一下,简单的. 图像映射是指一个图像可以建立多个连接,就是在图像上面定义多个区域,每个区域连接到不同的地址. 效果如图: ...

  5. html 图像映射

    个人先做而一个例子 <body> <img src="图像映射/enterdesk.com-D69055E2B422567CB273963EA05FF7D4.jpg&quo ...

  6. HTML图像映射

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. HTML <area> 标签 带有可点击区域的图像映射（图像映射指的是带有可点击区域的图像）

    例子: <img src="planets.gif" width="145" height="126" alt="Plane ...

  8. 图像热点&图像映射

    图像映射 图像映射也称为图像热点. 作用: 让同一张图片上的不同区域,可以实现多个不同的超链接功能. 图示: <map>图像映射三步走: 图像映射的实现需要三方面配合完成: 1.图像映射容 ...

  9. HTML <img>标签 创建图像映射

    初级前端一枚 下面代码是在图片上创建图像映射 自己整理了下 做个笔记 希望也可以帮助后来学习的朋友! <map name="planetmap"> <area s ...

随机推荐

  1. 5.webService拦截器

    CXF为什么要设计拦截器? 为了在webservice请求过程中,能动态操作请求和响应数据, CXF设计了拦截器. 拦截器分类 1.按所处的位置分:服务器端拦截器,客户端拦截器 2.按消息的方向分:入 ...

  2. JS中json数据的处理

    1.  json数据结构(对象和数组) json对象:var obj = {"name":"xiao","age":12}; json数组: ...

  3. 记录HttpWebRequest辅助类

    最近因为工作关系,需要通过HttpWebRequest去请求API,所有就写了个简单的辅助public sealed class HttpRequestHelper { private static ...

  4. SQL入门经典(四)之创建和修改数据表

    本章主要讲如何使用脚本创建数据库:如何使用脚本创建表:如何删除对象和修改对象. CREATE 语句:CREATE <object type> <onject name> 创建数 ...

  5. WebApi Post提交报错 调试无法进入对应action函数

    调试发现有长内容或者是特殊字符就报错,确定是服务端验证的问题 需要 在配置文件 <system.web> 中添加<httpRuntime  requestValidationMode ...

  6. Linux 学习笔记(一) 入门

    Shell 显示Shell类型 $ps 切换Shell $[Shell 名称]  ex. $tcsh 快捷键 Ctrl + Z:挂起,可用jobs查看到,fg恢复运行 Ctrl + W:删除单词 Ct ...

  7. Windows Azure 服务器时间问题

    最近一直在做学校的一个小项目,前期在没有服务器端的情况下意淫做出来了手机客户端.在寒假里使用ASP.NET快速做了一个网站并且设计好了需要使用其他内容,在Windows Azure上测试评估,为学校的 ...

  8. H5 缓存机制浅析 移动端 Web 加载性能优化

    腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...

  9. 【读书笔记】Html5游戏开发

    一直对HMTL5做游戏饶有兴趣,而这本书刚好就是HTML5 2游戏初级入门的书.Demo简单注释详细,可以拿来练练手,一个星期左右就可以读完.若要追求酷炫高大上效果,这本书恐怕要让你失望了.但作为上手 ...

  10. 使用FiddlerCore来测试WebAPI

    大家在调试Web相关的API时,经常会用Fiddler来查看相关的请求,以及返回结果.当然你也可以尝试修改或者重复你的请求信息.本文主要介绍如何使用代码来实现fiddler的功能. Fiddler C ...