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
  • 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; }
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.


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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
bootstrap footer centering and expand problems 7 42
replace all occurrences within a string 8 26
how to avoid redundand ajax calls 5 28
where is team.js? 3 23
Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
In Part 1 ( we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…

813 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now