实例 4：切图和热点响应

　　本例中你要学到如何把一幅较大的图片切割成若干幅较小的图片，还要学习设置图像热点以及鼠标响应的方法，切割的图片和设置了热点的图片都可以通过自动生成的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（热点工具）来分割图片，后面采用相同的方法，也可以得到相同的热点事件响应效果，但原图不被分割保存。