实例

带有可点击区域的图像映射：

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />

  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />

  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

</map>

<html>

<body>

<p>请点击图像上的星球，把它们放大。</p>

<img

src="/i/eg_planets.jpg"

border="0" usemap="#planetmap"

alt="Planets" />

<map name="planetmap" id="planetmap">

<area

shape="circle"

coords="180,139,14"

href ="/example/html/venus.html"

target ="_blank"

alt="Venus" />

<area

shape="circle"

coords="129,161,10"

href ="/example/html/mercur.html"

target ="_blank"

alt="Mercury" />

<area

shape="rect"

coords="0,0,110,260"

href ="/example/html/sun.html"

target ="_blank"

alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>

</body>

</html>

注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。

带有可点击区域的图像映射：HTML <map> 标签的更多相关文章

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

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

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

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

  3. 利用HTML中map标签实现整张图片带有可点击区域的图像映射：

    实现效果说明:一整张背景图片,实现图标区域出现链接,可点击跳转到指定页面. <div class="brand"> <img src="images/b ...

  4. 图像映射map

    <map>标签:带有可点击区域的图像映射 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 效果图: 点击相应蓝色标签可进入详情页面浏览. 代码: < ...

  5. HTML创建图像映射，布局，表单

    来源: 实验楼 创建图像映射 在这之前我们动手试验过将图片作为链接来使用,触发链接的方式就是点击图片的任何地方都可以链接到跳转地址,有时我们需要实现,点击图片的不同地方跳转到不同的地方.意思就是,一张 ...

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

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

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

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

  8. html 图像映射

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

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

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

随机推荐

  1. PowerShell：Linux程序员喜欢的cmd增强版

    Linux程序员有时偶尔使用Windows下的cmd工具,会被逼疯的,有些命令ls, cat, ps等已经条件反射一样使用. 但在cmd下,根本不知道该用什么命令,好在盖兹大叔照顾了此部分需求.从Vi ...

  2. How To Set Up Nginx Server Blocks (Virtual Hosts) on Ubuntu

    sudo apt-get update sudo apt-get install nginxsudo mkdir -p /var/www/example.com/html sudo chown -R ...

  3. 使用linq 对 DataTable 中的数据进行 查询 与 分类求合

    A:linq 的查询方式写得可以非常简洁如下所示: DataTable dt = null;        private void XtraForm1_Load(object sender, Eve ...

  4. matlab 函数说明—ordfilt2

    今天看harris角点实现的源码,在某一个版本中看到了这个函数,不是很理解,doc ordfilt2之后还是不清楚,终于在matlab论坛上搞清楚了ordfilt2的功能.   中文理解函数名就是顺序 ...

  5. HIbernate学习笔记（九） hibernate事务并发处理与乐观悲观锁

    事务并发处理 一. 数据库的隔离级别:并发性作用. 1.   ReadUncommited(未提交读):没有提交就可以读取到数据(发出了Insert,但没有commit就可以读取到.)很少用 2.   ...

  6. leetcode@ [124] Binary Tree Maximum Path Sum (DFS)

    https://leetcode.com/problems/binary-tree-maximum-path-sum/ Given a binary tree, find the maximum pa ...

  7. C#中使用DLL文件

    首先,我们需要在C++程序中导出DLL文件.我使用的是Visual Studio开发,把项目"属性"中的“配置类型”改为"动态库dll",然后添加如下导出代码: ...

  8. delphi 完全控制Excel 文件

    ( 一 ) 使用动态创建的方法 uses ComObj; 首先创建 Excel 对象Var   ExcelApp : Variant ;   ExcelApp := CreateOleObject ( ...

  9. zoj 1622 Switch 开关灯 简单枚举

    ZOJ Problem Set - 1622 Switch Time Limit: 2 Seconds      Memory Limit: 65536 KB There are N lights i ...

  10. jquery.validate.js 应用示例

    今天发现了jQuery一个很强大的验证表单插件(jquery.validate.js 下载地址:http://bassistance.de/jquery-plugins/jquery-plugin-v ...