Team:Peking/miningflow

From 2013.igem.org

(Difference between revisions)
 
(10 intermediate revisions not shown)
Line 7: Line 7:
#FlowStep3{position:absolute; top:0px; left:0px; width:800px; display:none; z-index:100;}
#FlowStep3{position:absolute; top:0px; left:0px; width:800px; display:none; z-index:100;}
#FlowStep4{position:absolute; top:0px; left:0px; width:800px; display:none; z-index:100;}
#FlowStep4{position:absolute; top:0px; left:0px; width:800px; display:none; z-index:100;}
-
#Flowcover0{position:absolute; top:0px; left:0px; width:225px; height:65px; background-color:#ffffff; opacity:0.5; z-index:300;}
+
#Flowcover0{position:absolute; top:0px; left:0px; width:225px; height:65px; background-color:#ffffff; opacity:0; z-index:300;}
-
#Flowcover1{position:absolute; top:65px; left:0px; width:225px; height:155px; background-color:#ffffff; opacity:0.5;z-index:300;}
+
#Flowcover1{position:absolute; top:65px; left:0px; width:225px; height:115px; background-color:#ffffff; opacity:0.8;z-index:300;}
-
#Flowcover2{position:absolute; top:220px; left:0px; width:225px; height:115px; background-color:#ffffff; opacity:0.5;z-index:300;}
+
#Flowcover2{position:absolute; top:180px; left:0px; width:225px; height:110px; background-color:#ffffff; opacity:0.8;z-index:300;}
-
#Flowcover3{position:absolute; top:335px; left:0px; width:225px; height:105px; background-color:#ffffff; opacity:0.5;z-index:300;}
+
#Flowcover3{position:absolute; top:290px; left:0px; width:225px; height:105px; background-color:#ffffff; opacity:0.8;z-index:300;}
-
#Flowcover4{position:absolute; top:440px; left:0px; width:225px; height:65px; background-color:#ffffff; opacity:0.5;z-index:300;}
+
#Flowcover4{position:absolute; top:400px; left:0px; width:225px; height:115px; background-color:#ffffff; opacity:0.8;z-index:300;}
</style>
</style>
Line 27: Line 27:
</div>
</div>
<script type="text/javascript">
<script type="text/javascript">
-
document.getElementById("Flowcover0").onmouseover=function()//hover
+
document.getElementById("Flowcover0").onmouseover=function()//hover 0
{
{
     document.getElementById("Flowcover0").style.opacity="0";
     document.getElementById("Flowcover0").style.opacity="0";
Line 35: Line 35:
     document.getElementById("Flowcover4").style.opacity="0.8";
     document.getElementById("Flowcover4").style.opacity="0.8";
}
}
-
document.getElementById("Flowcover0").onclick=function()
+
document.getElementById("Flowcover1").onmouseover=function()//hover 1
 +
{
 +
    document.getElementById("Flowcover0").style.opacity="0.8";
 +
    document.getElementById("Flowcover1").style.opacity="0";
 +
    document.getElementById("Flowcover2").style.opacity="0.8";
 +
    document.getElementById("Flowcover3").style.opacity="0.8";
 +
    document.getElementById("Flowcover4").style.opacity="0.8";
 +
}
 +
document.getElementById("Flowcover2").onmouseover=function()//hover 2
 +
{
 +
    document.getElementById("Flowcover0").style.opacity="0.8";
 +
    document.getElementById("Flowcover1").style.opacity="0.8";
 +
    document.getElementById("Flowcover2").style.opacity="0";
 +
    document.getElementById("Flowcover3").style.opacity="0.8";
 +
    document.getElementById("Flowcover4").style.opacity="0.8";
 +
}
 +
document.getElementById("Flowcover3").onmouseover=function()//hover 3
 +
{
 +
    document.getElementById("Flowcover0").style.opacity="0.8";
 +
    document.getElementById("Flowcover1").style.opacity="0.8";
 +
    document.getElementById("Flowcover2").style.opacity="0.8";
 +
    document.getElementById("Flowcover3").style.opacity="0";
 +
    document.getElementById("Flowcover4").style.opacity="0.8";
 +
}
 +
document.getElementById("Flowcover4").onmouseover=function()//hover 4
 +
{
 +
    document.getElementById("Flowcover0").style.opacity="0.8";
 +
    document.getElementById("Flowcover1").style.opacity="0.8";
 +
    document.getElementById("Flowcover2").style.opacity="0.8";
 +
    document.getElementById("Flowcover3").style.opacity="0.8";
 +
    document.getElementById("Flowcover4").style.opacity="0";
 +
}
 +
