Team:TU Munich/model/modeloverview

From 2011.igem.org

(Difference between revisions)
 
(19 intermediate revisions not shown)
Line 21: Line 21:
</div>
</div>
<div id="social" class="content">
<div id="social" class="content">
-
<div class="tdcontent" style="height:800px;">
 
<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();
 
-
                $('.tdcontent').stop();
 
-
                $('.tdbacnav').stop();
 
-
                $('.bacnav').css({opacity: 1});
 
-
                $('.tdcontent').css({width:'565px',height:'714px'});
 
-
                $('.tdbacnav').css({width:'350px'});
 
                 $('#modelpic').stop().animate({opacity:0}, 400, function() {  
                 $('#modelpic').stop().animate({opacity:0}, 400, function() {  
                       document.modelpic.src= sImage;
                       document.modelpic.src= sImage;
Line 38: Line 32:
         }
         }
         function ShowPicR(sImage){
         function ShowPicR(sImage){
-
                $('.bacnav').css({opacity: 1})
 
-
                $('.tdcontent').stop().animate({width:'900px',height:'600px'}, 800);
 
-
                $('.bacnav').stop().fadeOut(500);
 
-
                $('.tdbacnav').stop().animate({width:'0%'},800);
 
                 $('#modelpic').stop().animate({opacity:0}, 400, function() {
                 $('#modelpic').stop().animate({opacity:0}, 400, function() {
                       document.modelpic.src = sImage;
                       document.modelpic.src = sImage;
                       $('#modelpic').animate({opacity:1}, 400);
                       $('#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:'565px',height:'800px'}, 800);
 
-
                  $('.tdbacnav').stop().animate({width:'350px'},800);
 
-
                  $('.bacnav').fadeIn(500);
 
                   $('#modelpic').stop().animate({opacity:0}, 400, function() {
                   $('#modelpic').stop().animate({opacity:0}, 400, function() {
                       document.modelpic.src = sImage;
                       document.modelpic.src = sImage;
                       $('#modelpic').animate({opacity:1}, 400);
                       $('#modelpic').animate({opacity:1}, 400);
-
                      $('.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>
-
</div>
 
-
</div>
 
-
<div class="tdbacnav" style="height:714px;">
 
-
<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>
 
</div>
</div>
</div>
</div>

Latest revision as of 16:17, 24 October 2011

Model Overview

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