在我们浏览购物网站时，经常见到这种交互效果，如选择商品的尺码、颜色，见图16。

下面昆明网站建设小编就带大家来看看我们在Axure RP8中使用图像的交互样式实现这个简单的交互效果。

首先，准备好三张图像素材，见图17。

（图16）

A：选中时

B：鼠标悬停时

C：未触发交互样式

（图17）

第一步：将 unselected.jpg 拖入Axure设计区域，或者使用图像部件导入，见图18。

（图18）

第二步：右键单击图像，在弹出的关联菜单中选择【交互样式】，见图19。然后在弹出的【设置交互样式】对话框中选择【鼠标悬停】，勾选【图像】并导入 hover.jpg，见图20。

（图19）

（图20）

第三步：选择【选中】，勾选【图像】并导入 selected.jpg，见图21。然后单击【确定】，关闭【设置交互样式】对话框。

（图21）

第四步：在设计区域中选中图像部件，然后在右侧的部件【属性】面板中双击【鼠标单击时】事件，见图22，然后在弹出的【用例编辑器】对话框中进行配置，见图23。

在【用例编辑器】中配置完动作后，点击【确定】按钮，关闭【用例编辑器】，此时在部件【属性】面板中可以看到刚刚配置好的用例，见图24。

（图22）

（图23）

第五步：在顶部的工具栏中点击【预览】按钮，或者按下快捷键PC机F5/Mac机 Shift+Command+P，快速预览交互效果。

（图24）

分割/裁剪图像：图像部件可以被水平或垂直分割，这样可以非常方便地处理导入的截图。右键单击图片，选择【分割图像】或【裁剪图像】或在部件【属性】面板中选择，见图25。

1：输入用例名称（在学习阶段应养成给用例命名的好习惯）。

2：在左侧添加【选中】动作。

3：组织动作（有多个动作时，可以组织动作的执行顺序）。

4：在右侧的配置动作中勾选【图像部件】。

5：设置选中状态值为true。

分割图像（Slice）：将图像分割成多个水平或垂直的部分。

裁剪图像（Crop）：设置想保留的图片区域。

图像边框和圆角：通过选择工具栏中的线宽和线条颜色就可以给图像添加边框。也可以通过拖动部件左上角的圆角半径控制手柄，或是进入部件的样式面板设置图像圆角，见图26（A: 自左至右分别是图像线条颜色、线条宽度、线条样式；B: 圆角半径控制手柄）。

（图25）

（图26）

图像的不透明度：导入的图像可以调整透明度，在部件样式面板中输入不透明度百分比即可，见图27。

优化图像：大图像会使你的RP文件增大，还会影响浏览质量，使用优化图像可以在不改变图像尺寸的前提下减小图像大小，但是这有可能影响图片质量。要优化图片，右键单击图像并选择【优化图像】，见图28。

（图27）

（图28）

小提示：导入GIF动画图像时不要使用优化图像，这样会导致图像失去动态效果。

保护边角：该功能类似于九宫格切图和.9png制作，它可以在调整图像大小时保护边角不变，见图29。

（图29）

A：拉伸之前的图像。

B：未使用保护边角拉伸后的图像。

C：使用保护边角拉伸后的图像。

指定选项组：和单选按钮组相似，图像也可以被指定选择组，当选择组中的图像设置了选中时的交互样式后，点选其中一张图像，其他图像都会被设置为默认样式（未选中状态）。要将图像设置到选项组，先选择多张图像，然后单击右键选择【指定选项组】，或者在部件【属性】面板底部选择“设置选项组”，见图30。

（图30）