几种热点图像的制作方法
NetTimes网绍町代
栏目编辑/美丽人生/E-mail:****************.on
在网页中经常需要在一副图上生成多个超级链接，这种图片一般经常会应用在制作菜单条，导航按钮
或影像地图中.这种图像通常被称为"热点图像"，热点(Hotspot)就是该图像上带有超级链接的一块区
域，单击每个热点就会转向相应的超级链接.热点图像有服务器端和客户端两种类型，其不I司之处在于对
鼠标在图像热点上单击后的处理方法：前者在触发链接后，浏览器将单击处的坐标发送给web服务器，由
服务器来打开指定的网页；而客户端的热点图像则不需要与Web~.务器交互，而是由本地客户端处理，当
鼠标单击图像的热点区域时，浏览器只是简单地查询与坐标相对应的链接网址，这样就能大大减轻服务器
处理热点图像的负担，并能确保与服务器类型无关.本文介绍的热点图像均是在客户端执行的.
热点是用来创建具有交互效果图像的重要工具，它其实不是由图像而是由一段HTML代码来实现
的.所以可以使用网页制作软件来创建它，也可以通过直接编辑HTML脚本来实现，另外使用Flash来生
成热点图像是个另辟蹊径的办法.下面依次进行介绍说明:
几种热点图像的制作方法●安徽濮青
一
，使用网页制作软件
目前的网页制作软件功能强大，使用方便，把人们从过
去繁重复杂的HTML脚本编辑工作中解放出来.即使是制作热点图像这样以往十分费事的工作，现在利用网页编辑软件也可以很轻松地实现.
在Dreamweaver,Fireworks和Frontpage中都提供了
制作热点图像的方法，其原理基本一样，操作过程也大致类似，以下主要以在Dreamweaver中制作热点图像为例来说明:
1.在Dreamweaver4中打
开准备包含热点图像的网页,
选择"对象"面板中的"插入
图像"将用于要制作成热点图
像的图片导入，如图1所示.
2.选中该图片，在出现的田】
"属性"面板中单击其右下角的向下小三角形(见上图中示意)，弹出扩展属性面板.其中可以看到用于生成热点的多
种工具：矩形，圆形或多边形，如图2所示.
图2
3.选择合适的热点工具
(如矩形热点工具)，其实就
是一种区域选择工具，鼠标移
动至图像内时变成十字形，拖
动鼠标圈出所需要的热点区
域，一次选择一个热点区域,
松开鼠标后会出现"热点"面
板，如图3所示.在"热点"面板中,"链接"为该热点的超
级链接,"目标"为该链接窗口的打开方式，如"一
blank"
代表在空窗口中打开该链接等,"替代"是不能正常显示热
点的浏览器在该位置的替代说明文字，可如图4设置.
形热点的时候，鼠标每次单击会产生一个多
边形的顶点，依次单击产生的各顶点会自动
连接成一个多边形，而顶点产生的顺序与位
置很重要，因为创建顶点不当会造成多边形
的扭曲或不闭合，如图5所示.
5.如果对创建的热点不满意，可以很容易地修改：选中
该热点后，键盘可以移动其位置，鼠标拖拽4个角可以放大或缩小，按"Delete"键可删除该热点.
6.图像其他不是热点的部分，如果也需要建立超级链
接，可使用图像"属性"面板
中的"链接"属性来设置.
7.全部完成后，按"F12"
在浏览器中观察效果，注意到
当鼠标移动到设置了热点的图
像区域时会变成手形，表示可
以链接，就说明制作成功了,
满意后保存该网页文件即可，如图6所示.
使用Fireworks也可以很容易生成热点图像，由于Fire—works与Oreamweaver同出一门，所以在制作热点图像上的操作过程也十分相似.例如3种热点创建工具，各种热点的绘制方式，生成的HTML脚本都是一样的，稍有不同的是其3种热点工具集成在一个"Hotspot"工具符号下，而且对热点的设置是通过"Object(Hotspot)"面板来进行的.另
外，由于Fireworks主要是用来制作网页图片的，所以还需要使用"Export"功能将控制热点的HTML文件导出，这样才能在网页中看到热点图像的效果.图7所示为使用Fire—works在一幅中国地图上创建多个不同形状的热点.最后还要提到的是,Fireworks中有另一种制作热点的方法，即当
正在从头绘制一副新图像而不
是在现有图像上生成热点时,
可选中一个或多个绘制出的图
像元素，然后使用"Insert"一
"Hotspot"功能将其转换为热
点.如果一次选择了不止一个
图像元素，则会弹出一个对话图7
霹
{k
Actionscript~句，必须先键入"Ctrl+E"进入"专家模
式"，如图15所示.
6.依次为每个需要产生热点链接的图像区域制作一个如
上的按钮，这里可以通过对原按钮的"拷贝"和"粘贴"来
完成，在生成了新按钮后可以
通过手动或是在"信息"面板
中调整其位置和大小来使它定
位到所需要的图像区域去，然
后依次为所有按钮的"动作"
语句赋予所需要的对应URL链
接地址，如图16所示.
7如果前面的热点区域"填充颜"为了方便观看而没
有设置为白透明，可以在按钮生成后进入其编辑状态工作界面，再将其填充颜设置为白透明即可.
8.完成后可以按"Ctrl+Enter"预览效果，动画效果如
图17所示，图中显示热点区域
可以进行链接了.在实际输出
时还要将动画影片调整到和热
怎么制作网页图片点图像一样大小，然后再使用
"文件"的"导出影片功能
将其导出为.swf格式的动画文
件即可.
使用Flash来制作热点图像，生成的是SWF格式的动画
文件，不需要外挂插件即可嵌入网页并能与浏览器很好的结合.而且由于SWF动画文件将热点链接与原始图像生成在一起，不再需要额外的Html脚本的辅助控制，可以非常容易地象插入图像一样地任意地使用.不过由于该制作方法较为繁琐，而且一旦想要改变热点的链接地址则还要重新运行Flash 再次生
成新的SWF动画文件，所以不是十分方便.
三，直接编写HTML脚本
如果没有以上网页或动画制作工具，也能够生成热点图
像，不过这需要直接编写HTML脚本，有一定的难度.其
实，在Dreamweaver等网页制作工具中热点图像都是使用HTML脚本来控制的.打开刚才生成的HTML文件，可以观察到以下源代码片段:
NetTimes网络时代
栏目编辑/美丽人生,E—maiI=Iily@pops矾
在Dreamweaver和Fireworks中都是利用HTML的扩展"
map"标识符来实现对热点的控制，具体实现如下:
1.在"img"图像标识中设置"usemap"属性，指向
"
map"节中的"name"属性，这里为"Map"是该热点
图像的名字，注意要带"撑"号.
2.在<map></map>；节中进行热点设置，每个"area" 标识定义一个热点，其中的"shaPe"为热点形状，有"rect"(矩形),"circle"(圆形)和"poly"(多边

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。