|
|
(26 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | {{Template:Team:Exeter/e-candi_banner}}
| |
| | | |
- | <html>
| |
- | <head>
| |
- | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
| |
- | <script type="text/javascript">
| |
- | $(document).ready(function(){
| |
- | var who = new Array();
| |
- | who[1] = "James Lynch";
| |
- | who[2] = "Ryan Edginton";
| |
- | who[3] = "Alex Clowsley";
| |
- | who[4] = "Alex Baldwin";
| |
- | who[5] = "Alice Bond";
| |
- | who[6] = "Liam Stubbington";
| |
- | who[7] = "Becca Phillips";
| |
- | who[8] = "Mary Beton";
| |
- | who[9] = "Freddie Dudbridge";
| |
- | who[10] = "Andy Corbett";
| |
- | var des = new Array();
| |
- | des[1] = "<br>James, description";
| |
- | des[2] = "<br>Ryan, description";
| |
- | des[3] = "<br>Alex, description";
| |
- | des[4] = "<br>Alex, description";
| |
- | des[5] = "<br>Alice, description";
| |
- | des[6] = "<br>Liam, description";
| |
- | des[7] = "<br>Becca, description";
| |
- | des[8] = "<br>Mary, description";
| |
- | des[9] = "<br>Freddie, description";
| |
- | des[10] = "<br>Andy, description";
| |
- |
| |
- | $("#face1").mouseenter(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | $("#names").append(who[1]);
| |
- | $("#descriptions").append(des[1]);
| |
- | });
| |
- |
| |
- | $("#face1").mouseleave(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | });
| |
- |
| |
- | $("#face2").mouseenter(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | $("#names").append(who[2]);
| |
- | $("#descriptions").append(des[2]);
| |
- | });
| |
- |
| |
- | $("#face2").mouseleave(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | });
| |
- |
| |
- | $("#face3").mouseenter(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | $("#names").append(who[3]);
| |
- | $("#descriptions").append(des[3]);
| |
- | });
| |
- |
| |
- | $("#face3").mouseleave(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | });
| |
- |
| |
- | $("#face4").mouseenter(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | $("#names").append(who[4]);
| |
- | $("#descriptions").append(des[4]);
| |
- | });
| |
- |
| |
- | $("#face4").mouseleave(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | });
| |
- |
| |
- | $("#face5").mouseenter(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | $("#names").append(who[5]);
| |
- | $("#descriptions").append(des[5]);
| |
- | });
| |
- |
| |
- | $("#face5").mouseleave(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | });
| |
- |
| |
- | $("#face6").mouseenter(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | $("#names").append(who[6]);
| |
- | $("#descriptions").append(des[6]);
| |
- | });
| |
- |
| |
- | $("#face6").mouseleave(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | });
| |
- |
| |
- | $("#face7").mouseenter(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | $("#names").append(who[7]);
| |
- | $("#descriptions").append(des[7]);
| |
- | });
| |
- |
| |
- | $("#face7").mouseleave(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | });
| |
- |
| |
- | $("#face8").mouseenter(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | $("#names").append(who[8]);
| |
- | $("#descriptions").append(des[8]);
| |
- | });
| |
- |
| |
- | $("#face8").mouseleave(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | });
| |
- |
| |
- | $("#face9").mouseenter(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | $("#names").append(who[9]);
| |
- | $("#descriptions").append(des[9]);
| |
- | });
| |
- |
| |
- | $("#face9").mouseleave(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | });
| |
- |
| |
- | $("#face10").mouseenter(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | $("#names").append(who[10]);
| |
- | $("#descriptions").append(des[10]);
| |
- | });
| |
- |
| |
- | $("#face10").mouseleave(function() {
| |
- | $("#names").empty();
| |
- | $("#descriptions").empty();
| |
- | });
| |
- |
| |
- | });
| |
- |
| |
- |
| |
- | </script>
| |
- | <style type="text/css">
| |
- | #wrapper {
| |
- | width:600px;
| |
- | position:relative;
| |
- | left:0px;
| |
- | z-index:0;
| |
- | }
| |
- | #exphoto {
| |
- | width:600px;
| |
- | position:relative;
| |
- | z-index:-1;}
| |
- | #box {
| |
- | width:180px;
| |
- | height:180px;
| |
- | position:absolute;
| |
- | right:10px;;
| |
- | top:85px;
| |
- | background-color:transparent;
| |
- | z-index:1;}
| |
- | #names {
| |
- | font-family:"dokChampa", cursive;
| |
- | color:#FFF;
| |
- | font-weight:bold;
| |
- | z-index:0;
| |
- | font-size:16px;
| |
- | }
| |
- |
| |
- | #descriptions {
| |
- | z-index:0;
| |
- | font-family:"Eras Light ITC", cursive;
| |
- | color:#FFF;
| |
- | font-size:16px;
| |
- | }
| |
- |
| |
- | #face1 {
| |
- | width: 32px;
| |
- | height: 32px;
| |
- | position: absolute;
| |
- | left: 43px;
| |
- | top: 131px;
| |
- | z-index: 2;
| |
- |
| |
- | }
| |
- | #face2 {
| |
- | width: 35px;
| |
- | height: 39px;
| |
- | position: absolute;
| |
- | left: 245px;
| |
- | top: 127px;
| |
- | z-index: 2;
| |
- | }
| |
- | #face3 {
| |
- | width: 32px;
| |
- | height: 45px;
| |
- | position: absolute;
| |
- | left: 109px;
| |
- | top: 129px;
| |
- | z-index: 2;
| |
- | }
| |
- | #face4 {
| |
- | width: 31px;
| |
- | height: 44px;
| |
- | position: absolute;
| |
- | left: 57px;
| |
- | top: 169px;
| |
- | z-index: 2;
| |
- | }
| |
- | #face5 {
| |
- | width: 29px;
| |
- | height: 38px;
| |
- | position: absolute;
| |
- | left: 124px;
| |
- | top: 185px;
| |
- | z-index: 2;
| |
- | }
| |
- | #face6 {
| |
- | width: 32px;
| |
- | height: 42px;
| |
- | position: absolute;
| |
- | left: 174px;
| |
- | top: 132px;
| |
- | z-index: 2;
| |
- | }
| |
- | #face7 {
| |
- | width: 43px;
| |
- | height: 46px;
| |
- | position: absolute;
| |
- | left: 207px;
| |
- | top: 180px;
| |
- | z-index: 2;
| |
- | }
| |
- | #face8 {
| |
- | width: 31px;
| |
- | height: 34px;
| |
- | position: absolute;
| |
- | left: 277px;
| |
- | top: 189px;
| |
- | z-index: 2;
| |
- | }
| |
- | #face9 {
| |
- | width: 29px;
| |
- | height: 40px;
| |
- | position: absolute;
| |
- | left: 324px;
| |
- | top: 134px;
| |
- | }
| |
- | #face10 {
| |
- | width: 34px;
| |
- | height: 39px;
| |
- | position: absolute;
| |
- | left: 356px;
| |
- | top: 166px;
| |
- | z-index: 2;
| |
- | }
| |
- |
| |
- | #logo {
| |
- | float: right;
| |
- | position: absolute;
| |
- | left: 750px;
| |
- | top: 50px;
| |
- | width: 348px;
| |
- | height: 348px;
| |
- | }
| |
- |
| |
- | #james1 {
| |
- | position: absolute;
| |
- | left: 562px;
| |
- | top: -131px;
| |
- | visibility: hidden;}
| |
- | #james2 {
| |
- | position: absolute;
| |
- | left: 562px;
| |
- | top: 120px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #face1:hover #james1 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #face1:hover #james2 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #ryan1 {
| |
- | position: absolute;
| |
- | left: 360px;
| |
- | top: -127px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #ryan2 {
| |
- | position: absolute;
| |
- | left: 360px;
| |
- | top: 125px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #face2:hover #ryan1 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- | #face2:hover #ryan2 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #alexc1 {
| |
- | position: absolute;
| |
- | left: 496px;
| |
- | top: -129px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #alexc2 {
| |
- | position: absolute;
| |
- | left: 496px;
| |
- | top: 123px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #face3:hover #alexc1 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #face3:hover #alexc2 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #alexb1 {
| |
- | position: absolute;
| |
- | left: 548px;
| |
- | top: -169px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #alexb2 {
| |
- | position: absolute;
| |
- | left: 548px;
| |
- | top: 83px;
| |
- | visibility: hidden;}
| |
- |
| |
- |
| |
- | #face4:hover #alexb1 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #face4:hover #alexb2 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #alice1 {
| |
- | position: absolute;
| |
- | left: 481px;
| |
- | top: -185px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #alice2 {
| |
- | position: absolute;
| |
- | left: 481px;
| |
- | top: 67px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #face5:hover #alice1 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #face5:hover #alice2 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #liam1 {
| |
- | position: absolute;
| |
- | left: 431px;
| |
- | top: -132px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #liam2 {
| |
- | position: absolute;
| |
- | left: 431px;
| |
- | top: 120px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #face6:hover #liam1 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #face6:hover #liam2 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #becca1 {
| |
- | position: absolute;
| |
- | left: 398px;
| |
- | top: -180px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #becca2 {
| |
- | position: absolute;
| |
- | left: 398px;
| |
- | top: 72px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #face7:hover #becca1 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #face7:hover #becca2 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #mary1 {
| |
- | position: absolute;
| |
- | left: 328px;
| |
- | top: -189px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #mary2 {
| |
- | position: absolute;
| |
- | left: 328px;
| |
- | top: 63px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #face8:hover #mary1 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #face8:hover #mary2 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #freddie1 {
| |
- | position: absolute;
| |
- | left: 281px;
| |
- | top: -134px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #freddie2 {
| |
- | position: absolute;
| |
- | left: 281px;
| |
- | top: 118px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #face9:hover #freddie1 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #face9:hover #freddie2 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #andy1 {
| |
- | position: absolute;
| |
- | left: 249px;
| |
- | top: -166px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #andy2 {
| |
- | position: absolute;
| |
- | left: 249px;
| |
- | top: 86px;
| |
- | visibility: hidden;}
| |
- |
| |
- | #face10:hover #andy1 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #face10:hover #andy2 {
| |
- | visibility:visible;
| |
- | z-index:1;
| |
- | }
| |
- |
| |
- | #table {
| |
- | width: 100px;
| |
- | height: 48px;
| |
- | border-style: none;
| |
- | background-color: transparent;
| |
- | margin: 0px auto;
| |
- | position: relative;
| |
- | }
| |
- | </style>
| |
- |
| |
- | </head>
| |
- | <body>
| |
- | <table width="1075" border="0">
| |
- | <!--Spacer for Menu Banner-->
| |
- | <tr>
| |
- | <td width="100" height="50"></td>
| |
- | <td width="875"></td>
| |
- | <td width="100"></td>
| |
- | </tr>
| |
- | <!--End of Spacer-->
| |
- | <tr>
| |
- | <td bgcolor="#F0C427">
| |
- | </td>
| |
- | <td>
| |
- | <div id="wrapper">
| |
- | <img id="exphoto" src="https://static.igem.org/mediawiki/2012/2/28/Exigem_team.jpg" />
| |
- | <div id="face1">
| |
- | <div id="james1">
| |
- | <img src="../../Documents/igem/james1.jpg" width="260px" height="237px"/>
| |
- | </div>
| |
- | <div id="james2">
| |
- | <img src="../../Documents/igem/james2.jpg" width="260px" height="237px"/>
| |
- | </div>
| |
- | </div>
| |
- | <div id="face2">
| |
- | <div id="ryan1">
| |
- | <img src="../../Documents/igem/ryan1.jpg" width="260px" height="237px"/>
| |
- | </div>
| |
- | <div id="ryan2">
| |
- | <img src="../../Documents/igem/ryan2.jpg" width="260px" height="237px"/>
| |
- | </div>
| |
- | </div>
| |
- | <div id="face3">
| |
- | <div id="alexc1">
| |
- | <img src="../../Documents/igem/AlexC1.JPG" width="260px" height="237px"/>
| |
- | </div>
| |
- | <div id="alexc2">
| |
- | <img src="../../Documents/igem/AlexC2.JPG" width="260px" height="237px"/>
| |
- | </div>
| |
- | </div>
| |
- | <div id="face4">
| |
- | <div id="alexb1">
| |
- | <img src="../../Documents/igem/AlexB1.JPG" width="260px" height="237px"/>
| |
- | </div>
| |
- | <div id="alexb2">
| |
- | <img src="../../Documents/igem/AlexB2.JPG" width="260px" height="237px"/>
| |
- | </div>
| |
- | </div>
| |
- | <div id="face5">
| |
- | <div id="alice1">
| |
- | <img src="../../Documents/igem/Alice1.JPG" width="260px" height="237px"/>
| |
- | </div>
| |
- | <div id="alice2">
| |
- | <img src="../../Documents/igem/Alice2.JPG" width="260px" height="237px"/>
| |
- | </div>
| |
- | </div>
| |
- | <div id="face6">
| |
- | <div id="liam1">
| |
- | <img src="../../Documents/igem/Liam1.JPG" width="260x" height="237px"/>
| |
- | </div>
| |
- | <div id="liam2">
| |
- | <img src="../../Documents/igem/Liam2.JPG" width="260x" height="237px"/>
| |
- | </div>
| |
- | </div>
| |
- | <div id="face7">
| |
- | <div id="becca1">
| |
- | <img src="../../Documents/igem/Becca1.JPG" width="260px" height="237px"/>
| |
- | </div>
| |
- | <div id="becca2">
| |
- | <img src="../../Documents/igem/Becca2.JPG" width="260px" height="237px"/>
| |
- | </div>
| |
- | </div>
| |
- | <div id="face8">
| |
- | <div id="mary1">
| |
- | <img src="../../Documents/igem/Mary1.JPG" width="260x" height="237px"/>
| |
- | </div>
| |
- | <div id="mary2">
| |
- | <img src="../../Documents/igem/Mary2.JPG" width="260x" height="237px"/>
| |
- | </div>
| |
- | </div>
| |
- | <div id="face9">
| |
- | <div id="freddie1">
| |
- | <img src="freddieimg" width="260px" height="237px"/>
| |
- | </div>
| |
- | <div id="freddie2">
| |
- | <img src="freddieimg" width="260px" height="237px"/>
| |
- | </div>
| |
- | </div>
| |
- | <div id="face10">
| |
- | <div id="andy1">
| |
- | <img src="../../Documents/igem/Andy1.JPG" width="260px" height="237px"/>
| |
- | </div>
| |
- | <div id="andy2">
| |
- | <img src="../../Documents/igem/Andy2.JPG" width="260px" height="237px"/>
| |
- | </div>
| |
- | </div>
| |
- | <div id="box">
| |
- | <div id="names">Mouse over our faces for a description!
| |
- | </div>
| |
- | <div id="descriptions">
| |
- | </div>
| |
- | <div id="logo">
| |
- | <img src="../../Documents/igem/logoholder.png" width="348px" height="348px">
| |
- | </div>
| |
- | </td>
| |
- | <td bgcolor="#57B947">
| |
- | </td>
| |
- | </tr>
| |
- | </table>
| |
- | </div>
| |
- | </div>
| |
- | </div>
| |
- | </div>
| |
- | </body>
| |
- | </html>
| |