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

Posted on 2006-07-07
Last Modified: 2008-05-30
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?

Question by:Nytrix
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
LVL 17

Accepted Solution

mreuring earned 100 total points
ID: 17059187
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.
<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; }
<script type="text/javascript">
<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">


this example can be viewed online (I created it long time ago for the CSS section) :)



Author Comment

ID: 17059758
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">

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.

Author Comment

ID: 17059834
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; }
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now


Author Comment

ID: 17059863
actually nevermind, i just figured out how to change the text color. :-)

Author Comment

ID: 17059940
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?
LVL 17

Expert Comment

ID: 17062852
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...

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In my daily work (mainly using, I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question