Axure Tutorial: Switching Images by Changing Images

Introduction

There are many ways to switch images, such as using dynamic panel, repeater and so on. But the easiest and quickest way is to change the image directly. Today, let's learn how to switch images.

Widgets Setup

1. Make 2 default images.
2. Make 3 buttons,  named button 1, button 2 and button 3 respectively.

Interactions Setup

First, we make the effect of switching images by hovering.

When Mouse Enters the image widget, the image should be changed. Here we need to upload a new image.

When Mouse Leave the image, the image should also be changed. Here we need to upload the original image.

Then we set up to switch the image by clicking the button

 

Switch images when the button is clicked. We need to upload a new image.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message. 

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).


Well Joe @AxureBoutique, a technology writer and teacher, focuses on Axure prototype design and product design.

 


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.