Set the bgcolor attribute value

Forum Moderators: open

Message Too Old, No Replies

Set the bgcolor attribute value

Rain_Lover

3:13 pm on Jul 22, 2011 (gmt 0)

Hi,

The following doesn't work:

<!DOCTYPE HTML>
<title>Test</title>
<embed id="foo" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />

<script type="text/javascript">
document.getElementById("foo").setAttribute("bgcolor", "#00FF00");
</script>

But if you change setAttribute to ("width", "800"), it works with no problem! What am I missing?

Any help is appreciated!
Mike

birdbrain

3:48 pm on Jul 22, 2011 (gmt 0)

Hi there Rain Lover,

the bgcolor attribute has been deprecated in favour of CSS for quite sometime now and is probably the reason that it does not work.

Try instead...


 document.getElementById("foo").style.backgroundColor='#0f0';

birdbrain

penders

4:44 pm on Jul 22, 2011 (gmt 0)

Setting the bgcolor attribute in script appears to only work in IE? But like birdbrain says, it is deprecated anyway in favour of CSS. Hard coding the bgcolor attribute in the HTML does appear to work however (to be backward compatible I suspect).

Rain_Lover

12:20 pm on Jul 24, 2011 (gmt 0)

Thanks for the answers, but they are two different things. To see what I mean please try adding bgcolor="#00FF00" to the embed code and compare it with changing the style background color.

I'm building a widget in which users might choose a custom background color or set it to transparent.
Here's what I initially tried:

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var x;
var y;
var z;
z = "#00FF00";
if (z == "transparent" || z == "") {
  x = ""; y = "transparent";
 }
else {
  x = z; y = "window";
}
</script>
</head>
<body>
<embed id="foo" bgcolor="'+x+'" wmode="'+y+'" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />
</body>
</html>

But it didn't work. I wonder what I did wrong.

penders

1:25 pm on Jul 24, 2011 (gmt 0)

To see what I mean please try adding bgcolor="#00FF00" to the embed code and compare it with changing the style background color.

Indeed, the bgcolor (even the default) appears to be overwriting the style.backgroundColor - which still seems to be present, but is behind the embed bgcolor?

Setting bgcolor="transparent" in the HTML shows the style.backgroundColor, but a darker shade - I suspect 'transparent' is not completely transparent, or may be that wmode attribute is required as well?!

