Behaviour on mouse over ? Please help

Question

Hi,
I am very new here so please be patient when you read about
my "ignorance". I am making a website for a friend designer and
here is the idea :
- the "main" page contains a picture of a cabinet with 5
drawers (which serve as menu buttons)
-The idea is that when you roll over the drawers with the
mouse, the picture changes into one with that particular drawer
open and the subject written next to it.
-When you roll further the next picture appears, etc.
-When clicked on any of those pictures (the open drawer) the
behaviour should be to go to the dedicated html.page
The problem :
The picture is a full screen size picture (250kb).
I thought that with putting hotspots on the main picture, and
using the hide and show layers behaviour I could make this work but
it does not seem to do anything right. (when moving the mouse over
and off the drawer the picture keeps jumping back and forward)
Can anyone suggest a better way to do this ?
Please feel free to ask for more info if the above does not
make sense to you.
Thanks
Bubbles

Answer 1

What you probably want to do is create invisible buttons that you place over the main image.  These will provide the rollover triggering that you want.  To make invisible buttons you can create button symbols that only have a shape in their "Hit" frames.  That creates a button that you can still see while editing but do not appear in the published file when you run it.
Then you need to have an image that rolling over that button will bring into view.  It would be preferable to have the images that appear be away from the buttons so that they don't interfere/block the buttons, so each larger image may have to be placed in a different area.
To control an image that appears, for starters you could just have it invisible and make rolling over the button make it visible.  You would need to convert these images to movieclips in order to accomplish that.  So let's say you create an image movieclip and place it on the stage and assign it an instance name of "image1" (instance names are assigned in the properties panel).  And for that image/movieclip's button you add a button over the main image and give that an instance name of "btn1"
To make them work as planned, in the timeline in the same frame (different layer) where you have btn1 and image1, you would add code as follows...
image1.visible = false;
btn1.addEventListener(MouseEvent.ROLL_OVER, showImg1);
btn1.addEventListener(MouseEvent.ROLL_OUT, hideImg1);
function showImage1(evt:MouseEvent):boid {
     image1.visible = true;
function hideImage1(evt:MouseEvent):boid {
     image1.visible = false;