Team:Calgary/Sandbox
From 2010.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | + | <html> | |
- | |||
<head> | <head> | ||
- | |||
- | |||
- | + | <title> iGEM Information Tabs </title> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <script type="text/javascript"> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | var curr_menu = "suffield"; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | function imgHover( link ) | |
- | + | { | |
- | + | var hov = link; | |
- | + | ||
- | + | ||
- | + | switch (hov) | |
- | + | { | |
- | + | ||
- | + | case 1: | |
- | + | if ( curr_menu != "suffield" ) | |
- | + | { | |
- | + | ||
- | + | ||
- | + | img = document.getElementById('suffield'); | |
- | + | ||
- | + | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/SuffieldBlue.png'; | |
- | + | ||
- | + | ||
- | + | ||
- | + | } | |
- | + | ||
- | + | break; | |
- | + | ||
- | + | case 2: | |
- | + | if ( curr_menu != "lethbridge" ) | |
- | + | { | |
- | + | ||
+ | img = document.getElementById('lethbridge'); | ||
+ | |||
+ | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/LethbridgeBlue.png'; | ||
+ | |||
+ | } | ||
+ | |||
+ | break; | ||
+ | |||
+ | case 3: | ||
- | + | if ( curr_menu != "proteinman" ) | |
- | + | { | |
- | + | ||
+ | img = document.getElementById('proteinman'); | ||
+ | |||
+ | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ProteinManBlue.png'; | ||
+ | |||
+ | } | ||
+ | |||
+ | break; | ||
+ | |||
+ | case 4: | ||
+ | |||
+ | if ( curr_menu != "community" ) | ||
- | + | { | |
- | + | ||
- | + | img = document.getElementById('community'); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/CommunityBlue.png'; | |
- | + | ||
- | + | } | |
- | + | ||
- | + | break; | |
- | + | ||
- | + | ||
- | + | ||
- | + | case 5: | |
- | + | ||
- | + | if ( curr_menu != "agem" ) | |
- | + | ||
- | + | { | |
+ | |||
+ | img = document.getElementById('agem'); | ||
- | + | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/aGEMBlue.png'; | |
- | + | ||
- | + | } | |
- | + | ||
- | + | break; | |
- | + | ||
- | + | default: | |
- | + | ||
- | + | break; | |
- | + | ||
+ | } | ||
+ | |||
+ | } | ||
- | + | ||
- | + | ||
- | + | ||
- | + | function imgOff( link ) | |
- | + | { | |
- | + | ||
+ | var hov = link; | ||
- | + | switch (hov) | |
- | + | ||
- | + | ||
- | + | { | |
- | + | ||
- | + | ||
- | + | ||
- | + | case 1: | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | if (curr_menu == "suffield") | |
- | + | ||
- | + | { | |
- | + | ||
- | + | img = document.getElementById('suffield') | |
- | + | ||
- | + | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/SuffieldWhite.png'; | |
- | + | ||
- | } | + | } |
+ | |||
+ | else | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('suffield'); | ||
+ | |||
+ | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/SuffieldGrey.png'; | ||
+ | |||
+ | } | ||
+ | |||
+ | break; | ||
+ | |||
+ | case 2: | ||
+ | |||
+ | if (curr_menu == "lethbridge") | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('lethbridge') | ||
+ | |||
+ | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/LethbridgeWhite.png'; | ||
+ | |||
+ | } | ||
+ | |||
+ | else | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('lethbridge'); | ||
+ | |||
+ | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/LethbridgeGrey.png'; | ||
+ | |||
+ | } | ||
+ | |||
+ | break; | ||
+ | |||
+ | case 3: | ||
+ | |||
+ | if (curr_menu == "proteinman") | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('proteinman') | ||
+ | |||
+ | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ProteinManWhite.png'; | ||
+ | |||
+ | } | ||
+ | |||
+ | else | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('proteinman'); | ||
+ | |||
+ | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ProteinManGrey.png'; | ||
+ | |||
+ | } | ||
+ | |||
+ | break; | ||
+ | |||
+ | case 4: | ||
+ | |||
+ | if (curr_menu == "community") | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('community') | ||
+ | |||
+ | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/CommunityWhite.png'; | ||
+ | |||
+ | } | ||
+ | |||
+ | else | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('community'); | ||
+ | |||
+ | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/CommunityGrey.png'; | ||
+ | |||
+ | } | ||
+ | |||
+ | break; | ||
+ | |||
+ | case 5: | ||
+ | |||
+ | if (curr_menu == "agem") | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('agem') | ||
+ | |||
+ | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/aGEMWhite.png'; | ||
+ | |||
+ | } | ||
- | + | else | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | { | |
- | + | ||
- | + | img = document.getElementById('agem'); | |
- | + | ||
- | + | img.src = 'http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/aGEMGrey.png'; | |
+ | |||
+ | } | ||
+ | |||
+ | break; | ||
+ | |||
+ | default: | ||
- | + | break; | |
- | + | ||
- | + | } | |
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | function changeTab( tab ) | |
- | + | { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | + | // update tab | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | updateDisplay(); | ||
+ | |||
+ | textblock = document.getElementById(tab); | ||
+ | |||
+ | textblock.style.display = "block"; | ||
+ | |||
+ | |||
+ | // change previous menu image to background image | ||
+ | |||
+ | prev_selection = curr_menu; | ||
+ | |||
+ | if (prev_selection == "suffield") | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('suffield'); | ||
+ | |||
+ | img.src = "http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/SuffieldGrey.png"; | ||
+ | |||
+ | } | ||
+ | |||
+ | else if (prev_selection == "lethbridge") | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('lethbridge'); | ||
+ | |||
+ | img.src = "http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/LethbridgeGrey.png"; | ||
+ | |||
+ | } | ||
+ | |||
+ | else if (prev_selection == "proteinman") | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('proteinman'); | ||
+ | |||
+ | img.src = "http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ProteinManGrey.png"; | ||
+ | |||
+ | } | ||
+ | |||
+ | else if (prev_selection == "community") | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('community'); | ||
+ | |||
+ | img.src = "http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/CommunityGrey.png"; | ||
+ | |||
+ | } | ||
+ | |||
+ | else if (prev_selection == "agem") | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('agem'); | ||
+ | |||
+ | img.src = "http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/aGEMGrey.png"; | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | // update menu link | ||
+ | |||
+ | if ((tab == 0) && (curr_menu != "suffield")) | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('suffield'); | ||
+ | |||
+ | img.src = "http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/SuffieldWhite.png"; | ||
+ | |||
+ | curr_menu = "suffield"; | ||
+ | |||
+ | } | ||
+ | |||
+ | else if ( (tab == 1) && (curr_menu != "lethbridge")) | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('lethbridge'); | ||
+ | |||
+ | img.src = "http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/LethbridgeWhite.png"; | ||
+ | |||
+ | curr_menu = "lethbridge"; | ||
+ | |||
+ | } | ||
+ | |||
+ | else if ( (tab == 2) && (curr_menu != "proteinman")) | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('proteinman'); | ||
+ | |||
+ | img.src = "http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ProteinManWhite.png"; | ||
+ | |||
+ | curr_menu = "proteinman"; | ||
+ | |||
+ | } | ||
+ | |||
+ | else if ( (tab == 3) && (curr_menu != "community")) | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('community'); | ||
+ | |||
+ | img.src = "http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/CommunityWhite.png"; | ||
+ | |||
+ | curr_menu = "community"; | ||
+ | |||
+ | } | ||
+ | |||
+ | else if ( (tab == 4) && (curr_menu != "agem")) | ||
+ | |||
+ | { | ||
+ | |||
+ | img = document.getElementById('agem'); | ||
+ | |||
+ | img.src = "http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/aGEMWhite.png"; | ||
+ | |||
+ | curr_menu = "agem"; | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | function updateDisplay() | ||
+ | { | ||
+ | |||
+ | for (i = 0; i<5; i++) | ||
+ | |||
+ | { | ||
+ | |||
+ | textBlock = document.getElementById(i); | ||
+ | |||
+ | textBlock.style.display = "none"; | ||
+ | |||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | <style> | ||
+ | |||
+ | </style> | ||
- | |||
</head> | </head> | ||
+ | |||
<body> | <body> | ||
- | |||
- | |||
- | |||
- | < | + | <!-- text division --> |
- | + | ||
- | <div | + | <div style="margin-left:auto; margin-right:auto; background:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Background.png'); width:556px; height:330px; padding-top:15px; "> |
- | + | ||
- | + | <div id="0" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:block "> | |
- | + | ||
- | + | ||
+ | <div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;"> | ||
+ | |||
+ | <img id="boximage1" src="http://www.army.forces.gc.ca/cfb_suffield/Images/CFB_Suffield1.gif"></img> | ||
+ | |||
+ | </div> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | <div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;"> | ||
+ | |||
+ | <p style="padding-left:10px;">On July 14th, 2010, iGEM Calgary visited the Defence Research and Development Canada (DRDC) facility in Suffield, Alberta.</p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | <div id="1" style="background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none "> | ||
+ | |||
+ | <div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;"> | ||
+ | |||
+ | <img id="boximage2" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ImageTBA.png"></img> | ||
+ | </div> | ||
- | + | ||
+ | <div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;"> | ||
+ | |||
+ | <p style="padding-left:10px;"> I'm generic information about Lethbridge! </p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
- | + | <div id="2" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none "> | |
- | + | ||
- | + | <div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;"> | |
- | + | ||
+ | <img id="boximage3" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ImageTBA.png"></img> | ||
+ | |||
+ | </div> | ||
- | + | ||
+ | <div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;"> | ||
+ | <p style="padding-left:10px;"> I'm like burning man but better! </p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <div id="3" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none "> | |
+ | |||
+ | <div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;"> | ||
+ | |||
+ | <img id="boximage4" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ImageTBA.png"></img> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;"> | ||
+ | |||
+ | <p style="padding-left:10px;"> I'm a fan of cupcakes! </p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div id="4" style=" background-color:white; width:510px; height:310px; margin-left:auto; margin-right:auto; display:none "> | ||
+ | |||
+ | <div style="height:239px; border:1px solid #CCCCCC; margin-bottom:5px;"> | ||
+ | |||
+ | <img id="boximage5" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ImageTBA.png"></img> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <div style="height:75px; width:527px; background-image:url('http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/Greyportion.png'); float:left; margin-left:-9px;"> | ||
+ | |||
+ | <p style="padding-left:10px;"> I'm from Alberta and I'm awesome! </p> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | </div> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
</div> | </div> | ||
- | |||
- | |||
- | + | <!-- menu bar --> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | <div style="width:524px; height:35px; margin-right:auto; margin-left:auto; margin-top:-10px; padding-left:10px; "> | ||
+ | |||
+ | |||
+ | <div onmouseover="imgHover(1);" onmouseout="imgOff(1);" onclick="changeTab(0);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="suffield" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/SuffieldWhite.png" title="suffield" /> </div> | ||
+ | |||
+ | |||
+ | <div onmouseover="imgHover(2);" onmouseout="imgOff(2);" onclick="changeTab(1);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="lethbridge" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/LethbridgeGrey.png" title="lethbridge" /> </div> | ||
+ | |||
+ | |||
+ | <div onmouseover="imgHover(3);" onmouseout="imgOff(3);" onclick="changeTab(2);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="proteinman" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/ProteinManGrey.png" title="protein man" /> </div> | ||
+ | |||
+ | |||
+ | <div onmouseover="imgHover(4);" onmouseout="imgOff(4);" onclick="changeTab(3);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="community" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/CommunityGrey.png" title="bake sale" /> </div> | ||
+ | |||
+ | |||
+ | <div onmouseover="imgHover(5);" onmouseout="imgOff(5);" onclick="changeTab(4);" style="margin-left:2.4; margin-right:2.4; float:left; width:98px; height:35px; "> <img id="agem" src="http://i872.photobucket.com/albums/ab287/iGEMCalgary_2010/aGEMGrey.png" title="aGEM" /> </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
</body> | </body> | ||
+ | |||
</html> | </html> |
Revision as of 18:34, 31 August 2010
On July 14th, 2010, iGEM Calgary visited the Defence Research and Development Canada (DRDC) facility in Suffield, Alberta.