Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1563
  • Last Modified:

Is it possible to place an image or text over a flash object?

I just found out the hard way you can't use a DIV to place text or an image over a flash object.

Is there any way at all to be able to do this?  with CSS or some javascript trick?

thanks.
0
Nytrix
Asked:
Nytrix
  • 4
  • 2
1 Solution
 
mreuringCommented:
You should just use some CSS for that.
Be carefull though, it also requires a flash-property to be set, this being the wmode, which needs to be set to transparent or alternatively opaque I believe, see example below for a working sample.
<html>
<head><title>html over flash</title></head>
<style type="text/css">
      div#htmlcontent { z-index: 5; border: 1px solid red; position: relative; top: 3em; background: white; }
      div#flashcontent { z-index: 1; }
</style>
<script type="text/javascript">
</script>
<body>
<div id="htmlcontent">htmlcontent</div>
<div id="flashcontent"><object type="application/x-shockwave-flash" data="lighting-button.swf" width="122" height="74">
            <param name="movie" value="lighting-button.swf">
            <param name="wmode" value="transparent">
</object></div>
</body>

</html>

this example can be viewed online (I created it long time ago for the CSS section) :)
http://www.windgazer.nl/eexchange/htmloverflash.html

Greets,

 Martin
0
 
NytrixAuthor Commented:
Ok that's great.  I'll have to tweek this, but it looks like it works, thanks!

Cuz the flash is made transparent, the flash is a dark outerspace thing...stars....

The background of the table in which it resides is set to white.

Making the flash transparent gives the flash a whitish hue to it (blending with the white table bgcolor).

Setting the table backcolor to black seems to help.

BTW, just over your body tag, is this code...

<script type="text/javascript">
</script>

What is this doing?

As well, where does this technically lie (this code) in this document, since the closing </HEAD> tag is placed just after the TITLE tag?

thanks again.
0
 
NytrixAuthor Commented:
By the way, do you know how you would change the font color and face of that text?

Somewhere within here I assume...

<style type="text/css">
     div#htmlcontent { z-index: 5; border: 1px solid red; position: relative; top: 3em; background: white; }
     div#flashcontent { z-index: 1; }
</style>
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
NytrixAuthor Commented:
actually nevermind, i just figured out how to change the text color. :-)
0
 
NytrixAuthor Commented:
The one thing this does seem to do is set the alignment of my flash (within my table) to I guess it's "bottom" or something.  Instead of being center aligned, it's pushed the flash to the bottom of the table.

Is your code overriding my <TD align=center> code? and is there a way to get my flash aligned center again in the table?
0
 
mreuringCommented:
The code-sample that I provided is just a quick and dirty mock up that I made once upon a time.

The code as it is placed a html text down 3 lines and because the flash is right under it the text gets moved on top of the flash. In essence I would have to have a peek at your html before I could make any recomendations. The most important parts of this example are that the flash gets a setting for wmode and that the text has position, it's not a general copy-paste  piece of coding.

So, a short peek at your page should help me give you a clearer picture of what needs to be tweaked for you.

As to the questions you had already asked:

 - That script block does nothing, it was just there because I used a generic testing template at the time and didn't bother to remove it
    There's no code in this page that does anything, had there been code in that block of javascript it would likely only have been function definitions not accual output.

 - div#htmlcontent is the line that targets the text in this example, but I would need to have a look at your html to give you advice that is more in line with what you accually want.

 - I suppose you probably copy pasted most of the above example streight into your page, it wasn't meant as such, so we'll need to clean it up a bit, that should also give you a bit more control again...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now