<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. ecshop数据表说明

    ecshop数据表说明 数据库结构说明,以及自己在后台备份不需要备份的表(红色字体是不需要备份的表)备份文件在FTP或者服务器上网站根目录下data\sqldata下 数据库采用mysql,共78张表 ...

  2. fatal error C1083: 无法打开预编译头文件:“Debug\a.pch”:No such file or directory

    一.解决方法 右键点击你创建的项目,选择“属性标签”点击属性,弹出“项目属性页”,在左侧找到以下位置  配置属性 -->  C/C++  --> 预编译头,并选择它:在右边的菜单中选择 “ ...

  3. css使一行文字竖向排列

    .tnt { margin:0 auto;width:20px;line-height:24px;} <div class="tnt" > <asp:Label ...

  4. Entity Framework搜索指定字段解决方案

    public class Book { [Key] [DatabaseGenerated(DatabaseGeneratedOption.Identity)] public int Id { get; ...

  5. Win7环境下搭建Go开发环境，基于VSCode编辑器

    一.在搭建的时候参考以下文章 http://www.cnblogs.com/zsy/archive/2016/02/28/5223957.html http://blog.csdn.net/hil20 ...

  6. ENode 2.0 - 深入分析ENode的内部实现流程和关键地方的幂等设计

    前言 ENode是一个基于消息的架构,使用ENode开发的系统,每个环节都是处理消息,处理完后产生新的消息.本篇文章我想详细分析一下ENode框架内部是如何实现整个消息处理流程的.为了更好的理解我后面 ...

  7. linux奇技淫巧 2

    压缩解压==================================================================================== unzip xx.zi ...

  8. PMP和PRINCE2

    首先先简单介绍一下,PMP是属于美国的项目管理知识体系.PRINCE2是属于英国项目体系. 美国的项目管理知识体系最主要的价值是把世界上所有跟项目管理相关的,不管是知识.最佳实践.工具技术,把它们汇总 ...

  9. redis常用操作总结

    在项目中时常会用到redis,redis看起来好像很难的样子,而且我也确认反复学习了很久,但是,总结下来,自己使用到的东西并不太多,如下作一些总结工作. 1.安装(单机) 1.1 windows, 直 ...

  10. GitHub & Bitbucket & GitLab & Coding 的对比分析

    目前基于 Git 做版本控制的代码托管平台有很多种,比较流行的服务有 Github.Bitbucket. GitLab. Coding,他们各自有什么特点,个人使用者和开发团队又该如何选择? 在这篇文 ...