Team:TU Munich/model/modeloverview

From 2011.igem.org

(Difference between revisions)
 
(36 intermediate revisions not shown)
Line 21: Line 21:
</div>
</div>
<div id="social" class="content">
<div id="social" class="content">
-
<table border="0">
 
-
<td class="tdcontent" style="height:714px;">
 
<div class="subcontent ui-corner-all" style="top:0px;height:'100%';">
<div class="subcontent ui-corner-all" style="top:0px;height:'100%';">
 +
        <h1>Model Overview</h1>
         <div style="position:relative;top:0px;z-index:1;">
         <div style="position:relative;top:0px;z-index:1;">
         <script>
         <script>
         function ShowPic(sImage){
         function ShowPic(sImage){
-
                $('.bacnav').stop();
+
                 $('#modelpic').stop().animate({opacity:0}, 400, function() {  
-
                $('.tdcontent').stop();
+
-
                $('.tdbacnav').stop();
+
-
                 $('#modelpic').stop().animate({opacity:0}, 5000, function() {  
+
                       document.modelpic.src= sImage;
                       document.modelpic.src= sImage;
-
                       $('#modelpic').animate({opacity:1}, 5000);
+
                       $('#modelpic').animate({opacity:1}, 400);
                     });
                     });
         }
         }
         function ShowPicR(sImage){
         function ShowPicR(sImage){
-
                $('.bacnav').css({opacity: 1})
+
                 $('#modelpic').stop().animate({opacity:0}, 400, function() {
-
                 $('#modelpic').stop().animate({opacity:0}, 2500);
+
-
                $('.bacnav').stop().fadeOut(2500, function(){
+
-
                //$('.tdbacnav').css({width:'0%'});
+
-
                $('.tdcontent').stop().animate({width:'781px',height:'450px'}, 5000, function() {
+
                       document.modelpic.src = sImage;
                       document.modelpic.src = sImage;
-
                       $('#modelpic').animate({opacity:1}, 2500);
+
                       $('#modelpic').animate({opacity:1}, 400);
 +
                      $('#modelpic').onmouseout(function(){
 +
                            this.src="https://static.igem.org/mediawiki/2011/2/2d/TumCompletmodel.png"
 +
                            this.attr( { usemap: "#model" } );
 +
                      });
                   });
                   });
-
                });
 
         }
         }
         function ShowPicRI(sImage){
         function ShowPicRI(sImage){
-
                  $('.tdcontent').stop().animate({width: '70%', height:'714px'}, 2500);
+
                   $('#modelpic').stop().animate({opacity:0}, 400, function() {
-
                   $('#modelpic').stop().animate({opacity:0}, 5000, function() {
+
                       document.modelpic.src = sImage;
                       document.modelpic.src = sImage;
-
                       $('#modelpic').animate({opacity:1}, 2500);
+
                       $('#modelpic').animate({opacity:1}, 400);
-
                      //$('.tdbacnav').css({width: '30%'});
+
-
                      $('.bacnav').fadeIn(5000);
+
-
                      $('.bacnav').css({opacity: 1})     
+
                     });
                     });
         }
         }
         </script>
         </script>
         <map name="model">
         <map name="model">
-
         <area onmouseout="ShowPicRI('https://static.igem.org/mediawiki/2011/2/2d/TumCompletmodel.png')" onmouseover="ShowPicR('https://static.igem.org/mediawiki/2011/5/52/TumRedlight.png')" href="https://2011.igem.org/Team:TU_Munich/project/modeling/redlight" alt="Redlight" shape="rect" coords="20, 20, 545, 277">
+
         <area onmouseout="" onmouseover="" href="https://2011.igem.org/Team:TU_Munich/model/redlight" shape="rect" coords="20, 20, 850, 440">
-
         <area onmouseout="ShowPic('https://static.igem.org/mediawiki/2011/2/2d/TumCompletmodel.png')" onmouseover="ShowPic('https://static.igem.org/mediawiki/2011/a/a6/TumAndgate.png')" href="https://2011.igem.org/Team:TU_Munich/project/modeling/andgate" alt="ANDGate" shape="rect" coords="20, 317, 275, 625">
+
         <area onmouseout="" onmouseover="" href="https://2011.igem.org/Team:TU_Munich/model/andgate" shape="rect" coords="20, 480, 430, 970">
-
         <area onmouseout="ShowPic('https://static.igem.org/mediawiki/2011/2/2d/TumCompletmodel.png')" onmouseover="ShowPic('https://static.igem.org/mediawiki/2011/9/98/TumBluelight.png')" href="https://2011.igem.org/Team:TU_Munich/project/modeling/bluelight" alt="Bluelight" shape="rect" coords="315, 297, 545, 625">
+
         <area onmouseout="" onmouseover="" href="https://2011.igem.org/Team:TU_Munich/model/bluelight" shape="rect" coords="480, 480, 850, 970">
 +
        </map>
 +
        <map name="none">
         </map>
         </map>
         <img id="modelpic" name="modelpic" src="https://static.igem.org/mediawiki/2011/2/2d/TumCompletmodel.png" width="100%" usemap="#model">
         <img id="modelpic" name="modelpic" src="https://static.igem.org/mediawiki/2011/2/2d/TumCompletmodel.png" width="100%" usemap="#model">
         </div>
         </div>
         <div style="position:relative;bottom:0px;z-index:0;">
         <div style="position:relative;bottom:0px;z-index:0;">
-
         <p> Mouseover to enlarge and click to see details for the different parts of the model.</p>
+
         <p> Click on the different parts of the model to see details.</p>
         </div>
         </div>
-
</td>
+
</div>
-
<td class="tdbacnav">
+
-
<ul class="bacnav">
+
-
        <a href="https://2011.igem.org/Team:TU_Munich/project/modeling/combined"><li>Combined Model</li></a>
+
-
        <a href="https://2011.igem.org/Team:TU_Munich/project/modeling/guide"><li>Modeling Guide</li></a>
+
-
</ul>
+
-
</td>
+
-
</table>
+
</div>
</div>

Latest revision as of 16:17, 24 October 2011

Model Overview

Click on the different parts of the model to see details.