URGENT: Problem With Javascript Popup menu and Flash Movie

programming flash
1

Hi all,

Facing a problem, so simple that I’m kicking myself cause I can’t fix it. Hoping you guys can help me out.

Anyway, I’m creating a simple website with a table with 2 rows, designated as “TOP”, and “BOTTOM”. I’m using a simple graphic for the “TOP” table, where I attached a simple Javascript Popup Menu which will activate when a mouse over is detected. Next, I created a Flash movie and embedded it into the “BOTTOM” table. Anyway so far so good.

The Javascript menu will activate when it detects a mouseover, but the problem is, it will be “below” the flash movie. Meaning, if we have different layers of menu, the flash movie is on the highest layer, thereby overlapping the javascript menu. So, although I can still use the menu (as I made it slightly longer than the flash movie), I can’t exacly see it! And yeah, the flash movie is working well, no probs there.

Any ideas on how I can go about this? Worse to worse, I’ll just create both the “TOP” and “BOTTOM” as a singular flash movie, but I’m just very frustrated that Flash and Javascript cannot co-exist (well, for my website anyway). Do help. Thanks dudes!

p.s: basically, my problem is exacly the same as the problem faced by omkar, posted under the topic “JavaScript Menu & Flash Problem”, which provided me with a link to

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/zindex.asp,

but because I am such an idiot, I can’t make it work for my website. I do understand that I need to change the z-index of my top menu image to be higher than the swf. But I don’t know how to go about doing it. I added in the code

<img src=“images/index_04.jpg” alt="" name=“image1” width=“83” height=“26” border=“0” id=“image1” z-index:“1” >

to make the image have a higher z-index. But I’m not sure how I can do this for the swf img, as it doesn’t use the img src tag.

2

Hi,

Two things:

  1. You need to put z-index in a style attribute,
  2. In order for z-index to take effect, the HTML image element needs to be positioned using position. I would set position to relative.

Here is an example.

<img src=“images/index_04.jpg” alt="" name=“image1” width=“83” height=“26” border=“0” id=“image1” style=“z-index:1;position:relative;” >

Also, do you have an example link? That would help a lot in seeing and figuring out the problem.