HTML进阶应用技巧(五)用好图像的作用区域标记area

技巧

  网页教学网站长注:其实这个功能主要是用在地图的制作上啊!

  你见过“联想”机器上联想公司赠送的“我的办公室”软件的界面吗?在那幅办公室的图片上用鼠标点一下办公桌上的键盘,就启动一个“五笔字型”打字练习软件,点一下办公桌上的记事本就打开一个记事本软件,如此等等,即形象又方便。这种效果的实质是把一幅图片划分为不同的作用区域,再让不同的区域链接到做不同事情的软件上去,在HTML中也有一个具有把图片划分成多个作用区域,并链接到不同网页的标记,那就是 <area>地图作用区域标记。

  <area>标记主要用于图像地图,通过该标记可以在图像地图中设定作用区域(又称为热点),这样当用户的鼠标移到指定的作用区域点击时,会自动链接到预先设定好的页面。其基本语法结构如下:

<area
class=type
id=Value
href=url
alt=text
shape=area-shape
coods=value>

  其中。class和id:是分别指定热点的类型和id号。

  alt:用于设定热点的替代性文字。

  href:用于设定该热点所链接的url地址。

  shape和coords:是两个主要的参数,用于设定热点的形状和大小。其基本用法如下:

  <area shape="rect" coords="x1, y1,x2,y2" href=url>表示设定热点的形状为矩形,左上角顶点坐标为(X1,y1),右下角顶点坐标为(X2,y2)。

  <area shape="circle" coords="x1, y1,r" href=url>表示设定热点的形状为圆形,圆心坐标为(X1,y1),半径为r。

  <area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示设定热点的形状为多边形,各顶点坐标依次为(X1,y1)、(X2,y2)、(x3,y3) ......。

  <area>标记是在图像地图中划分作用区域的,因此其划分的作用区域必须在图像地图的区域内,所以在用 <area> 标记划分区域前必须用HTML的另一个标记<map>来设定图像地图的作用区域,并为指定的图像地图设定名称,该标记的用法很简单,即<map name="图像地图名称"> ...... </map>。

  下面通过一个例子来说明这两个标记的用法:

  这里是一幅新书架的图片,要做的效果是:当鼠标点“网址大全”这本书时,新开一窗口,显示关于这本书的简介及订单的网页(urlall.htm);当鼠标点“网站设计攻略”这本书时,新开一窗口,显示关于这本书的简介及订单的网页(siteall.htm);当鼠标点“网页技巧大全”这本书时,新开一窗口,显示关于这本书的简介及订单的网页(pagejqlall.htm)。制作方法:

  1、插入图片,并设置好图像的有关参数,且在<img>标记中设置参数usemap="newbook" ismap,以表示对图像地图(newbook)的引用;

  2、用<map>标记设定图像地图的作用区域,并取名为:newbook;

  3、分别用<area>标记针对三本书的位置划分出三个矩形作用区域,并设定好其链接参数href。

  制作完成,本例的源代码如下:

<img src="/UploadPic/2007-7/200777152037614.gif" width="207" height="148" alt="新书架" hspace="10" align="left" usemap="#newbook" border="0">
<map name="newbook">
<area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="这里收集十万多个网址。" title="这里收集十万多个网址。">
<area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="网站设计师的启蒙读本。" title="网站设计师的启蒙读本。">
<area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="网页制作者不可不读的书。" title="网页制作者不可不读的书。">
</map>

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

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

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

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

时间: 2024-11-18 07:51:50

HTML进阶应用技巧(五)用好图像的作用区域标记area的相关文章

用好图像的作用区域标记—area

你见过"联想"机器上联想公司赠送的"我的办公室"软件的界面吗?在那幅办公室的图片上用鼠标点一下办公桌上的键盘,就启动一个"五笔字型"打字练习软件,点一下办公桌上的记事本就打开一个记事本软件,如此等等,即形象又方便.这种效果的实质是把一幅图片划分为不同的作用区域,再让不同的区域链接到做不同事情的软件上去,在HTML中也有一个具有把图片划分成多个作用区域,并链接到不同网页的标记,那就是 <area>地图作用区域标记. <area&g

HTML进阶应用技巧(三)用好超级链接标记A

技巧|链接 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写.它的作用是把当前位置的文本或图片连接到其他的页面.文本或图像,这已是众所周知了,但关于它的语法结构可能有点鲜为人知,而要用活它则必须了解其语法结构.<a>标记的基本语法结构是: <aclass=typeid=valuehref=referencename=valuerel=same|next|parent|previousrev=valuetarget=windowstyle=valuetitle

