# Fading an image

**URL:** <https://forum.kirupa.com/t/fading-an-image/38314>\
**Category:** flash\
**Created:** [December 21, 2003, 4:43am UTC](https://forum.kirupa.com/t/fading-an-image/38314 "2003-12-21T04:43:04Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![shadow77](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@shadow77](https://forum.kirupa.com/u/shadow77)\
**Post date:** [December 21, 2003, 4:43am UTC](https://forum.kirupa.com/t/fading-an-image/38314/1 "2003-12-21T04:43:04Z")

</div>

How do you fade a graphic on mouseover, and then have the graphic return to its original alpha on mouseout?

Basically what I want to do is have the graphic fade to around 50% alpha on mouseover and then fade back to 100% alpha on mouseout.

I am really stuck on this, any help is appreciated.

Thanks 🙂

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 21, 2003, 4:58am UTC](https://forum.kirupa.com/t/fading-an-image/38314/2 "2003-12-21T04:58:33Z")

</div>

put the graphic into a MC, and put this AS on the MC…  
[AS]  
onClipEvent (load) {  
this.\_alpha = 100;  
}  
onClipEvent (enterFrame) {  
function fadeOut() {  
if (this.\_alpha\>50) {  
this.\_alpha -= 10;  
} else {  
this.onEnterFrame = null;  
}  
}  
function fadeIn() {  
if (this.\_alpha\<100) {  
this.\_alpha += 10;  
} else {  
this.onEnterFrame = null;  
}  
}  
this.onRollOver = function() {  
this.onEnterFrame = fadeOut;  
};  
this.onRollOut = function() {  
this.onEnterFrame = fadeIn;  
};  
}  
[/AS]

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)\
**Post date:** [December 21, 2003, 5:05am UTC](https://forum.kirupa.com/t/fading-an-image/38314/3 "2003-12-21T05:05:18Z")

</div>

Thanks, worked great! 🙂