However, looking at your code, if you also set wmode="transparent" then this appears to work OK (you don't need to set bgcolor at all) - You can then set the backgroundColor in the CSS...

<embed id="foo" wmode="transparent" src="http://www.w3schools.com/media/bookmark.swf" 
width="400" height="40" type="application/x-shockwave-flash"></embed>

<script> 
document.getElementById("foo").style.backgroundColor = '#0f0'; 
</script>

The code you have above doesn't work because where you are trying to output x and y you are not in a script section!

Rain_Lover

5:36 pm on Jul 24, 2011 (gmt 0)

Indeed, the bgcolor (even the default) appears to be overwriting the style.backgroundColor - which still seems to be present, but is behind the embed bgcolor?

bgcolor - [hexadecimal RGB value] in the format #RRGGBB. Specifies the background color of the movie. Use this attribute to override the background color setting specified in the Flash file. This attribute does not affect the background color of the HTML page.
Source: [kb2.adobe.com ]

Setting bgcolor="transparent" in the HTML shows the style.backgroundColor, but a darker shade - I suspect 'transparent' is not completely transparent, or may be that wmode attribute is required as well?!

The bgcolor value shouldn't be set to transparent -- just a hexadecimal RGB value. That's why browsers don't interpret it correctly:

<!DOCTYPE HTML>
<title>Test</title>
<embed bgcolor="transparent" src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" type="application/x-shockwave-flash" />

It shouldn't be green, should it?

However, looking at your code, if you also set wmode="transparent" then this appears to work OK (you don't need to set bgcolor at all) - You can then set the backgroundColor in the CSS

What if a user decides to display the flash default background color?
For example: [rain-lover.webs.com ]

The code you have above doesn't work because where you are trying to output x and y you are not in a script section!

Would you mind helping me correct it? All I want is define three variables and change x & y based on the z value.

penders

8:08 pm on Jul 24, 2011 (gmt 0)

bgcolor ... Use this attribute to override the background color setting specified in the Flash file.

Ah OK, I had wondered whether the flash movie itself was somehow reading this value.

The bgcolor value shouldn't be set to transparent -- just a hexadecimal RGB value. That's why browsers don't interpret it correctly...

It appears that Flash (rather than the browser) attempts to convert anything in the bgcolor attribute to an RGB colour?! So 'transparent' just so happens to convert to a greeny colour it seems, just like bgcolor="diamonds" converts to a deep gold!

What if a user decides to display the flash default background color?

A 'user'? Is this not something you are controlling on your own website?

<embed id="foo" bgcolor="'+x+'" wmode="'+y+'" 
src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40" 
type="application/x-shockwave-flash" />

Since you are depending on JavaScript to write the attribute values, you might as well write the whole element with JavaScript...

<script type="text/javascript"> 
var htm = ''; 
htm += '<embed id="foo" bgcolor="' + x + '" wmode="' + y + '"'; 
htm += ' src="http://www.w3schools.com/media/bookmark.swf" width="400" height="40"'; 
htm += ' type="application/x-shockwave-flash" />'; 
document.write(htm); 
</script>

This assumes x and y have been defined above in your code.

Fotiman

12:51 pm on Jul 25, 2011 (gmt 0)

My suggestion would be to use something like SWFObject [code.google.com] to embed the flash.
This will provide a cross-browser implementation. More info available at [blog.deconcept.com...]

Rain_Lover

2:48 pm on Jul 26, 2011 (gmt 0)

It appears that Flash (rather than the browser) attempts to convert anything in the bgcolor attribute to an RGB colour?!

It doesn't seem to be correct. Please try the following valid code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<title>Sample Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="http://sites.google.com/site/mori79b/icons-logos/favicon.ico" type="image/x-icon">
</head> 
<body bgcolor="#transp"> 
</body>
</html>

This assumes x and y have been defined above in your code.

Thanks for the solution, but please see my dummy code: the real variable is z and x&y values are set based on z changes.
If you don't mind, let me rephrase my question and just forget about my flash embed code: in general what's the alternative to the JavaScript setAttribute method?

Thanks for your patience!

Rain_Lover

2:51 pm on Jul 26, 2011 (gmt 0)

@Fotiman,

Thanks for the suggestion! I've never used that and I'm going to learn how it works.

P.S. Regardless of embedding flash and my original question, is there an alternative to the JavaScript setAttribute method?

penders

3:38 pm on Jul 26, 2011 (gmt 0)

It appears that Flash (rather than the browser) attempts to convert anything in the bgcolor attribute to an RGB colour?!

It doesn't seem to be correct. Please try the following valid code...

In this case the browser is converting the "#transp" to the same RGB colour value (a dark green), which is understandable. However, other values like "#transparent" and "transparent" do appear to give a different value when compared to the embed bgcolor attribute.

I think the bgcolor attribute of the embed element is unique in that the Flash movie itself appears to read this value in order to colour the background of the flash movie itself (as documented on the page you link to) - not the background colour of the embed container, or does it do that as well? I'm speculating, but that is what appears to be happening.

This also might explain why changing the bgcolor attribute once the page has already been parsed has no effect. I assume the Flash movie somehow reads this attribute when the Flash file is first loaded. When it is changed later, Flash doesn't pick it up? But then it might just be a browser quirk... preventing the bgcolor attribute from being set.

...is there an alternative to the JavaScript setAttribute method?

You can often set the property directly:

document.getElementById("foo").bgcolor = "#00FF00";

(If the property name is the same as the attribute. Case-sensitive, so 'bgcolor' is different to 'bgColor' in this instance.)

I'd certainly have a look into using SWFObject as Fotiman suggests.

Fotiman

3:50 pm on Jul 26, 2011 (gmt 0)

setAttribute is actually a DOM method (not JavaScript)... just to clarify. :)

Here's what I suspect may be happening:

Flash Player is only reading the value at initialization. In other words, the <embed> element is recognized by the browser and the Flash Player plugin takes over the rendering of that element. After the fact, changing the HTMLElement attributes has no effect on the object that has been created by the player. If this is the case, then it won't matter how you try to set the properties (whether you use setAttribute or accessing the property directly).

SWFObject should solve the problem for you, I think.

Rain_Lover

3:54 pm on Jul 26, 2011 (gmt 0)

You can often set the property directly:
document.getElementById("foo").bgcolor = "#00FF00";
(If the property name is the same as the attribute. Case-sensitive, so 'bgcolor' is different to 'bgColor' in this instance.)

Tried both to no avail. Thanks a lot all the same! :)