Member Avatar for MDGM

Hi all,

I need to have a semi transparent picture hovering over a windows media player plugin video. How do i do this? Html preferably...

Thanks,
Max

  • 3 Contributors
  • 5 Replies
  • 113 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by MDGM
Member Avatar for digital-ether

Hi all,

I need to have a semi transparent picture hovering over a windows media player plugin video. How do i do this? Html preferably...

Thanks,
Max

Heres an example of how you will achieve this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Image overlay over Windows Media Player Plugin</title>

<style type="text/css">
<!--

.wmp_wrap {
	/* position fixed allows you to */
	/* absolutely position child elements */
	/* relative to this element */
	position: fixed;
}

.wmp_overlay {
	/* positioning */
	z-index: 1000;
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	/* dimensions */
	width: [width of embed];
	height: [height of embed];
	/* transparency */
	filter:alpha(opacity=100);
	opacity: 1;
	-moz-opacity:1;
}

.wmp_wrap embed {
	
}

-->
</style>


</head>

<body>

<div class="wmp_wrap">
<img class="wmp_overlay" src="ajaxchat_box_101.png" />
<embed ...>Some example Text. Replace with your WMP Plugin</embed>
</div>

</body>
</html>

What I did was create a DIV to wrap WMP and the IMAGE overlay.
The wrapper DIV is has the the position: fixed. This allows all child Nodes/Elements to be positioned absolutely, relative to this DIV.

Then just position your Image absolutely inside the wrapper DIV and it will overlay the <embed> (WMP) that is inside the wrapper also.

There are a few things that will cause problems with this:

1) You may need to use .png files (support 24-Bit Alpha transparency ie: layers) as .gif sucks at transparency. (Binary Transparency ie: single tranparent color). However some versions of IE have problems with 24-Bit PNG trasparency, there are IE specific solutions to this.

2) A plugin is not really an HTML node, so it will not respect the z-index layering of the HTML elements... This can also be fixed with a few hacks..

Hope that starts you off...

commented: Nice explanation as always (iamthwee) +6
Member Avatar for MDGM

Perfect, thanks! The code works perfectly and ty for the detailed explanation - i dont understand embeds or css but i do better now :mrgreen:

Member Avatar for digital-ether

I think there is a typo there with position:fixed;

It should have been position:relative;

.wmp_wrap {
	/* position relative allows you to */
	/* absolutely position child elements */
	/* relative to this element */
	position: relative;
}

Thanks Urolicious for pointing that one out ;)

Member Avatar for MDGM

yeh i was adding the code with my brother and he spotted it so i changed it. sorry for not mentioning! i didnt think it would help :s anyway, thanks again for the help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.