Difference between revisions of "Team:SZU-China/IntegratedHP"

 
(4 intermediate revisions by 2 users not shown)
Line 28: Line 28:
  
 
<style id="fontSet">
 
<style id="fontSet">
 +
 +
    /*@font-face {*/
 +
    /*    font-family: "GalanoGrotesqueAltDEMO-Bold";*/
 +
    /*    src: url('../../wiki/images/e/ef/T--SZU-CHINA--attribution_font.otf') format("opentype");*/
 +
    /*}*/
 +
    /*@font-face {*/
 +
    /*    font-family: "LatoBold";*/
 +
    /*    src: url('../../wiki/images/5/54/T--SZU-CHINA--Lato-Bold.ttf') format("truetype");*/
 +
 +
    /*}*/
 +
 +
    /*@font-face {*/
 +
    /*    font-family: "LatoMe";*/
 +
    /*    src: url('../../wiki/images/5/5a/T--SZU-CHINA--Lato-medium.ttf') format("truetype");*/
 +
 +
    /*}*/
 +
  
 
     @font-face {
 
     @font-face {
 
         font-family: "GalanoGrotesqueAltDEMO-Bold";
 
         font-family: "GalanoGrotesqueAltDEMO-Bold";
         src: url('../../wiki/images/e/ef/T--SZU-CHINA--attribution_font.otf') format("opentype");
+
         src: url('./fonts/Galano Grotesque Alt DEMO Bold.otf') format("opentype");
 
     }
 
     }
 
     @font-face {
 
     @font-face {
 
         font-family: "LatoBold";
 
         font-family: "LatoBold";
         src: url('../../wiki/images/5/54/T--SZU-CHINA--Lato-Bold.ttf') format("truetype");
+
         src: url('./fonts/Lato-Bold.ttf') format("truetype");
  
 
     }
 
     }
Line 41: Line 58:
 
     @font-face {
 
     @font-face {
 
         font-family: "LatoMe";
 
         font-family: "LatoMe";
         src: url('../../wiki/images/5/5a/T--SZU-CHINA--Lato-medium.ttf') format("truetype");
+
         src: url('./fonts/Lato-Medium.ttf') format("truetype");
  
 
     }
 
     }
 +
 +
 +
 
</style>
 
</style>
<style>
+
<style id="littleMeunuCss">
 
     .littleMenu{
 
     .littleMenu{
 
         left: 5%;
 
         left: 5%;
Line 286: Line 306:
 
     }
 
     }
 
     .modal-title{
 
     .modal-title{
         font-size: 25px;
+
         font-size: 35px;
         line-height: 25px;
+
         line-height: 35px;
 
         font-family:GalanoGrotesqueAltDEMO-Bold ;
 
         font-family:GalanoGrotesqueAltDEMO-Bold ;
         color: #333333;
+
         color: #0b8544;
  
 
     }
 
     }
Line 301: Line 321:
 
     .modal-body p{
 
     .modal-body p{
 
         font-size: 18px;
 
         font-size: 18px;
         line-height: 20px;
+
         line-height: 25px;
 
         font-family:LatoMe ;
 
         font-family:LatoMe ;
 
         margin-bottom: 20px;
 
         margin-bottom: 20px;
Line 315: Line 335:
 
         color: #333333;
 
         color: #333333;
 
         text-align: justify;
 
         text-align: justify;
 +
    }
 +
    .CilckMore{
 +
        color: #333333;
 +
        font-family: GalanoGrotesqueAltDEMO-Bold;
 +
        font-size: 38px;
 +
        line-height: 120%;
 +
        text-align: center;
 +
        display: block;
 +
        margin: 0 auto;
 +
        padding-top: 30px;
 
     }
 
     }
 
</style>
 
