通俗基础教程
电脑操作教程
电脑怎样拨号上网
如何做个人网页
怎样做局域网
Word教程(文字处理)
图形图象处理入门
经典提高教程
怎样使用代理服务器
如何做无盘工作站
Photoshop教程
Dreamweaver3教程
Flash4&5教程
Firework3教程
Frontpage2000教程
Authware教程
Office2000教程
如何制作动画图片
OICQ&ICQ使用方法

高手学习指南

硬件升级技巧
CGI教程
ASP教程

PHP教程

注册表使用技巧
路由器的设置
网站建设指南
SQL
最近更新:
网页编辑
相关内容

——轻松制作热点链接——

  平时我们在浏览各类网站时,经常会发现某些网页上一幅图片中含有多个链接,通常这类图片比较大,当鼠标移向不同的部位时,其链接也会发生相应的变化,此项技术我们称之为“热点链接”,下面就让我们一起来学习如何制作出此“一图多链”的网页效果。

  一、Dreamweaver3中的制作方法

  DreamWeaver是MacroMedia公司出品的一个所见即所得的网页制作工具,它提供了非常强大的主页制作功能,而且使用起来非常的顺手、方便,目前正日益成为专业及业余网页制作人员的首选,在其最新版3.0中,有关“热点”的制作较2.0版又更为方便了些。

  (一)、制作步骤

  1、选择“Insert”->“Image”插入一张图片,使用鼠标左键单击选中此图片,此时可在“属性”控制面板中看到此图片的相关特性(可通过“Window”->“Properties”来打开/关闭“属性”控制面板)。

  2、初次使用“属性”控制面板时其默认为“简化”形式,单击右下方的向下箭头可打开其扩展属性模式,此时可见到左下方“Map”的相关工具。

  3、DM3提供了矩形、圆、多边形等三种热点图形方式,使用鼠标左键单击选择其中一种,此时将鼠标移至图片其光标将变为细十字光标,单击之后拖动鼠标就可画出一淡蓝色热点区域,此时“属性”窗口内容也随之变化,在“Link”中输入链接的目标页地址(或单击其后打开按钮选择文件),“Target”为新页面的打开方式,“Alt”为此热点的文字说明,这样,一个热点链接就算制作完成,依此类推可制作出任意多热点链接。

  (二)、修改与删除

  若对所建的热点链接不满意,我们也可以任意修改或删除。选中图片“属性”窗口“map”中的箭头,指向已建热点区域并单击即可选中它(四周出现节点),然后指向中部按住不放并拖动鼠标可将此热点图形移至图片的任意位置,从而重新调整图片的热点链接部位;选中热点区域后将鼠标指向节点,此时可见鼠标箭头变为黑色,单击后拖动可改变此热点区域的大小;单击“DEL”键可删除所选的热点链接。

  二、MapEdit应用

  也许某些朋友嫌使用DM3制作主页“麻烦”,而热衷于手工编写HTML文件,那么MapEdit将会对你制作图片的热点链接时提供方便。该工具可谓是一个所见即所得的专用图片热点编辑器,其制作方法也非常的简单方便,它可自动生成HTML语句并插入到文件的相关位置。

  (一)、制作步骤

  1、启动MapEdit,首先它会打开网页文件选择窗口,选取好一个HTML文件后,程序会自动提取出该文件中包含的所有图片,从中选取一张需要增加热点链接的图片,然后返回至主窗口。

  2、同DM3一样,MapEdit也为我们提供了矩形、圆、多边形等三种热点区域选择方式,从工具栏中选择其中一种,然后在图片中的某一位置单击并拖动鼠标就会拖出一块热点区域,之后自动弹出其属性窗口。

  3、在热点“属性”窗口中,“URL for clicks on this object”为单击此链接后打开的文件地址;“ALT (Alternative) Text”为热点文字提示信息;“TITLE (Pop-Up) Text”当你的鼠标停留在此区域内一定时间将要显示的信息,若选中其右边的“Same As ALT”项,则其内容与上述“ALT Text”中的内容完全相同;

  “TARGET”中确定链接页面的显示方式,默认为在新窗口中打开;最下面的“onMouseOver”和“OnMouseOut”则是MapEdit为高级用户添置的对该区域链接增加JavaScrip功能,意为鼠标移入或移出该区域将要执行的内容,熟悉

  JavaScrip的朋友可以一试。所有项目输入完毕后,单击OK即完成一个链接的建立,若想为此图片中建立多个热点链接可依次类推。

  (二)、热点修改

  选择工具栏中的箭头按钮(第三组第1个),然后单击热点区域,该区域将以反显(黑色透明)方式显示出来,并且再次弹出此其属性窗口,根据需要可对其进行修改,单击属性窗口中的“Delete”将删除此热点链接。

  选择工具栏第三组中的第二个按钮,选定一热点区域后,我们可像在DM3中一样移动其在图片中的位置以及改变其大小范围,工具栏第三组后两个按钮是用来增加和减少所选热点图形的节点,从而精确划定热点区域。

  所有热点制作完成后,不要忘了选择“File”->“Save HTML Document”将其保存至源文件中。

  


本文作者:【姚利庆 】

用模板建立动态ASP页
轻松创建网页Banner页
用 JavaScript 事件在主页上玩花样
网页色彩的搭配
色彩,网站风格之魂
有关主页上的用色
有关主页中的用色之二
网页中的图象格式
让字体美起来
网页制作从业须知
主页的艺术处理
禁止查看网页源代码
制作个人首页的窍门
DOC转换为HTML后的变化
Html保持用户状态的多种方法比较
“画中画”效果---谈Iframe标记的使用
如何在网页上输入中文日期
Dreamweaver UltraDev 4新特性
如何实现网页的自动刷新
如何解决网页中的乱码、错位问题
如何将颜色的RGB值-->HEX值
实现一个弹出窗口的自动关闭
轻松制作热点链接
 
 
 
教程站
收集整理
服务大家