HTML进阶应用技巧(十一)用好帧窗口标记

技巧 帧窗口是一种复杂的页面技术,应用帧窗口使得用户可以在同一个浏览器窗口中浏览不同网站的内容,可以在一个小窗口中发出查询命令而在另一个小窗口中接收查询结果.实现帧窗口的思路是将浏览器窗口按照功能分割成多个小窗口.每个窗口都对应有自己的HTML页面,按照一定的组合方式组合在一起,以实现特殊的效果. 在HTML中用<frameset>(分割窗口标记)来分割窗口,<frameset>在多窗口页面中的地位就相当于<body>在普通单窗口页面中的地位,在页面中用<fram

HTML进阶应用技巧(二)用好活动字幕标记marquee

技巧 活动字幕,也称为滚动看板.滚动字幕.活动字幕的使用使得整个网页更有动感,显得很有生气.现在的网站中也越来越多地使用活动字幕来加强网页的互动性.用Javascript编程可以实现活动字幕效果:用Dreamweaver的图层再用其时间线功能可以做出非常漂亮的滚动看板.而用HTML的<marquee>活动字幕标记所需的代码最少,确实能够以较少的下载时间换来较好的效果.该标记语法格式如下: <marquee aligh=left|center|right|top|bottombgcolor

初学网页者推荐:HTML进阶应用技巧教程(目录)

初学|技巧|教程|网页 1.HTML进阶应用技巧(一)HTML语言基础 (2006-01-21) 2.HTML进阶应用技巧(二)用好活动字幕标记marquee (2006-01-21) 3.HTML进阶应用技巧(三)用好超级链接标记A (2006-01-21) 4.HTML进阶应用技巧(四)用好基本图像标记img (2006-01-21) 5.HTML进阶应用技巧(五)用好图像的作用区域标记area (2006-01-21) 6.HTML进阶应用技巧(六)用好HTML的表格标记 (2006-01

HTML进阶应用技巧(十二)帧窗口之间的交互技巧

技巧|交互 在多窗口的分帧页面中,各分窗口之间的信息交互是经常的事.在导航窗口中点了超级链接,那么如何在另一窗口中打开链接的网页呢?我在这个窗口中按下按钮,能在另一个窗口中写信息吗?窗口那么多,又如何识别窗口呢?请看下面的例子. 一.在导航窗口点击链接,在另一窗口打开网页 现有一分帧页面如上图所示的,A窗口是网站logo及广告,B窗口是导航栏,C是显示页面的窗口.该分帧页面的源代码为: <frameset rows="20%,*"> <frame name="

ASP提速技巧五则

技巧 技巧之一:提高使用Request集合的效率 访问一个ASP集合来提取一个值是费时的.占用计算资源的过程.因为这个操作包含了一系列对相关集合的搜索,这比访问一个局部变量要慢得多.因此,如果打算在页面中多次使用Request集合中的一个值,应该考虑将其存贮为一个局部变量.例如将代码写成下面的形式以加快脚本引擎处理速度: strTitle=Request.Form("Title") strFirstName=Request.Form("FirstName") str

【Silverlight】 Bing Maps开发应用与技巧五:实现图钉(Pushpin)的可拖放性

[Silverlight] Bing Maps开发应用与技巧五:实现图钉(Pushpin)的可拖放性(Draggable)扩展 目前在Bing Maps Silverlight Control中并没有提供可拖放的图钉(Pushpin)控件,其强大.灵活的架构设计为开发者提供了非常强大的扩展支持,要实现图钉控件的可拖放性可以自己动手进行扩展实现. System.Object System.Windows.DependencyObject System.Windows.UIElement Syste

安卓LibGDX游戏引擎开发教程(五)图形图像的绘制(上)基础类的使用和详解

由于平常工作和生活琐事的种种原因,所以这个系列的教程更新的有点慢,还请大家见谅.在这期的主题 中,博主给大家来的教学是关于图形图像的绘制,要知道一个最基本的应用程序都会有一个精美的图像,那么 就更别说一个成功的游戏了,首先要有绚丽的图片背景才是吸引玩家试玩的关键,不是嘛? 在这篇文 章中主要讲解到的有Texture.SpriteBatch.Sprite和Pixmap这四个类. 一.Texture和SpriteBatch 类 1.Texture介绍 我们先来看一下官方API文档,如下图所示: 开发