</style>
Line 900: Line 930:
  
 
     }
 
     }
 +
 +
 +
    .cardbody{
 +
        width: 80%;
 +
        margin: 0 auto 0 auto;
 +
        margin-top: 100px;
 +
        text-align: center;
 +
        padding-bottom: 30px;
 +
    }
 +
    .cardtext{
 +
        width: 80%;
 +
        text-align: center;
 +
        font-family: "LatoBold",Helvetica;
 +
        font-size: 16px;
 +
        color: rgba(55, 55, 55, 1.0);
 +
        margin: 0 auto;
 +
        position: relative;
 +
        display: block;
 +
        margin-top: 20px;
 +
        margin-bottom: 60px;
 +
    }
 +
    .cardheadline{
 +
        text-align: center;
 +
        font-family: "GalanoGrotesqueAltDEMO-Bold", Helvetica, Arial, serif;
 +
        font-size: 30px;
 +
        color: #11843F;
 +
        margin-top: 20px;
 +
        line-height: 150%;
 +
    }
 +
    .longbuttonh1{
 +
        text-align: left;
 +
        font-family: "GalanoGrotesqueAltDEMO-Bold", Helvetica, Arial, serif;
 +
        font-size: 30px;
 +
        color: white;
 +
        margin-top: 10px;
 +
        margin-left: 20px;
 +
    }
 +
    .longbuttonh2{
 +
        text-align: left;
 +
        font-family: "GalanoGrotesqueAltDEMO-Bold", Helvetica, Arial, serif;
 +
 +
        color: white;
 +
 +
        margin-left: 20px;
 +
    }
 +
    .cardimg{
 +
        width: 40%;
 +
        height: auto;
 +
        margin: 0 auto;
 +
        margin-top: 30px;
 +
        position: relative;
 +
        display: block;
 +
    }
 +
    /*.card img {
 +
        width: 45%;
 +
        height: auto;
 +
        margin: 0 auto 0 auto;
 +
    }*/
 +
    .card{
 +
        /*height: 300px;*/
 +
        /*width: 260px;*/
 +
        height: 350px;
 +
        width: 20%;
 +
        background-color: white;
 +
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
 +
        border-radius: 4px;
 +
        display: inline-block;
 +
        margin-left: 18px;
 +
        vertical-align: top;
 +
        line-height: 24px;
 +
    }
 +
    .card:hover{
 +
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
 +
 +
 +
    }
 +
 +
 +
 
</style>
 
</style>
  
Line 914: Line 1,023:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
         <h2 class="bigtitle">Integrated HP</h2>
+
         <h2 class="bigtitle" style="font-size: 120px;text-align: center;">Integrated <br>Human Practices</h2>
 
     </div>
 
     </div>
  
Line 921: Line 1,030:
 
     <div id="mainbody">
 
     <div id="mainbody">
  
        <img class="leftsideimg2" src="https://2019.igem.org/wiki/images/c/c0/T--SZU-CHINA--img-02.png" style="top: 1200px;">
+
<!--        <img class="leftsideimg2" src="https://2019.igem.org/wiki/images/c/c0/T&#45;&#45;SZU-CHINA&#45;&#45;img-02.png" style="top: 1200px;">-->
 
         <img class="leftsideimg2" src="https://2019.igem.org/wiki/images/c/c0/T--SZU-CHINA--img-02.png" style="top: 2700px;">
 
         <img class="leftsideimg2" src="https://2019.igem.org/wiki/images/c/c0/T--SZU-CHINA--img-02.png" style="top: 2700px;">
  
Line 933: Line 1,042:
  
  
 +
        <div style="height: 300px"></div>
 +
 +
        <div class="cardbody">
 +
            <div class="card">
 +
                <img  class="cardimg" src="https://2019.igem.org/wiki/images/a/a3/T--SZU-CHINA--hplogo2.png" alt=""/>
 +
                <div>
 +
                    <h3 class="cardheadline">Background research</h3>
 +
