Team:Peking/miningflow

From 2013.igem.org

(Difference between revisions)
 
(33 intermediate revisions not shown)
Line 2: Line 2:
<style>
<style>
#MiningFlowchart{position:absolute; top:0px; left:0px; width:800px; height:800px; background-color:white;}
#MiningFlowchart{position:absolute; top:0px; left:0px; width:800px; height:800px; background-color:white;}
-
#FlowStep0{position:absolute; top:0px; left:0px; width:800px;}
+
#FlowStep0{position:absolute; top:0px; left:0px; width:800px; z-index:100;}
-
#FlowStep1{position:absolute; top:0px; left:0px; width:800px; display:none;}
+
#FlowStep1{position:absolute; top:0px; left:0px; width:800px; display:none; z-index:100;}
-
#FlowStep2{position:absolute; top:0px; left:0px; width:800px; display:none;}
+
#FlowStep2{position:absolute; top:0px; left:0px; width:800px; display:none; z-index:100;}
-
#FlowStep3{position:absolute; top:0px; left:0px; width:800px; display:none;}
+
#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;}
+
#FlowStep4{position:absolute; top:0px; left:0px; width:800px; display:none; z-index:100;}
-
#Flowcover0{position:absolute; top:0px; left:0px; width:230px; height:65px; background-color:yellow;}
+
#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:115px; background-color:#ffffff; opacity:0.8;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:290px; left:0px; width:225px; height:105px; background-color:#ffffff; opacity:0.8;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>
<div id="MiningFlowchart">
<div id="MiningFlowchart">
Line 21: Line 26:
     <div id="Flowcover4"></div>
     <div id="Flowcover4"></div>
</div>
</div>
 +
<script type="text/javascript">
 +
document.getElementById("Flowcover0").onmouseover=function()//hover 0
 +
{
 +
    document.getElementById("Flowcover0").style.opacity="0";
 +
    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.8";
 +
}
 +
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("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.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>
</html>
</html>

Latest revision as of 19:28, 26 September 2013

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