我們仍以購物網站中選擇尺碼的交互場景為例，當我們單擊選擇尺碼M時，L和XL變為灰色（未選中）。同理，點擊L 碼時， M和XL 變為灰色（未選中），見圖31。

（圖31）

下面昆明網站建設小編就Axure RP8中使用給圖像“指定選項組”功能來實現這個交互效果。

首先，準備好6張圖像素材，分別是3張未選中狀態和3張選中狀態的圖像，見圖32。

（圖32）

第一步：將3張未選中狀態的圖像導入Axure，并在右側的部件【屬性】面板中分別給其命名為M、L、XL，見圖33。

（圖33）

第二步：分別設置這三張圖像的【鼠標懸停時】的交互樣式，上一個小案例中詳細介紹過哦。

1．先右鍵單擊圖像。

2．在彈出的關聯菜單中選擇【交互樣式】。

3．在彈出的【設置交互樣式】對話框頂部選擇【選中】。

4．勾選【圖像】并導入與之對應的選中時的圖像。

5．點擊【確定】按鈕，關閉【設置交互樣式】對話框，見圖34。

（圖34）

第三步：在設計區域中選中圖像M，在部件【屬性】面板中雙擊【鼠標單擊時】事件，在彈出的【用例編輯器】中添加【選中】動作，并在右側的【配置動作】中勾選圖像M，設置其選中狀態值為true，見圖35，然后單擊【確定】按鈕關閉用例編輯器。

第四步：使用同樣的方法給圖像 L和XL 添加【鼠標點擊時】事件。

第五步：在設計區域中同時選中三張圖像，右鍵點擊其中任意一張，在彈出的關聯菜單中選擇【指定選項組】，見圖36。然后在彈出的【設置選項組】對話框中輸入組名稱，見圖37，單擊【確定】按鈕關閉【設置選項組】對話框。

（圖35）

（圖36）

（圖37）

第五步：在頂部的工具欄中點擊【預覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預覽交互效果。