dbo Posted November 28, 2007 Share Posted November 28, 2007 I've got a small youtube embed thing on a page. The idea is to have this act as a thumbnail... so I'd like to put a div over top of it and use it as a link to a page of my own that has the fullsize youtube embed. Problem is I can't get the div to go over top of the flash. Here is my code. <div style="position: relative; z-index: 2;"> <object width="120" height="90"> <param name="wmode" value="transparent"></param> <param name="movie" value="http://www.youtube.com/v/2yAxR7SmtIY"></param><embed src="http://www.youtube.com/v/2yAxR7SmtIY" type="application/x-shockwave-flash" width="120" height="90"></embed> </object> <div style="position: absolute; z-index: 3; width: 130px; height: 110px; background-color: yellow;"></div> </div> Any ideas on how I can get this thing to show up on top of the flash player? Quote Link to comment Share on other sites More sharing options...
MishieMoo Posted November 28, 2007 Share Posted November 28, 2007 Okay, first a css basic: z-index: this works like a stack of numbered pages, where 1 is on top and 100 on the bottom. If you want something to show up on top of another layer, the number has to be lower. Second: in order for this box to pop up, you should use some basic javascript as well as the css. The first thing I reccomend is taking away all the css in those div's and putting them in the header I took the liberty of changing that out for you, as that's the only way to make this work xD Here are the codes, which I'll explain a bit about after. <head> <style type="text/css"> #video {position: relative; z-index: 5;} #pagelink {position: absolute; z-index: 3; width: 120px; height: 90px; background-color: yellow; display none}</style></head> <div class="video"> <object width="120" height="90"> <param name="wmode" value="transparent"></param> <param name="movie" value="http://www.youtube.com/v/2yAxR7SmtIY"></param><embed src="http://www.youtube.com/v/2yAxR7SmtIY" type="application/x-shockwave-flash" width="120" height="90"></embed> </object> <div class="pagelink" onMouseOver="document.all.pagelink.style.display = 'block'" onMouseOut="document.all.pagelink.style.display = 'none'"></div> </div> You can remove the head tags from the first one, I just wanted to make sure you knew where they go + What I did: 1. I made the top div hidden when the page loads, with the css property display:none. 2. I added simple javascript OnMouseOver and OnMouseOut commands to change the style attribute of the div on mouse over and mouse out. That changes it so that the div will only display if the mouse is over the video. 3. I cleaned up the css placement. It's always nicer to have it at the top of the page, but that's personal preference xD I'm not sure of the positioning right now, but if you need more help with that feel free to ask xD Quote Link to comment Share on other sites More sharing options...
dbo Posted November 28, 2007 Author Share Posted November 28, 2007 Thanks for the response, I'll try this out soon. I thought that I did use z-index correctly... div 1 had it set to 2 div 2 had it set to 3... 3 should be in front of 1. I don't need any javascript, nothing needs to popout at all. Quote Link to comment Share on other sites More sharing options...
dbo Posted November 28, 2007 Author Share Posted November 28, 2007 Why would it -have- to go in the header section instead of being inline? Quote Link to comment Share on other sites More sharing options...
dbo Posted November 28, 2007 Author Share Posted November 28, 2007 Here is the exact code I just tried and what you suggested did nothing (at least in this browser). All I've got is a thumbnail that is still clickable. <html> <head> <style type="text/css"> #video {position: relative; z-index: 5;} #pagelink {position: absolute; z-index: 3; width: 120px; height: 90px; background-color: yellow; display: none; } </style> </head> <body> <div class="video"> <object width="120" height="90"> <param name="wmode" value="transparent"></param> <param name="movie" value="http://www.youtube.com/v/2yAxR7SmtIY"></param><embed src="http://www.youtube.com/v/2yAxR7SmtIY" type="application/x-shockwave-flash" width="120" height="90"></embed> </object> <div class="pagelink" onMouseOver="document.all.pagelink.style.display = 'block'" onMouseOut="document.all.pagelink.style.display = 'none'"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted November 28, 2007 Share Posted November 28, 2007 add a transparent image over your flash. there are a lot of flash advertisers out there who are doing that now; I know because I have done it myself several times in the past. Quote Link to comment Share on other sites More sharing options...
dbo Posted November 28, 2007 Author Share Posted November 28, 2007 The plan was a transparent div... which would be the exact same thing. I know what I need to do, I just can't pull it off... can you provide a code snippet? Quote Link to comment Share on other sites More sharing options...
MishieMoo Posted November 28, 2007 Share Posted November 28, 2007 Sorry. I didn't check it...it was like 2am. I got it to work, though. And you should not display the css for the appearing box inline, because it gets altered by the script. If you did that, the browser might get confused and then you'd have a problem. You can take out the background-color attribute, though. It's just to show you that it works. <html> <head> <style type="text/css"> #video {position: absolute; top:0px; left:0px; z-index: 1; height:90px; width:120px} #pagelink {position: absolute; top:0px; left:0px; z-index: 5; width: 120px; height: 90px; background-color:#0099ff; visibility:hidden} </style> </head> <body> <div> <div id="video" onMouseOver="document.all.pagelink.style.visibility='visible'"> <object width="120" height="90"> <param name="wmode" value="transparent"></param> <param name="movie" value="http://www.youtube.com/v/2yAxR7SmtIY"></param><embed src="http://www.youtube.com/v/2yAxR7SmtIY" type="application/x-shockwave-flash" width="120" height="90"></embed> </object> </div> <div id="pagelink" onMouseOut="document.all.pagelink.style.visibility='hidden'"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
dbo Posted November 28, 2007 Author Share Posted November 28, 2007 I appreciate you helping with this, but it's still not working on Ubuntu/Firefox. What browser are you using? Quote Link to comment Share on other sites More sharing options...
obsidian Posted November 28, 2007 Share Posted November 28, 2007 Okay, first a css basic: z-index: this works like a stack of numbered pages, where 1 is on top and 100 on the bottom. If you want something to show up on top of another layer, the number has to be lower. First, this is inaccurate. Using z-indexing in CSS is "stacking" your objects. The higher numbers stack, so they are visible. The higher the number, the closer to the user. So, your higher numbers are your visible elements, not the other way. This is why negative z-indexing (such as assigning a -999 index to an invisible element) is possible. To be perfectly honest, I don't know that what you are trying to do will be successfully accomplished using markup and CSS alone. The thing is, Flash is a dynamic element, and it is rendered by a plugin (external source), not by the browser itself. It can be very challenging to cover a flash object with another element of the page and get it to work across browsers (I've tried). you may be better off using a JavaScript solution that sets your object positioning and covering the flash object once the page has fully loaded and rendered. add a transparent image over your flash. there are a lot of flash advertisers out there who are doing that now; I know because I have done it myself several times in the past. Mind posting an example of that? I have yet to see a flash banner that, when right-clicked on in all browsers, doesn't show a Macromedia Flash toolbar for options. I'm very interested in seeing this accurately accomplished. Quote Link to comment Share on other sites More sharing options...
dbo Posted November 28, 2007 Author Share Posted November 28, 2007 This is a classic problem I just don't know what the solution is. It's right along the same lines as having drop down menus go over top of flash banners. I know it can be done, just don't know how... and I'm surprised that no one in here knows either! Quote Link to comment Share on other sites More sharing options...
obsidian Posted November 28, 2007 Share Posted November 28, 2007 This is a classic problem I just don't know what the solution is. It's right along the same lines as having drop down menus go over top of flash banners. I know it can be done, just don't know how... and I'm surprised that no one in here knows either! Did you Google? http://nickcowie.com/2006/layering-flash-and-html-tutorial/ http://www.ozzu.com/ftopic25572.html http://www.robertnyman.com/2007/01/29/how-to-put-an-html-element-on-top-of-a-flash-movie/ Even with these solutions, my previous statement is true: it's not a universal fix. Hope this helps some, though. Quote Link to comment Share on other sites More sharing options...
dbo Posted November 28, 2007 Author Share Posted November 28, 2007 Yeah I've looked at a lot of articles. I'm normally pretty self sufficient and don't ask for a lot of help... but this one has me stuck. Quote Link to comment Share on other sites More sharing options...
obsidian Posted November 28, 2007 Share Posted November 28, 2007 Yeah I've looked at a lot of articles. I'm normally pretty self sufficient and don't ask for a lot of help... but this one has me stuck. Did you check out the last link I posted above? He seems to think it's a pretty good fix for the majority of browsers. Quote Link to comment Share on other sites More sharing options...
dbo Posted November 28, 2007 Author Share Posted November 28, 2007 Not just yet. I was in the middle of another coding escapade. Off to lunch and will try it when I get back. Thanks for the help! Quote Link to comment Share on other sites More sharing options...
dbo Posted December 4, 2007 Author Share Posted December 4, 2007 For anyone who was following this thread... this sorta got put on hold. I plan to spend some time with it tonight and will post my solution if I get anywhere. Quote Link to comment Share on other sites More sharing options...
dbo Posted December 5, 2007 Author Share Posted December 5, 2007 And the winner is.... http://blog.marcoos.com/2006/07/21/html-div-above-a-flash-animation-on-linux-its-possible/ Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted December 5, 2007 Share Posted December 5, 2007 there is your answer - its only possible on gecko based browsers - so don't bother until it can be done cross browser... Quote Link to comment Share on other sites More sharing options...
dbo Posted December 5, 2007 Author Share Posted December 5, 2007 It actually wasn't quite what I needed anyways. I could put stuff over the flash, but not transparencies. And while I do see your point, it's also not practical. If a client needs a particular feature out the door, you can't exactly wait for everyone else to catch up. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted December 5, 2007 Share Posted December 5, 2007 if a client is asking for something that doesn't work for everyone then they need educating in the realms of what a good website is and is not. having all the latest widgets on may make them think they are the bees knees but if only 5% of the internet can use it the rest will get frustrated and never return to the site - which may help them realize turning people off is NOT a good attribute for any site.... browser incompatability is one sure way to make a good looking site feel like it's been built by a five year old - NOT very professional. Quote Link to comment Share on other sites More sharing options...
dbo Posted December 6, 2007 Author Share Posted December 6, 2007 You're certainly welcome to hold your own opinions. I hardly think that a div floating behind a flash image instead of over top of it makes a site look like a 5 year old built it.... but whatever floats your boat buddy. Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted December 6, 2007 Share Posted December 6, 2007 if you would use a transparent image like I first suggested; you probably wouldn't be running into some many problems. Quote Link to comment Share on other sites More sharing options...
dbo Posted December 6, 2007 Author Share Posted December 6, 2007 Actually, you're wrong. Its the exact same problem. The problem is with the crappy flash support for linux as much as anything. Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted December 6, 2007 Share Posted December 6, 2007 Actually, you're wrong. Its the exact same problem. The problem is with the crappy flash support for linux as much as anything. Actually I am not wrong; if you use your CSS the right way it will work; I do it all the time. Also big advertising companies like PointRoll and DoubleClick.com do it this way all the time. But I guess you didn't know that; better check you facts before you tell people their wrong. Quote Link to comment Share on other sites More sharing options...
dbo Posted December 6, 2007 Author Share Posted December 6, 2007 If you do it all the time and you're in a forum... following a thread... that asks the question why don't you offer your solution. I've yet to see a cross browser/cross platform implementation. Since you claim all these people are doing it, why don't you offer at least a link to prove your side of things... at this point you're claim is no more valid or invalid than mine. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.