1. In your embed code for your flash file, add the following code if it is not already present
wmode="transparent"

This will actually allow for the images to be seen when positioned over the flash file.

2. Create a new div in your style sheet. for this example, we will call it .message
You need to create a div style for each button you want.

Code:
div.message{
position:absolute;
background-color:none;
top:XXXpx;
left:50%;
margin-left:+-XXXpx;
width:XXXpx;
height:XXXpx;
z-index:2;
}

Change all the bold values to suit your specific profile. The width and height should be the size you want your "hit" area for the button to be.
The z-index must be atleast 1 number higher then the z-index for the flash file. Thus placing it above the flash file.

3. Now to place the actual div coding for the image.

Code:

<div class="message">
<img src="http://www.yourlinkhere.com/blankimage.gif" height="XXX" width="XXX" border="none"><a href="URL To Link"></a>
</div>

That is all there is to placing clear gif's over your flash file! Thank you for reading this tutorial. I hope you find it very helpful with your flash animations. For any help with this tutorial or questions, please post only in this forum thread.

**Note**
It is best, that if you want to place clear gif's over your flash file, that you do not give those buttons rollover states. If you are using firefox then
they will show up correctly and act as they are supposed to, but if you use IE then as soon as you hover over the clear gif, the flash file will
act as if you rolled off the flash file and no longer be in its rollOver state. Therefore making a really bad looking effect. Sorry, sucks huh?

~Flash Mods

http://groups.myspace.com/flashmaniacs