实例

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

<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. bzoj 3123 [Sdoi2013]森林（主席树，lca，启发式合并）

    Description Input 第一行包含一个正整数testcase,表示当前测试数据的测试点编号.保证1≤testcase≤20. 第二行包含三个整数N,M,T,分别表示节点数.初始边数.操作数 ...

  2. HDU 1074 Doing Homework(状态压缩DP)

    题意:有n门课,每门课有截止时间和完成所需的时间,如果超过规定时间完成,每超过一天就会扣1分,问怎样安排做作业的顺序才能使得所扣的分最小 思路:二进制表示. #include<iostream& ...

  3. Python【基础第一篇】

    一.Python3新特性 编码统一为unicode Python3不支持Twisted,暂时只支持73% 1/2=0.5 print "hello World" 变成 print ...

  4. 50道经典的JAVA编程题(目录)

    这份题从2013做到2014啊...哈哈,整理个目录吧.为了好查阅,也为了监督自己好好的去做完这50道题.当然,有些题实在做得没意思就跳过了,或者自己改题了.题目来源于:http://blog.sin ...

  5. 【Spark学习】Apache Spark调优

    Spark版本:1.1.0 本文系以开源中国社区的译文为基础,结合官方文档翻译修订而来,转载请注明以下链接: http://www.cnblogs.com/zhangningbo/p/4117981. ...

  6. Mongodb 安装 以及 问题解决-摘自网络

    一,下载 1.官网为:http://www.mongodb.org/ :下载安装程序的地址为:http://www.mongodb.org/downloads ,选择选择的是Windows 32-bi ...

  7. 11个高级MySQL数据库面试问题和答案

    因为有大家的支持,我们才能做到现在,感谢你们这一路上对我们的支持.在这篇文章中,我们将主要针对MySQL的实用技巧,讲讲面试中相关的问题. 1. 如何使用SELECT语句找到你正在运行的服务器的版本并 ...

  8. 100+经典Java面试题及答案解析

    面向对象编程(OOP) Java是一个支持并发.基于类和面向对象的计算机编程语言.下面列出了面向对象软件开发的优点: 代码开发模块化,更易维护和修改. 代码复用. 增强代码的可靠性和灵活性. 增加代码 ...

  9. Java List 用法代码分析 非常详细

    Java中可变数组的原理就是不断的创建新的数组,将原数组加到新的数组中,下文对Java List用法做了详解. List:元素是有序的(怎么存的就怎么取出来,顺序不会乱),元素可以重复(角标1上有个3 ...

  10. 使用Superprg 下载 AVR/51单片机固件 【worldsing笔记】

    progisp 2.0 可以下载avr.51等单片机,单击下载                      Superprg  单击下载 Superprg软件志峰公司出的专用软件,配合ZF_209使用, ...