<!--                    <span class="cardtext">Come and see how we made possible the manufacturing of Micrancide as well as the Application</span>-->
 +
                </div>
 +
 +
            </div>
 +
            <div class="card">
 +
                <img  class="cardimg" src="https://2019.igem.org/wiki/images/5/53/T--SZU-CHINA--gplog3.png" alt=""/>
 +
 +
                <div>
 +
                    <h3 class="cardheadline" style="margin-top: 50px;">Community</h3>
 +
<!--                    <span class="cardtext">Here is the siRNA sifting program for other researchers to select RNAi molecules for their specific purpose.</span>-->
 +
                </div>
 +
 +
            </div>
 +
            <div class="card">
 +
                <img  class="cardimg" src="https://2019.igem.org/wiki/images/d/db/T--SZU-CHINA--holgo4.png" alt=""/>
 +
 +
                <div>
 +
                    <h3 class="cardheadline" style="margin-top: 50px;">Expert</h3>
 +
<!--                    <span class="cardtext">Find out how we decided to use the third generation as the final RNAi-based herbicide</span>-->
 +
                </div>
 +
 +
            </div>
 +
            <div class="card">
 +
                <img  class="cardimg" src="https://2019.igem.org/wiki/images/b/b8/T--SZU-CHINA--hplog5.png" alt=""/>
 +
 +
                <h3 class="cardheadline">Companies & partner</h3>
 +
<!--                <span class="cardtext">Do you want to see how fast M. micrantha grows without control and how efficient Micrancide is?</span>-->
 +
            </div>
 +
 +
        </div>
 +
    </div>
 +
 +
 +
    <div style="height: 300px"></div>
 +
 +
 +
 +
        <h1 class="CilckMore">Click on the different sections of the image to learn more</h1>
  
 
         <div class="littleMenu">
 
         <div class="littleMenu">
Line 972: Line 1,126:
 
             </div>
 
             </div>
 
         </div>
 
         </div>
            <!--<div style="width: 100%; margin: 0 auto">-->
+
        <!--<div style="width: 100%; margin: 0 auto">-->
                <img id="mapImg" src="https://2019.igem.org/wiki/images/1/1e/T--SZU-CHINA--hpPage2.jpg" alt="" hidefocus="true" usemap="#testArea"  style="margin: 0 auto; display: block; max-width: 1200px; width: 1166px;height: auto; border: 10px #48D289;" border="1" />
+
        <img id="mapImg" src="https://2019.igem.org/wiki/images/0/06/T--SZU-CHINA--hp222.jpg" alt="" hidefocus="true" usemap="#testArea"  style="margin: 0 auto; display: block; max-width: 1200px; width: 80%;height: auto; border: 10px #48D289;" border="1" />
  
                <map name="testArea" id="testArea">
+
        <map name="testArea" id="testArea">
                    <area  alt="" title="" data-target="#myModal1"  data-toggle="modal" shape="rect" style="outline:none;" target="_self"  onfocus="blur(this)" />
+
            <area  alt="" title="" data-target="#myModal1"  data-toggle="modal" shape="rect" style="outline:none;" target="_self"  onfocus="blur(this)" />
                    <area  alt="" title="" data-target="#myModal2" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal2" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal3" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal3" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal4" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal4" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal5" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal5" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal6" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal6" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModalFirst" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModalFirst" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
  
                    <area  alt="" title="" data-target="#myModal7" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal7" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal8" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal8" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal9" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal9" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal10" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal10" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal11" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal11" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal12" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal12" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal13" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal13" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal14" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal14" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModalSecond" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModalSecond" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
  
                    <area  alt="" title="" data-target="#myModal15" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal15" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal16" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal16" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal17" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal17" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal18" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal18" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal19" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal19" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal20" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal20" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
                    <area  alt="" title="" data-target="#myModal21" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
+
            <area  alt="" title="" data-target="#myModal21" data-toggle="modal" shape="rect" style="outline:none;" target="_self"    />
  
                </map>
+
        </map>
  
  
            </div>
+
    </div>
        </div>
