切图和热点响应

  • 发布于:2020-09-15
  • 212 人围观
本例中你要学到如何把一幅较大的图片切割成若干幅较小的图片,还要学习设置图像热点以及鼠标响应的方法,切割的图片和设置了热点的图片都可以通过自动生成的Javascript代码用于你的HTML文件中。

第一步:选择File > Open,导入准备要切割的图片,如图1。在主菜单中选中View > Guides,View > Slice Guides,View > Guide Option > Snap to Guides,如图2。


图 1 导入的图片


图 2 选中切割时使用导轨

第二步:想把这副图片切割成三部分:咖啡杯、糕点和上面的空白区。选择工具箱中右下角的Slice Tool > Rectagle(矩形切割工具),按住鼠标左键在图片上拖动,画出三个矩形(矩形之间不要重叠),它们就会被一层绿色蒙板所覆盖,并显示出红色导轨线(浏览器中不会显示蒙板和导轨线),这幅图片就切割完备,如图3,可以输出存盘以便将来使用到你的HTML中。输出时除了可以在Export Preview中调整一些属性外,按下Export还会有一个输出项目设置栏,如图4,其中Base Name是存盘时的主文件名,使用GIF格式,Slicing选 Use Slice Objects,Style选择你将把它用于何种网页编辑工具,或存为Dreamweaver 3 的模板文件(选择Dreamweavwer 3 Library.lbi),也可存为标准HTML格式文件(选择Generic),Location栏中选择存盘路径。存盘后有一个HTM文件和三个GIF文件,而HTM文件主要是一段自动生成的Javascript代码。


图 3 切割后的图片


图 4 输出设置栏

第三步:如果切割图片后,想要把它用于热点响应,就不忙着进行上面第二步的输出工作,而接着图片切割以后按下面的步骤继续。选择Window > Object,点击一下上面空白处的切片,在出现的属性面板中,清空 Auto-Name Slices前面的选择框,在下面输入一个该切片的名字,例如show,见图5。重复进行以上步骤,把咖啡杯图像的切片命名为hotspot1,把糕点图像的切片命名为hotspot2,都不要取中文名。暂时停下目前的工作,做两个带有文字的图像文件,输出为text1.gif和text2.gif,见图6,存入一个目录中(将来完成的本例所有文件均存到同一目录)。继续前面的工作,点击图片中的咖啡杯切片,选择Window > Behaviors,在Behaviors面板中点击 + 符号,在弹出的菜单中选择Swap Image,如图7。


图 5 为切片命名


图 6 另做两个GIF文字图片


图 7 动作响应面板

第四步:在Swap Image的弹出菜单中,第一栏选择show,见图8。在下一栏的Image File中,选择刚才所存盘的text1.gif文字图像的路径,见图9。下面的两栏均勾上。点击糕点切片,也在Behaviors面板中点击 + 符号,再选择Swap Image,也选中弹出菜单的show,下一栏的Image File中,要选text2.gif文字图像的路径,后面的两栏也要勾上。


图 8 交换图像选择栏


图 9 选择文字图像路径

第五步:点击“OK”后,在Behaviors面板中就会出现鼠标的事件响应onMouseOver一行字,见图10。下面该存盘了,输出设置如第二步所述,参见图4。完成后的切图在浏览器中如图11,当鼠标指向咖啡杯时,上方显示前述第一个文字图像,指向糕点时,上方显示第二个文字图像,鼠标移开时,不显示文字图像。以后在网页编辑软件中,可以为热点切片分别加上超链接。切图的事件响应常用来为网页内容作导航。


图 10 完成鼠标指向的事件响应

图 11 完成后的热点响应切图

另外,第二步开始时,如果不选择切图工具,改为选择工具箱左下角的Hotspot Tool(热点工具)来分割图片,后面采用相同的方法,也可以得到相同的热点事件响应效果,但原图不被分割保存。

万企互联
标签: