# Show image when button is clicked

**URL:** <https://forum.kirupa.com/t/show-image-when-button-is-clicked/396978>\
**Category:** flash\
**Created:** [December 1, 2014, 1:31pm UTC](https://forum.kirupa.com/t/show-image-when-button-is-clicked/396978 "2014-12-01T13:31:02Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![kite111](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kite111/32/7102_2.png) [@kite111](https://forum.kirupa.com/u/kite111)\
**Post date:** [December 1, 2014, 1:31pm UTC](https://forum.kirupa.com/t/show-image-when-button-is-clicked/396978/1 "2014-12-01T13:31:03Z")

</div>

Hello. I want to create something like this.  
[Cupcake creator](http://www.bakedbymelissa.com/checkout/CustomizerCreator.aspx)

Do you guys know how to do it? A circle will be clicked and the corresponding image fades in. Example click btn1 then img1 appears.just like what happens in that cupcake creator linked above.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 2, 2014, 2:55am UTC](https://forum.kirupa.com/t/show-image-when-button-is-clicked/396978/2 "2014-12-02T02:55:32Z")

</div>

This will require a certain amount of code. There are many ways to do this, but my approach would be to have a movie clip that contains your image and the tween that fades it in. This movie will just live in the library, and you can load it programmatically when you click on a button.

Two tutorials might help with this are: [http://www.kirupa.com/developer/flashcs3/displayingContent\_library\_AS3\_pg1.htm](http://www.kirupa.com/developer/flashcs3/displayingContent_library_AS3_pg1.htm) AND [http://www.kirupa.com/developer/as3/hyperlink\_as3.htm](http://www.kirupa.com/developer/as3/hyperlink_as3.htm) (notice how a click event handler is being setup)