document.getElementById("Flowcover0").onclick=function() //click 0
{
{
     document.getElementById("Flowcover0").style.opacity="0";
     document.getElementById("Flowcover0").style.opacity="0";
Line 42: Line 74:
     document.getElementById("Flowcover3").style.opacity="0.8";
     document.getElementById("Flowcover3").style.opacity="0.8";
     document.getElementById("Flowcover4").style.opacity="0.8";
     document.getElementById("Flowcover4").style.opacity="0.8";
 +
   
 +
    document.getElementById("FlowStep0").style.display="block";
 +
    document.getElementById("FlowStep1").style.display="none";
 +
    document.getElementById("FlowStep2").style.display="none";
 +
    document.getElementById("FlowStep3").style.display="none";
 +
    document.getElementById("FlowStep4").style.display="none";
}
}
 +
document.getElementById("Flowcover1").onclick=function()  //click 1
 +
{
 +
    document.getElementById("Flowcover0").style.opacity="0.8";
 +
    document.getElementById("Flowcover1").style.opacity="0";
 +
    document.getElementById("Flowcover2").style.opacity="0.8";
 +
    document.getElementById("Flowcover3").style.opacity="0.8";
 +
    document.getElementById("Flowcover4").style.opacity="0.8";
 +
   
 +
    document.getElementById("FlowStep0").style.display="none";
 +
    document.getElementById("FlowStep1").style.display="block";
 +
    document.getElementById("FlowStep2").style.display="none";
 +
    document.getElementById("FlowStep3").style.display="none";
 +
    document.getElementById("FlowStep4").style.display="none";
 +
 +
}
 +
document.getElementById("Flowcover2").onclick=function()  //click 2
 +
{
 +
    document.getElementById("Flowcover0").style.opacity="0.8";
 +
    document.getElementById("Flowcover1").style.opacity="0.8";
 +
    document.getElementById("Flowcover2").style.opacity="0";
 +
    document.getElementById("Flowcover3").style.opacity="0.8";
 +
    document.getElementById("Flowcover4").style.opacity="0.8";
 +
   
 +
    document.getElementById("FlowStep0").style.display="none";
 +
    document.getElementById("FlowStep1").style.display="none";
 +
    document.getElementById("FlowStep2").style.display="block";
 +
    document.getElementById("FlowStep3").style.display="none";
 +
    document.getElementById("FlowStep4").style.display="none";
 +
 +
}
 +
document.getElementById("Flowcover3").onclick=function()  //click 3
 +
{
 +
    document.getElementById("Flowcover0").style.opacity="0.8";
 +
    document.getElementById("Flowcover1").style.opacity="0.8";
 +
    document.getElementById("Flowcover2").style.opacity="0.8";
 +
    document.getElementById("Flowcover3").style.opacity="0";
 +
    document.getElementById("Flowcover4").style.opacity="0.8";
 +
   
 +
    document.getElementById("FlowStep0").style.display="none";
 +
    document.getElementById("FlowStep1").style.display="none";
 +
    document.getElementById("FlowStep2").style.display="none";
 +
    document.getElementById("FlowStep3").style.display="block";
 +
    document.getElementById("FlowStep4").style.display="none";
 +
 +
}
 +
document.getElementById("Flowcover4").onclick=function()  //click 4
 +
{
 +
    document.getElementById("Flowcover0").style.opacity="0.8";
 +
    document.getElementById("Flowcover1").style.opacity="0.8";
 +
    document.getElementById("Flowcover2").style.opacity="0.8";
 +
    document.getElementById("Flowcover3").style.opacity="0.8";
 +
    document.getElementById("Flowcover4").style.opacity="0";
 +
   
 +
    document.getElementById("FlowStep0").style.display="none";
 +
    document.getElementById("FlowStep1").style.display="none";
 +
    document.getElementById("FlowStep2").style.display="none";
 +
    document.getElementById("FlowStep3").style.display="none";
 +
    document.getElementById("FlowStep4").style.display="block";
 +
 +
}
 +
</script>
</script>
</html>
</html>

Latest revision as of 19:28, 26 September 2013

Retrieved from "http://2013.igem.org/Team:Peking/miningflow"