I want to Show Videos inside an Image of theater curtains, image should float ABOVE the videos. Cant work out why it wont work, I have.
<style type="text/css">
#tablist{
padding: 3px 0;
margin:0;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
margin: 0;
width:130px;
}
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 0px;
border-bottom: none;
display:block;
}
#tablist li a:link, #tablist li a:visited{
color:transparent;
}
#tablist li a.current{
background: transparent;
}
[B]#tabcontentcontainer{ position:absolute;top:50;
left:150;
width: 640px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 0px;
margin: 0 auto;
z-index:-1;
}
#imgnorm
{ z-index: 100;
position:absolute;top:50;
left:150;
}[/B]
.tabcontent{
display:none;
}
a.tab {
background:none;
}
a.tab:active{
background:none;
}
</style>
<script type="text/javascript">
/***********************************************
* Tab Content script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]
////////Stop editting////////////////
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
var previoustab=""
function expandcontent(cid, aobject){
var links=document.getElementsByTagName("a");
for(i=0;i<links.length;i++) {
if(links[i].className=="tab") {
links[i].style.backgroundColor="transparent";
}
}
aobject.style.backgroundColor="transparent";
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
//for (i=0; i<tabobjlinks.length; i++)
//tabobjlinks[i].style.backgroundColor=initTabcolor
//var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
//aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}
function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>
[B]<div id="imgnorm">
<img src="http://i56.tinypic.com/2zow8jd.jpg"/>
<div id="tabcontentcontainer" position:relative; align="center">[/B]
<div id="sc1" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/F0nkBNicJZM" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc2" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/MS80AZK2Ozc" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc3" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/pveeDx-Dncw" frameborder="0" allowfullscreen></iframe></div>
<div id="sc4" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/rysZc5O6LBA" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc5" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/8EDZCq3gqh4" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc6" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/7zr_pIVp20w" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc7" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/JPkja-hgIVY" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc8" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/x4O7KYmC-1k" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc9" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/qRkWJyGwMeY" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc10" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/IveamwRgVUY" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc11" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/gHdo3LAyr0E" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc12" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/r8-LuxbhgQQ" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc13" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/42_1C2uh1QE" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc14" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/6hwWmxb7bP4" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc15" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/LLD4rSzPBGk" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc16" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/csJoZ1a07U0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc17" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/TCMNs2I7pOw" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc18" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/wLgbFVuGisw" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc19" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/prYAMZ4Qt-g" frameborder="0" allowfullscreen></iframe>
</div>
<div id="sc20" class="tabcontent">
<iframe title="YouTube video player" width="640" height="320" src="http://www.youtube.com/embed/7FW1rtv15_A" frameborder="0" allowfullscreen></iframe>
</div>
</div>[B]</div>
[/B]
<p align="center">
<span id="tablist">
<a class="tab" href="#" onclick="return expandcontent('sc1', this)">1</a>
<a class="tab" href="#" onclick="return expandcontent('sc2', this)">2</a>
<a class="tab" href="#" onclick="return expandcontent('sc3', this)">3</a>
<a class="tab" href="#" onclick="return expandcontent('sc4', this)">4</a>
<a class="tab" href="#" onclick="return expandcontent('sc5', this)">5</a>
<a class="tab" href="#" onclick="return expandcontent('sc6', this)">6</a>
<a class="tab" href="#" onclick="return expandcontent('sc7', this)">7</a>
<a class="tab" href="#" onclick="return expandcontent('sc8', this)">8</a>
<a class="tab" href="#" onclick="return expandcontent('sc9', this)">9</a>
<a class="tab" href="#" onclick="return expandcontent('sc10',this)">10</a>
<a class="tab" href="#" onclick="return expandcontent('sc11',this)">11</a>
<a class="tab" href="#" onclick="return expandcontent('sc12',this)">12</a>
<a class="tab" href="#" onclick="return expandcontent('sc13',this)">13</a>
<a class="tab" href="#" onclick="return expandcontent('sc14',this)">14</a>
<a class="tab" href="#" onclick="return expandcontent('sc15',this)">15</a>
<a class="tab" href="#" onclick="return expandcontent('sc16',this)">16</a>
<a class="tab" href="#" onclick="return expandcontent('sc17',this)">17</a>
<a class="tab" href="#" onclick="return expandcontent('sc18',this)">18</a>
<a class="tab" href="#" onclick="return expandcontent('sc19',this)">19</a>
<a class="tab" href="#" onclick="return expandcontent('sc20',this)">20</a>
</span>
</p>