|
|
| Line 1: |
Line 1: |
| | | | |
| − | <html lang=en-US>
| |
| − | <head>
| |
| − | <title>gem</title>
| |
| − | <meta charset="UTF-8" />
| |
| − | <style type="text/css">
| |
| − | <!--
| |
| − | body{
| |
| − | background: #052d5d;
| |
| − | }
| |
| − | #main_contents{
| |
| − | margin: 0 auto;
| |
| − | min-width: 800px;
| |
| − | max-width: 1010px;
| |
| − | }
| |
| − | .container{
| |
| − | margin: 0 auto;
| |
| − | min-width: 790px;
| |
| − | max-width: 1000px;
| |
| − | background: #ffffff;
| |
| − | }
| |
| − | .member_header{
| |
| − | background: #ffffff;
| |
| − | text-align: center;
| |
| − | }
| |
| − | .member_header span{
| |
| − | border-bottom: 2px solid #052d5d;
| |
| − | }
| |
| − | #member_list_division{
| |
| − | min-width: 800px;
| |
| − | }
| |
| − | #member_list{
| |
| − | width: 790px;
| |
| − | }
| |
| − | #member_list li{
| |
| − | display: inline-block;
| |
| − | width: 15%;
| |
| − | float: left;
| |
| − | }
| |
| − | #member_list li a{
| |
| − | display: block
| |
| − | margin: 0;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − | #member_list li a:hover{
| |
| − | background: #cccccc;
| |
| − | }
| |
| − | #member_contents{
| |
| − | min-width: 800px;
| |
| − | clear: both;
| |
| − | }
| |
| − | #member_image{
| |
| − | width: 300px;
| |
| − | height: 200px;
| |
| − | margin-left: 10px;
| |
| − | margin-right: auto;
| |
| − | float: left;
| |
| − | }
| |
| − | #member_profile{
| |
| − | width: 400px;
| |
| − | height: 200px;
| |
| − | margin-left: auto;
| |
| − | margin-right: 10px;
| |
| − | float: left;
| |
| − | }
| |
| − | #member_comment{
| |
| − | height: 200px;
| |
| − | margin: 0 10px;
| |
| − | padding: 10px auto;
| |
| − | clear: both;
| |
| − | }
| |
| − | .on{
| |
| − | border: 3px solid #000000;
| |
| − | }
| |
| − | .off{
| |
| − | border: 3px solid #ffffff;
| |
| − | }
| |
| − | .profile_header{
| |
| − | text-align:right;
| |
| − | color: #7f7f7f;
| |
| − | }
| |
| − | --></style>
| |
| − | </head>
| |
| − | <body>
| |
| − | <div id="main_contents">
| |
| − | <div id="team_page_header" class="container">
| |
| − | <h1 align="center">About Us</h1>
| |
| − | </div><!-- /team_page_header -->
| |
| − | <div id="student" class="container">
| |
| − | <div id="student_header" class="member_header">
| |
| − | <h2><span>Team Members</span></h2>
| |
| − | </div><!-- /student_header -->
| |
| − | <div id="member_list_division">
| |
| − | <ul id="member_list">
| |
| − | </ul><!-- member_list -->
| |
| − | </div><!-- /member_list_division -->
| |
| − | <div id="member_contents">
| |
| − | <div id="member_image"></div><!-- /member_image -->
| |
| − | <div id="member_profile"></div><!-- /member_profile -->
| |
| − | <div id="member_comment"></div><!-- /member_comment -->
| |
| − | </div><!-- /member_contents -->
| |
| − | </div><!-- /student -->
| |
| − |
| |
| − | <div id="instructor" class="container">
| |
| − | <div id="instructor_header" class="member_header">
| |
| − | <h2><span>Instructors</span></h2>
| |
| − | </div><!-- /intstructor_header -->
| |
| − | <div id="instructor_content">
| |
| − | <p class="name"></p>
| |
| − | </div><!-- /instructor_contetn -->
| |
| − | </div><!-- /instructor -->
| |
| − |
| |
| − | <div id="college" class="container">
| |
| − | <div id="college_header" class="member_header">
| |
| − | <h2><span>College</span></h2>
| |
| − | </div><!-- /college_header -->
| |
| − | <div id="college_contents">
| |
| − | <a href="http://www.titech.ac.jp/english/about/overview/mission.html">About Tokyo Tech</a>
| |
| − | </div><!-- /college_contents -->
| |
| − | </div><!-- /college -->
| |
| − | </div><!-- /main_contents -->
| |
| − | <!-- from here, javascript code -->
| |
| − | <script type="text/javascript">
| |
| − |
| |
| − | // Global constant definition
| |
| − |
| |
| − | // Number of member
| |
| − | var member_num = 2;
| |
| − |
| |
| − | // Selected Number
| |
| − | var now_sel = -1;
| |
| − |
| |
| − | /**
| |
| − | * Array for member image
| |
| − | * An element is full path of profile image
| |
| − | */
| |
| − | var images = [
| |
| − | "http://blog-imgs-95.fc2.com/s/a/s/sasasasasa339/254979_439248012823160_582673604_n.jpg",
| |
| − | "http://blog-imgs-95.fc2.com/s/a/s/sasasasasa339/U3kohmwj.jpg"
| |
| − | ];
| |
| − |
| |
| − | /**
| |
| − | * Array for member profile
| |
| − | * First element is name
| |
| − | * Second element is school
| |
| − | * Third element is department
| |
| − | * Fourth element is cource (somethime null)
| |
| − | */
| |
| − | var profiles = [
| |
| − | // for member1
| |
| − | ["Member1", "Biotechnology and Bioscience", "Biotechnology", "Biomolecule Engineering"],
| |
| − | // for member2
| |
| − | ["Member2", "Technology", "Computer Science", null]
| |
| − | ];
| |
| − |
| |
| − | /**
| |
| − | * Array for member comment
| |
| − | */
| |
| − | var comments = [
| |
| − | // for member1
| |
| − | "I'm interested in iGEM.",
| |
| − | // for member2
| |
| − | "The reason I took part in iGEM is..."
| |
| − | ];
| |
| − |
| |
| − |
| |
| − | // Function definition
| |
| − |
| |
| − | // The function judging whether the argument is in bound
| |
| − | function inBound(arg){
| |
| − | return (arg>=0 && arg<member_num);
| |
| − | }
| |
| − |
| |
| − | // The function to load and write profile image
| |
| − | function write_image(index){
| |
| − | document.getElementById("member_image").innerHTML = '<img src="' + images[index] + '" width=200 />';
| |
| − | }
| |
| − |
| |
| − | // The function to write profile
| |
| − | function write_profile(index){
| |
| − | var out = '<table border="0"><tbody>'
| |
| − | + '<tr><td class="profile_header">Name:</td><td>' + profiles[index][0] + '</td></tr>'
| |
| − | + '<tr><td class="profile_header">School:</td><td>' + profiles[index][1] + '</td></tr>'
| |
| − | + '<tr><td class="profile_header">Department:</td><td>' + profiles[index][2] + '</td></tr>';
| |
| − | if(profiles[index][3] != null){
| |
| − | out += '<tr><td class="profile_header">Cource:</td><td>' + profiles[index][3] + '</td></tr>';
| |
| − | }
| |
| − | out += '</tbody></table>';
| |
| − |
| |
| − | document.getElementById("member_profile").innerHTML = out;
| |
| − | }
| |
| − |
| |
| − | // The function to write comment
| |
| − | function write_comment(index){
| |
| − | document.getElementById("member_comment").innerHTML = comments[index];
| |
| − | }
| |
| − |
| |
| − | // The function to change underline from pre-selected to selected
| |
| − | function change_selected(index){
| |
| − | if(inBound(now_sel)){
| |
| − | element = document.getElementById('listId'+now_sel);
| |
| − | element.className = 'off';
| |
| − | }
| |
| − | element = document.getElementById('listId'+index);
| |
| − | element.className = 'on';
| |
| − |
| |
| − | now_sel = index;
| |
| − | }
| |
| − |
| |
| − | // The function changing page
| |
| − | function change(member_index /* member_name */){
| |
| − | var index = member_index;
| |
| − |
| |
| − | /*
| |
| − | switch(member_name){
| |
| − | case "member1":
| |
| − | index = 0;
| |
| − | break;
| |
| − | case "member2":
| |
| − | index = 1;
| |
| − | break;
| |
| − | default:
| |
| − | index = -1;
| |
| − | break;
| |
| − | }
| |
| − | */
| |
| − |
| |
| − | if(inBound(index)){
| |
| − | write_image(index);
| |
| − | write_profile(index);
| |
| − | write_comment(index);
| |
| − | change_selected(index);
| |
| − | } else {
| |
| − | alert('The selected member is undefined.');
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | // Procedure on page load
| |
| − | window.onload = function(){
| |
| − | var i;
| |
| − | var image_list = document.getElementById('member_list');
| |
| − | for(i=0; i<member_num; i++){
| |
| − | var elemli = document.createElement('li');
| |
| − | elemli.innerHTML
| |
| − | = '<a href="#" onclick="change(' + i + ');">'
| |
| − | + '<img src="' + images[i] + '" width=100 id="listId' + i + '" class="off"/>'
| |
| − | + '</a>';
| |
| − | image_list.appendChild(elemli);
| |
| − | }
| |
| − | }
| |
| − | </script>
| |
| − | </body>
| |
| − | </html>
| |