+
</div>
  
 
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
Line 1,021: Line 1,175:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,057: Line 1,211:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,095: Line 1,249:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,132: Line 1,286:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,174: Line 1,328:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,217: Line 1,371:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,230: Line 1,384:
 
                     <p>Obtained some information of chemical herbicide to facilitate comparison experiments
 
                     <p>Obtained some information of chemical herbicide to facilitate comparison experiments
 
                         We decided to add detergent to our product</p>
 
                         We decided to add detergent to our product</p>
                    <h4>The first generation:dsRNA</h4>
 
                    <p>We screened several genes from the transcriptome of Mikania micrantha obtained from the Genomics Institute and designed them into dsRNA sequences.</p>
 
                    <p>However, in subsequent experiments we found that there are many problems with dsRNA. dsRNA is low in specificity and poorly effective</p>
 
                    <p>We are trying to improve dsRNA and also start looking for alternatives.</p>
 
 
                 </div>
 
                 </div>
  
Line 1,294: Line 1,444:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,341: Line 1,491:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,379: Line 1,529:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,415: Line 1,565:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,450: Line 1,600:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,491: Line 1,641:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,529: Line 1,679:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,647: Line 1,797:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,682: Line 1,832:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,725: Line 1,875:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,767: Line 1,917:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,811: Line 1,961:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,853: Line 2,003:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 1,890: Line 2,040:
 
             </div>
 
             </div>
 
             <div class="modal-body">
 
             <div class="modal-body">
               
+
 
 
                 <div >
 
                 <div >
 
                     <h3>Description:</h3>
 
                     <h3>Description:</h3>
Line 2,108: Line 2,258:
 
     });
 
     });
 
</script>
 
</script>
    <script id="mapPage">
