Axure Tutorial: Switching Images by Changing Images


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. 


If you like the article, please share it with others with page link, thanks for your supporting! ❤


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.

This section doesn’t currently include any content. Add content to this section using the sidebar.