Html中的map标签(http://www.cnblogs.com/china-chang/archive/2012/03/27/2419734.html)

图像的影像地图超链接,<map>标签浅谈

在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签:<img><map><area>下面分别介绍这些标签的用法:

影像地图(Image Map)标签的使用格式:

<img src="图形文件名" usemap="#图的名称">

<!-- 插入图片时要在<img>标记中设置参数usemap="#图的名称" ismap,以表示对图像地图(图的名称)的引用;-->

<map name="图的名称">

<!--用<map>标记设定图像地图的作用区域,并用name属性爲图像起一个名字-->

<area shape=形状 coords=区域座标列表 href="URL资源地址">

......可根据需要定义多少个热点区域

<area shape=形状 coords=区域座标列表 href="URL资源地址">

</map>

【1】 shape -- 定义热点形状

   shape=rect: 矩形

         shape=circle:圆形

         shape=poly: 多边形

【2】coords -- 定义区域点的坐标

a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标

例:<area shape=rect coords=100,50,200,75 href="URL">

b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度

例:<area shape=circle coords=85,155,30 href="URL">

c.任意图形(多边形):将图形之每一转折点座标依序填入

例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

下面是一个例子

<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>

在制作本文介绍的效果时应注意的几点:

   1、在<img>标记不要忘记设置usemap、ismap参数,且usemap的参数值必须与<map>标记中的name参数值相同,也就是说,“图像地图名称”要一致;

   2、同一“图像地图”中的所有热点区域都要在图像地图的范围内,即所有<area>标记均要在<map>与</map>之间;

   3、在<area>标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套,避免出现在shape参数设置的矩形作用区域,而在cords 中设置的却是多边形区域顶点坐标的现象出现。

时间: 2024-11-10 16:54:30

Html中的map标签(http://www.cnblogs.com/china-chang/archive/2012/03/27/2419734.html)的相关文章

Html中的map标签

图像的影像地图超链接,<map>标签浅谈 在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源.这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接.这就是影像地图.要完成地图区域超链接要用到三种标签:<img><map><area>下面分别介绍这些标签的用法: 影像地图(Image Map)标签的使用格式: <img src="图形文件名" usemap="#图的名称"

Android实现推送方式解决方案【转载地址:http://www.cnblogs.com/hanyonglu/archive/2012/03/04/2378971.html】

本文介绍在Android中实现推送方式的基础知识及相关解决方案.推送功能在手机开发中应用的场景是越来起来了,不说别的,就我们手机上的新闻客户端就时不j时的推送过来新的消息,很方便的阅读最新的新闻信息.这种推送功能是好的一面,但是也会经常看到很多推送过来的垃圾信息,这就让我们感到厌烦了,关于这个我们就不能多说什么了,毕竟很多商家要做广告.本文就是来探讨下Android中实现推送功能的一些解决方案,也希望能够起到抛砖引玉的作用.^_^ 1.推送方式基础知识:  在移动互联网时代以前的手机,如果有事情

css中 Span 元素的 width 属性无效果原因及多种解决方案(转自http://www.cnblogs.com/hnyei/archive/2012/03/12/2392026.html)

先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内联元素(可以是默认即为内联的比如 span 元素,也可以是 display: inline 的元素) width 和 height 只在 IE5.x 下和 IE6 或更新版本的 quirks 模式下触发 hasLayout .而对于 IE6,如果浏览器运行于标准兼容模式下,内联元素会忽略 width 或 he

C#:this索引器《转载http://www.cnblogs.com/ArmyShen/archive/2012/08/27/2659405.html》

索引器允许类或者结构的实例按照与数组相同的方式进行索引取值,索引器与属性类似,不同的是索引器的访问是带参的. 索引器和数组比较: (1)索引器的索引值(Index)类型不受限制 (2)索引器允许重载 (3)索引器不是一个变量 索引器和属性的不同点 (1)属性以名称来标识,索引器以函数形式标识 (2)索引器可以被重载,属性不可以 (3)索引器不能声明为static,属性可以 一个简单的索引器例子 using System; using System.Collections; public clas

论qt图片编辑。没有用户,只能复制粘贴了(原文地址:http://www.cnblogs.com/s_agapo/archive/2012/03/14/2395603.html)

(一)QPixmap和QImage的区别 http://www.thisisqt.com/forum/viewthread.php?tid=267 QPixmap是专门为绘图而生,当需要绘制图片时你需要使用QPixmap.QImage则是为I/O,为图片像素访问以及修改而设计的.如果你 想访问图片的像素或是修改图片像素,则需要使用QImage,或者借助于QPainter来操作像素.另外跟QImage不同是,QPixmap跟硬件是 相关的,如X11, Mac 以及 Symbian平台上,QPixm

js中的script标签

在页面中用script标签引入javascript文件(<script type="text/javascript" src="js文件地址"></script>),浏览器在渲染页面的时候,当读取到script元素时,浏览器不会以HTML或XHTML的方式处理其内容,浏览器会通知浏览器的脚本引擎来接管script元素中的内容.   script元素的type属性定义脚本类型,type类型有: 1.text/ecmascript(表示以ECMA

java中的@Override标签,小细节大作用

转载:http://www.cnblogs.com/octobershiner/archive/2012/03/09/2388370.html 一般用途                                                                                                                                                       帮助自己检查是否正确的复写了父类中已有的方法

技术分享:html中的Map,area标签详解

area标签详解 一.界说和用法 html中的Map.> 界说一个客户端图画映射.图画映射(image-map指带有可点击区域的一幅图画. 二.脚本示例: shqpe特点的设置阐明0.: 1.rect界说一个矩形区域.右下角的坐标,coord特点设置值为矩形的左上角.各个坐标值之间用逗号分隔; coord特点设置值为多边形各项极点的坐标值2.poli界说一个多边形区域.; 3.circl界说一格圆形区域.前两个参数分别为圆心的横,coord特点设置值为圆心坐标及半径.纵坐标,第三个参数为半径.

使用Map标签指定点击区域时的兼容性问题

电商m站的首页,有一个需求是配一张大的banner图,然后指定某些区域是热区,点击之后跳转到不同的活动页. 听起来简单明了,实现也比较容易,立刻就想起来有个map标签,简直就是为这个需求量身定做. 简单说下做法: 我们首先会和后台约定一些规则,定义一个json对象.比如: { type: 1, width: 100, height: 100, clickArea: [ { shape: 'circle', coords: '10,10,10', href: '//jd.com' }, { sha