Team:Heidelberg/Templates/Footer-Nav

From 2013.igem.org

(Difference between revisions)

Latest revision as of 00:36, 29 October 2013

Thanks to

@@ Line 5: / Line 5: @@
 		.imageMap img {display:block; width:100%; border-radius:20px;}
 		.imageMap .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}
-		.imageMap a {display:block; position:absolute; z-index:100; opacity:0.2; filter: alpha(opacity=20); border:1px solid transparent; border-radius:10px;}
+		.imageMap a {display:block; position:absolute; z-index:100; opacity:0.2; filter: alpha(opacity=20); /*border:1px solid transparent; border-radius:10px;*/}
 		.imageMap a.p1 {height: 28%;left: 14.3%;top: 37%;transform: rotate(40deg);-ms-transform:rotate(40deg); /* IE 9 */
 -webkit-transform:rotate(40deg); /* Safari and Chrome */ width: 4.3%;}
@@ Line 14: / Line 14: @@
 		.imageMap a.p4 {height: 46%;left: 30.4%;top: 20%;transform: rotate(18deg);-ms-transform:rotate(18deg); /* IE 9 */
 -webkit-transform:rotate(18deg); /* Safari and Chrome */width: 6.3%;}
-		.imageMap a.p5 {height: 28%;left: 36.7%;top: 39.5%;transform: rotate(-8deg);-ms-transform:rotate(-8deg); /* IE 9 */
+		.imageMap a.p5 {height: 28%;left: 36.2%;top: 39.5%;transform: rotate(-8deg);-ms-transform:rotate(-8deg); /* IE 9 */
 -webkit-transform:rotate(-8deg); /* Safari and Chrome */width: 4.3%;}
-		.imageMap a.p6 {height: 38%;left: 42.5%;top: 27%;transform: rotate(23deg);-ms-transform:rotate(23deg); /* IE 9 */
+		.imageMap a.p6 {height: 38%;left: 42%;top: 27%;transform: rotate(23deg);-ms-transform:rotate(23deg); /* IE 9 */
 -webkit-transform:rotate(23deg); /* Safari and Chrome */width: 5.6%;}
-		.imageMap a.p7 {height: 46%;left: 49.2%;top: 20%;transform: rotate(-27deg);-ms-transform:rotate(-27deg); /* IE 9 */
+		.imageMap a.p7 {height: 46%;left: 48.8%;top: 20%;transform: rotate(-27deg);-ms-transform:rotate(-27deg); /* IE 9 */
 -webkit-transform:rotate(-27deg); /* Safari and Chrome */width: 6.3%;}
-		.imageMap a.p8 {height: 57%;left: 56.8%;top: 8%;transform: rotate(23.5deg);-ms-transform:rotate(23.5deg); /* IE 9 */
+		.imageMap a.p8 {height: 57%;left: 56.3%;top: 8%;transform: rotate(23.5deg);-ms-transform:rotate(23.5deg); /* IE 9 */
 -webkit-transform:rotate(23.5deg); /* Safari and Chrome */width: 8%;}
-		.imageMap a.p9 {height: 28%;left: 64.7%;top: 37%;transform: rotate(-45deg);-ms-transform:rotate(-45deg); /* IE 9 */
+		.imageMap a.p9 {height: 28%;left: 64.2%;top: 37%;transform: rotate(-45deg);-ms-transform:rotate(-45deg); /* IE 9 */
 -webkit-transform:rotate(-45deg); /* Safari and Chrome */width: 4%;}
-		.imageMap a.p10 {height: 28.5%;left: 69.2%;top: 38%;transform: rotate(22deg);-ms-transform:rotate(22deg); /* IE 9 */
+		.imageMap a.p10 {height: 28.5%;left: 68.8%;top: 38%;transform: rotate(22deg);-ms-transform:rotate(22deg); /* IE 9 */
 -webkit-transform:rotate(22deg); /* Safari and Chrome */width: 4.1%;}
-		.imageMap a.p11 {height: 46%;left: 73.5%;top: 20%;transform: rotate(-18deg);-ms-transform:rotate(-18deg); /* IE 9 */
+		.imageMap a.p11 {height: 46%;left: 73%;top: 20%;transform: rotate(-18deg);-ms-transform:rotate(-18deg); /* IE 9 */
 -webkit-transform:rotate(-18deg); /* Safari and Chrome */width: 6.3%;}
-		.imageMap a.p12{height: 41%;left: 82.2%;top: 25%;transform: rotate(24.5deg);-ms-transform:rotate(24.5deg); /* IE 9 */
+		.imageMap a.p12{height: 41%;left: 81.7%;top: 25%;transform: rotate(24.5deg);-ms-transform:rotate(24.5deg); /* IE 9 */
 -webkit-transform:rotate(24.5deg); /* Safari and Chrome */width: 5.6%;}
-		.imageMap a.p13{height: 29%;left: 88.2%;top: 36.5%;transform: rotate(40deg);-ms-transform:rotate(40deg); /* IE 9 */
+		.imageMap a.p13{height: 29%;left: 87.8%;top: 36.5%;transform: rotate(40deg);-ms-transform:rotate(40deg); /* IE 9 */
 -webkit-transform:rotate(40deg); /* Safari and Chrome */width: 4%;}
-		.imageMap a.p14{height: 29%;left: 92.9%;top: 38%;transform: rotate(-16deg);-ms-transform:rotate(-16deg); /* IE 9 */
+		.imageMap a.p14{height: 29%;left: 92.4%;top: 38%;transform: rotate(-16deg);-ms-transform:rotate(-16deg); /* IE 9 */
 -webkit-transform:rotate(-16deg); /* Safari and Chrome */width: 4%;}
+                .imageMap a.p15 {height: 28%;left: 21.3%;top: 11.7%;transform: rotate(26deg);-ms-transform:rotate(26deg); /* IE 9 */
+-webkit-transform:rotate(26deg); /* Safari and Chrome */width: 4.3%;}
+                .imageMap a.p16 {height: 28%;left: 66.5%;top: 10.5%;transform: rotate(-10deg);-ms-transform:rotate(-10deg); /* IE 9 */
+-webkit-transform:rotate(-10deg); /* Safari and Chrome */width: 4.3%;}
 		.imageMap a + p {position:absolute; left:0%; top:102%; width:100%; color:#000; display:none;}
@@ Line 55: / Line 60: @@
 		.imageMap .hotspots div:hover b {width:0; padding:0;}
 		.imageMap .hotspots div:hover p {display:block;}
-		.imageMap .hotspots div:hover a {background:#fff; z-index:100; opacity:0.3; filter: alpha(opacity=30); border:1px solid #000;}
+		.imageMap .hotspots div:hover a {background:#fff; z-index:100; opacity:0.3; filter: alpha(opacity=30);}
 </style>
 <div class="row">
@@ Line 61: / Line 66: @@
 <div class="imageMap" aria-haspopup="true">
   <img src="https://static.igem.org/mediawiki/2013/f/fd/Heidelberg_bottom_sponsors2.png" width="100%">
+ <center>Thanks to <object style="width:20px; top:0px" data="https://static.igem.org/mediawiki/2013/0/07/Heidelberg_boot.png"></object></center>
 <div class="hotspots">
 				<div title="Roth">
@@ Line 83: / Line 89: @@
 			<div class="hotspots">
 				<div title="Bio Cat">
-					<a class="p5" aria-haspopup="false" rel="nofollow" href="http://www.carlroth.com"></a>
+					<a class="p5" aria-haspopup="false" rel="nofollow" href="http://www.biocat.com"></a>
 				</div>
 			</div>
@@ Line 131: / Line 137: @@
 				</div>
 			</div>
+                        <div class="hotspots">
+				<div title="Era SynBio">
+					<a class="p15" aria-haspopup="false" rel="nofollow" href="http://www.erasynbio.eu/"></a>
+				</div>
+			</div>
+                        <div class="hotspots">
+				<div title="Golschmied Haas">
+					<a class="p16" aria-haspopup="false" rel="nofollow" href=""></a>
+				</div>
+			</div>
 		</div>
 		</div>
@@ Line 142: / Line 159: @@
 <script type="text/javascript">
 $(function() {
-     var items = $('.item');
+     /*var items = $('.item');
      for (var i = 0; i < items.length; ++i) {
          var dd = $(items[i]).find('ul');
@@ Line 148: / Line 165: @@
              dd.css("left", ($(items[i]).innerWidth() - dd.outerWidth()) * 0.5);
          }
-     }
+     }*/
      $('#nav > div').hover(
      function () {
          var $this = $(this);
+        var offsetLeft = $this.data("offsetL") + "px";
          $this.find('img.circle').stop().animate({
              'width'     :'320px',
              'height'    :'320px',
 //                      'top'       :'0 px',
-                 'left'      :'-124px',
+                 'left'      :offsetLeft,
              'opacity'   :'3.0',
          },200,'easeOutBack',function(){
@@ Line 184: / Line 202: @@
 });
 </script>
+<!-- MathJax (LaTeX for the web) -->
+<!-- This part is only if you want to use $...$ delimiters -->
+<script type="text/x-mathjax-config">
+    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}, TeX: {equationNumbers: { autoNumber: "AMS" }}});
+</script>
+<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 </html>