Video & Rollover links

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
mikewooten
Forum Contributor
Posts: 169
Joined: Wed Feb 11, 2004 12:13 pm
Location: Duluth, Georgia
Contact:

Video & Rollover links

Post by mikewooten »

Hello,
I have a video on a page with a few rollover links under the video. The popups appear underneath the video. What I would like is for the popups to appear over or ontop of the video.
How can I do that? Is that accomplished with layers or is there another way to get the popup to appear ontop of the video?
Any help would be much appreciated.
Thanks

Below is an example of what the video & links look like
http://www.maxxis.com/Bicycle/Mountain/Ikon.aspx

Here is the code that I am using:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#video {
position:absolute; width:331px; height:330px; z-index:2; left: 241px; top: 129px; background-color: #FFF600;
	}	
#tech_stamps {
position:absolute; width:530px; height:55px; z-index:1; left: 241px; top: 475px; background-color: #00CCFF; 
	}	
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<span style=""></span>
<font color="#00FFFF"></font>
<DIV align=center id="video"><IFRAME height=331 src="http://www.youtube.com/embed/Wu1WHVA-p9k?rel=0" frameBorder=0 width=530 allowfullscreen="">
				</IFRAME></DIV>
				<LINK rel=stylesheet type=text/css href="http://www.maxxis.com/Files/style.css">
<div align="center" id="tech_stamps"><SPAN id=rollover1><A href="#"><IMG border=0 alt="" src="http://www.maxxis.com/Images/exo_stamp.jpg"> <SPAN><IMG style="BORDER-BOTTOM: orange 3px solid; BORDER-LEFT: orange 3px solid; BORDER-TOP: orange 3px solid; BORDER-RIGHT: orange 3px solid" border=0 src="http://www.maxxis.com/Images/EXO_tech_info.jpg"> </SPAN></A></SPAN><SPAN id=rollover2><A href="#"><IMG border=0 alt="" src="http://www.maxxis.com/Images/3C_stamp.jpg"> <SPAN><IMG style="BORDER-BOTTOM: orange 3px solid; BORDER-LEFT: orange 3px solid; BORDER-TOP: orange 3px solid; BORDER-RIGHT: orange 3px solid" border=0 src="http://www.maxxis.com/Images/3C-MTN_tech_info.jpg"> </SPAN></A></SPAN><SPAN id=rollover3><A href="#"><IMG border=0 alt="" src="http://www.maxxis.com/Images/exc_stamp.jpg"> <SPAN><IMG style="BORDER-BOTTOM: orange 3px solid; BORDER-LEFT: orange 3px solid; BORDER-TOP: orange 3px solid; BORDER-RIGHT: orange 3px solid" border=0 src="http://www.maxxis.com/Images/EXC_tech_info.jpg"> </SPAN></A></SPAN></div>
</body>
</html>
User avatar
Jade
Forum Regular
Posts: 908
Joined: Sun Dec 29, 2002 5:40 pm
Location: VA

Re: Video & Rollover links

Post by Jade »

Which browser are you using? They're showing up over the iFrame in Firefox 5.
mikewooten
Forum Contributor
Posts: 169
Joined: Wed Feb 11, 2004 12:13 pm
Location: Duluth, Georgia
Contact:

Re: Video & Rollover links

Post by mikewooten »

I'm on a PC.
I have used Firefox 3.5.9 - They appear under
Internet Explorer 8 - They appear under
Safari - 3.1 - They appear under
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Video & Rollover links

Post by Weirdan »

Adding '&wmode=opaque' to the iframe src fixes this isssue (in chrome at least).
mikewooten
Forum Contributor
Posts: 169
Joined: Wed Feb 11, 2004 12:13 pm
Location: Duluth, Georgia
Contact:

Re: Video & Rollover links

Post by mikewooten »

Awesome!!!
The '&wmode=opaque' worked in Explorer, Firefox and Safari.
Thank you very much!!! :)
Post Reply