...

View Full Version : Video & Rollover links



mikewooten
07-07-2011, 08:52 PM
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:


<!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>

Sammy12
07-08-2011, 06:46 AM
z-index?

you can set a z-index for the video



video.div {
z-index: 10;
}
popup.div {
z-index: 100;
}


whichever z-index is larger will appear "ontop". If one is position: relative; you have to match the other with position relative as well.



video.div {
z-index: 10;
position: relative;
}
popup.div {
z-index: 100;
position: relative; /* Gotta Match Them */
}

mikewooten
07-08-2011, 03:20 PM
Thank you!
I have tried doing that and nothing happens. The popups still appear under the video. I tried switching the z-index, there is no difference in the way it looks. Is there any way to get the pop ups on top of the video?

Here's the CSS i'm using:




#video {
position:relative; width:331px; height:330px; z-index:10; left: 241px; top: 129px; background-color: #FFF600;
}

#tech_stamps {
position:relative; width:530px; height:55px; z-index:100; left: 241px; top: 150px; background-color: #00CCFF;
}

Donkey
07-08-2011, 03:36 PM
I would try:
1. make the containing div for the video position relative.
2. put the roll-over buttons inside the containing div.
3. position the pop-ups absolutely inside the containing div and adjust the dimensions until the pop-ups are where you want them.

mikewooten
07-08-2011, 09:31 PM
like this?
I put the IFrame, the buttons & popups in the first div



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#video {
position:relative; width:331px; height:330px; z-index:10; left: 241px; top: 129px; background-color: #FFF600;
}

#tech_stamps {
position:relative; width:530px; height:55px; z-index:100; left: 41px; top: 050px; background-color: #00CCFF;
}
</style>
</head>

<body>


<DIV align=center id="video" style="position:relative;">

<IFRAME height=331 src="http://www.youtube.com/embed/Wu1WHVA-p9k?rel=0" frameBorder=0 width=530 allowfullscreen="">
</IFRAME>

<LINK rel=stylesheet type=text/css href="http://www.maxxis.com/Repository/Files/style.css">
<div align="center" id="tech_stamps" class="div">
<SPAN id=rollover1><A href="#">
<IMG border=0 alt="" src="http://www.maxxis.com/Repository/Images/exo_stamp.jpg" style="z-index:100;">
<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/Repository/Images/EXO_tech_info.jpg">
</SPAN></A></SPAN>

<SPAN id=rollover2><A href="#">
<IMG border=0 alt="" src="http://www.maxxis.com/Repository/Images/3C_stamp.jpg" style="z-index:100;">
<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/Repository/Images/3C-MTN_tech_info.jpg">
</SPAN></A></SPAN>

<SPAN id=rollover3><A href="#">
<IMG border=0 alt="" src="http://www.maxxis.com/Repository/Images/exc_stamp.jpg" style="z-index:100;">
<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/Repository/Images/EXC_tech_info.jpg">
</SPAN></A></SPAN></div>

</DIV>


</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum