Solved

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

Posted on 2006-07-07
6
1,546 Views
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?

thanks.
0
Comment
Question by:Nytrix
  • 4
  • 2
6 Comments
 
LVL 17

Accepted Solution

by:
mreuring earned 100 total points
Comment Utility
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
 

Author Comment

by:Nytrix
Comment Utility
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
 

Author Comment

by:Nytrix
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:Nytrix
Comment Utility
actually nevermind, i just figured out how to change the text color. :-)
0
 

Author Comment

by:Nytrix
Comment Utility
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
 
LVL 17

Expert Comment

by:mreuring
Comment Utility
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

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) 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'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

763 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

9 Experts available now in Live!

Get 1:1 Help Now