Problem mixing Flash/DHTML menu

September 26th, 2003, 1:17 am

Hello,
My I have a DHTML menu for my website and a flash image right under it.
When I click on DHTML menu, I cant see the sub menues becasue it appears that they go under the flash image.
However If i use .jpg or .gif files it is fine but I dont want to use them. I want to use flash.
I am kind of new to this stuff. I am an old time programmer and still new to web.

Please help me out.
check out the site and you see what I mean
http://www.gohitech.com/xyz.htm


thanks

September 26th, 2003, 12:51 pm

Yes, this is a common issue with Flash. When embedding a Flash movie into an HTML page the embed code automatically puts the Flash movie on top of everything else.

Solution: None that I know of.

Possible Solution: Put the menu in 1 div tag and put the flash movie in another div tag, then set the z-index of those div tags so that the menu is above the flash one. I don't think this will work, but I also have never tried it either.


[edit]
possible solution 2: combine both the navigation and the animation into 1 flash movie with the navigation on layers above the animation (or load it in dynamically via loadMovie() or loadMovieNum())
[/edit]

[ATNO/TW]

September 27th, 2003, 6:37 am

You might try this, and it is only a suggestion based on what I know about z-index. (I've used in it code before, but only prewritten code which I modified)

z-index prioritizes what appears on "top" when objects are layered. It's my recolection that the higher the z-index number the higher it is layered. However, z-index only works with items that are positioned (absolute or relative). So you may need to position your flash object and give it a z-index of say 1, then position your DHTML menu with a z-index of 2.

Because I've never really tried experimenting with z-index, I can't give you detailed specifics on how to do it. You can do some Google searches to get some tutes, but also check out w3schools as a starting point:

http://www.w3schools.com/css/pr_pos_z-index.asp

(all that really does is define what it is)

This gives you a working example. http://www.w3schools.com/css/tryit.asp? ... ss_zindex2 In the example you'll see that the default z-index is 0, so if you assign a -1 to the image -- it has a lower "stack order" and as you see in the example appears underneath the text.

Here is the inverse:
http://www.w3schools.com/css/tryit.asp? ... ss_zindex1 In the example you'll see the image appears "above" the text.

You'll have to do some experimenting, but it's the only thing I know of that will accomplish your goal.

--------------------------------
Edited by ATNO/TW to include an additional example and also to clarify that z-index works with absolute or relative postitioned objects. (If set to a specific number which can also be negative, z-index should work on NS 4.x or higher and IE 4.x or higher)

September 27th, 2003, 9:54 am

This is not my problem, but I just learned a whole lot more than I would
have if I didn't read it. I love this forum!

October 4th, 2003, 10:15 pm

You can put DHTML menu under Flash image

[ATNO/TW]

October 4th, 2003, 10:27 pm

You sorta lost me there beata12, are you suggesting to put the actual menu below the Flash object? I think that's the way I'm reading your post. Perhaps that would work, but my first question would be what happens to whatever else is under the menu? My second question would be, is that the way gohitech wants it to appear? I still hold fast to the thought that layering it properly with a good stack order using z-index is the only viable solution.

(btw -- welcome to OZZU!)

October 5th, 2003, 5:12 pm

Ok, I took this from another forum (although this post was mine so I didn't steal someone elses post, it was just on another forum), so I will just post it here....

---------------------------------------------------------------------
Step 1) In your publish settings in Flash (File/Publish Settings) make sure to set the Window Mode to "Transparent Windowless" (this is important) then publish the .html file to get the embed code.

Step 2) Use 1 div tag to hold the flash movie, this z-index will be set at 1 (z-index is the stacking order)

Something like...

Code: [ Download ] [ Select ]

<DIV ID="flashMovie" STYLE="position: absolute; top: 10; left: 10; width: 550; height: 400; z-index: 1;">

<!--Flash Embed Code Here-->

</DIV>

1. <DIV ID="flashMovie" STYLE="position: absolute; top: 10; left: 10; width: 550; height: 400; z-index: 1;">
3. <!--Flash Embed Code Here-->
5. </DIV>

Step 3) Use another div tag with the z-index set to higher number the the Flashes div tag, something like this...

Code: [ Download ] [ Select ]

<DIV ID="htmlContent" STYLE="position: absolute; top: 10; left: 10; width: 550; height: 400; z-index: 2;">

<!-- HTML content here -->

</DIV>

1. <DIV ID="htmlContent" STYLE="position: absolute; top: 10; left: 10; width: 550; height: 400; z-index: 2;">
3. <!-- HTML content here -->
5. </DIV>

Note the STYLE property of the div tag:

position: absolute is very important, you will need this to be able to position your div tag.

top: 10 is how far from the top of the document you want the div tag to be

left: 10 is how far from the left of the document you want the div tag to be.

width: 550 is of course the width of the div tag (I still don't get why the DIV tag itself doesn't support a WIDTH property, you have to width and height it via CSS like this)

height: 400 is of course the height of the div tag.

z-index: # is the z-index value, which sets the stacking order. The higher number is in front of the lower number. So in this case the flash movies div tag has value of 1 and the html contents div tag has a value of 2, so the html will be displayed over the flash.

Now back to step 1.... why transparent windowless? Well apparently setting the flash window mode to transparent windowless is the only way this process works, if you don't set it to transparent windowless you are left with Flash over everything else.
---------------------------------------------------------------------


Ok, now to apply this to your situation would be the same, the movie and the menu will have to be contained in different div tags on different z-indexs.


HOWEVER, to do this you will also have to do static positioning via top and left (descriptions in the quoted post), and oftentimes different browsers like to interpret these differently.

This is your only option though, so if this can't work for you, I don't know what to tell you. Sorry man, I hope Macromedia finds some way to fix this issue easier somehow




ATNO/TW: With DHTML menus, if they overlap a Flash movie they end up going underneath the Flash movie instead of above, because of the z-indexing of the embedded movie.

[ATNO/TW]

October 5th, 2003, 5:23 pm

Excellent post lostinbeta. Thanks. I'll do some serious playing with that.

October 7th, 2003, 9:57 pm

beata12 - you missed the point of the thread. he's not trying to put the
flash object over the dhtml, it does that naturally. he's trying to avoid it.

lostinbeta is at it again -- fuggin' genius if you ask me.

October 7th, 2003, 10:01 pm

UNFLUX wrote:

lostinbeta is at it again -- fuggin' genius if you ask me.

No, not genius, just too much time and no life.

October 16th, 2003, 8:17 pm

I have been investigating a resolution to this problem as well. I am using coldfusion mx with the cfchart tag outputing in a flash format. The results are the same as the original identified problem. I had heard about the flash tweak but since this is a coldfusion tag, I have not been able to figure out how to apply the flash change. I am also open to feedback. I have played with the div tag and not found any success on our site, mainly due to the orientation of the existing layout or possibly inexperience

[ATNO/TW]

October 16th, 2003, 10:19 pm

Welcome to OZZU cyberramtech.

I think if you follow and experiment with the solution in lostinbeta's last post you'll get it worked out.

October 23rd, 2003, 7:35 am

But how about the problem in the netscape 4.75. Z-index is not supported in the NS.

October 23rd, 2003, 9:09 am

Are layers supported in NS4? If so you might be able to try them... otherwise this is just something you can't do in NS4.

The joy of cross browser means that not everything will work in every browser.

October 23rd, 2003, 9:41 am

lostinbeta wrote:

not everything will work in every browser.

and personally i don't like that headache. I give the most recent
browsers a shot, and if they're good, I'm good.

I don't waste my time on working for browsers that have no business
even being used any more. This is 2003, not 1998.