+
<script id="mapPage">
        $( document ).ready( function() {
+
    $( document ).ready( function() {
            //全图状态下定位
+
        //position on 1166px
            var defaultMaps = [
+
        var defaultMaps = [
                [661,248,1026,353],
+
            [661,248,1026,353],
                [257,356,484,443],
+
            [257,356,484,443],
                [653,460,898,558],
+
            [653,460,898,558],
                [256,559,488,668],
+
            [256,559,488,668],
                [666,712,980,793],
+
            [666,712,980,793],
                [86,811,491,926],
+
            [86,811,491,926],
                [177,953,998,1327],
+
            [177,953,998,1327],
                [664,1345,978,1465],
+
            [664,1345,978,1465],
                [204,1458,490,1552],
+
            [204,1458,490,1552],
                [658,1549,924,1656],
+
            [658,1549,924,1656],
                [123,1652,488,1754],
+
            [123,1652,488,1754],
                [660,1750,978,1863],
+
            [660,1750,978,1863],
                [116,1860,489,1959],
+
            [116,1860,489,1959],
                [657,1937,1096,2046],
+
            [657,1937,1096,2046],
  
                [154,2090,489,2192],
+
            [154,2090,489,2192],
                [197,2234,965,2583],
+
            [197,2234,965,2583],
                [647,2622,924,2724],
+
            [647,2622,924,2724],
                [168,2756,478,2860],
+
            [168,2756,478,2860],
                [640,2855,932,2967],
+
            [640,2855,932,2967],
                [240,3021,477,3112],
+
            [240,3021,477,3112],
                [641,3175,869,3276],
+
            [641,3175,869,3276],
                [157,3295,476,3393],
+
            [157,3295,476,3393],
                [638,3410,1090,3524],
+
            [638,3410,1090,3524],
  
                // 163,3299,479,3391
+
            // 163,3299,479,3391
                //
+
            //
                // 648,3414,1088,3521
+
            // 648,3414,1088,3521
                // 412,2176,692,2249
+
            // 412,2176,692,2249
                // 641,3406,1085,3532
+
            // 641,3406,1085,3532
            ];
+
        ];
  
            var areas = document.querySelectorAll('area');
+
        var areas = document.querySelectorAll('area');
            for (var m = 0; m < areas.length; m++) {
+
        for (var m = 0; m < areas.length; m++) {
                areas[m]
+
            areas[m]
            }
+
        }
            console.log(areas[0].coords);
+
        console.log(areas[0].coords);
            console.log(areas.length);
+
        console.log(areas.length);
            // 图片地址
+
        // 图片地址
            var img_url = '关于.png'
+
        var img_url = '关于.png'
  
            // 创建对象
+
        // 创建对象
            var img = new Image()
+
        var img = new Image()
  
            // 改变图片的src
+
        // 改变图片的src
            img.src = 'https://2019.igem.org/wiki/images/1/1e/T--SZU-CHINA--hpPage2.jpg'
+
        img.src = 'https://2019.igem.org/wiki/images/1/1e/T--SZU-CHINA--hpPage2.jpg'
  
            // 加载完成执行
+
        // 加载完成执行
            img.onload = function(){
+
        img.onload = function(){
                // 打印
+
            // 打印
                var cuWidth = parseInt($('#mapImg').css('width')) ;
+
            var cuWidth = parseInt($('#mapImg').css('width')) ;
                console.log("cp:"+cuWidth);
+
            console.log("cp:"+cuWidth);
                var cp = cuWidth / 1166 ;
+
            var cp = cuWidth / 1166 ;
                console.log("cp:"+cp);
+
            console.log("cp:"+cp);
                console.log( img.width );
+
            console.log( img.width );
                for (var i = 0; i < defaultMaps.length; i++) {
+
            for (var i = 0; i < defaultMaps.length; i++) {
                    for (var n = 0; n < defaultMaps[i].length; n++) {
+
                for (var n = 0; n < defaultMaps[i].length; n++) {
                        console.log(defaultMaps[i][n]);
+
                    console.log(defaultMaps[i][n]);
                        defaultMaps[i][n] = defaultMaps[i][n] * cp;
+
                    defaultMaps[i][n] = defaultMaps[i][n] * cp;
                        console.log(defaultMaps[i][n]);
+
                    console.log(defaultMaps[i][n]);
  
                    }
 
                    areas[i].setAttribute('coords',defaultMaps[i]);
 
 
                 }
 
                 }
 +
                areas[i].setAttribute('coords',defaultMaps[i]);
 +
            }
  
            };
+
        };
        })
+
    })
    </script>
+
</script>
  
 
<script src='https://2019.igem.org/Template:SZU-China/TweenMaxminjs?action=raw&ctype=text/javascript'></script>
 
<script src='https://2019.igem.org/Template:SZU-China/TweenMaxminjs?action=raw&ctype=text/javascript'></script>
Line 2,185: Line 2,335:
 
<script src='https://2019.igem.org/Template:SZU-China/debugaddIndicatorsminjs?action=raw&ctype=text/javascript'></script>
 
<script src='https://2019.igem.org/Template:SZU-China/debugaddIndicatorsminjs?action=raw&ctype=text/javascript'></script>
 
<script src='https://2019.igem.org/Template:SZU-China/animationgsapminjs?action=raw&ctype=text/javascript'></script>
 
<script src='https://2019.igem.org/Template:SZU-China/animationgsapminjs?action=raw&ctype=text/javascript'></script>
    <!--<script src="js/jquery-2.2.4.min.js"></script>-->
+
<!--<script src="js/jquery-2.2.4.min.js"></script>-->
    <!--<script src="js/bootstrap.min.js"></script>-->
+
<!--<script src="js/bootstrap.min.js"></script>-->
    <!--<script type="text/javascript" src="js/zooming.js"></script>-->
+
<!--<script type="text/javascript" src="js/zooming.js"></script>-->
  
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 10:22, 19 October 2019

template

Integrated
Human Practices

Background research

Community

Expert

Companies & partner

Click on the different sections of the image to learn more