Team:Heidelberg/Templates/Footer-Nav

From 2013.igem.org

(Difference between revisions)
m
 
(9 intermediate revisions not shown)
Line 5: Line 5:
.imageMap img {display:block; width:100%; border-radius:20px;}
.imageMap img {display:block; width:100%; border-radius:20px;}
.imageMap .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}
.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 */
.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%;}
-webkit-transform:rotate(40deg); /* Safari and Chrome */ width: 4.3%;}
Line 34: Line 34:
.imageMap a.p14{height: 29%;left: 92.4%;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%;}
-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 */
+
                 .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%;}
-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 */
+
                 .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%;}
-webkit-transform:rotate(-10deg); /* Safari and Chrome */width: 4.3%;}
                  
                  
Line 60: Line 60:
.imageMap .hotspots div:hover b {width:0; padding:0;}
.imageMap .hotspots div:hover b {width:0; padding:0;}
.imageMap .hotspots div:hover p {display:block;}
.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>
</style>
<div class="row">
<div class="row">
Line 66: Line 66:
<div class="imageMap" aria-haspopup="true">
<div class="imageMap" aria-haspopup="true">
  <img src="https://static.igem.org/mediawiki/2013/f/fd/Heidelberg_bottom_sponsors2.png" width="100%">
  <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 class="hotspots">
<div title="Roth">
<div title="Roth">
Line 158: Line 159:
<script type="text/javascript">
<script type="text/javascript">
$(function() {
$(function() {
-
     var items = $('.item');
+
     /*var items = $('.item');
     for (var i = 0; i < items.length; ++i) {
     for (var i = 0; i < items.length; ++i) {
         var dd = $(items[i]).find('ul');
         var dd = $(items[i]).find('ul');
Line 164: Line 165:
             dd.css("left", ($(items[i]).innerWidth() - dd.outerWidth()) * 0.5);
             dd.css("left", ($(items[i]).innerWidth() - dd.outerWidth()) * 0.5);
         }
         }
-
     }
+
     }*/
     $('#nav > div').hover(
     $('#nav > div').hover(
     function () {
     function () {
         var $this = $(this);
         var $this = $(this);
 +
        var offsetLeft = $this.data("offsetL") + "px";
         $this.find('img.circle').stop().animate({
         $this.find('img.circle').stop().animate({
             'width'    :'320px',
             'width'    :'320px',
             'height'    :'320px',
             'height'    :'320px',
//                      'top'      :'0 px',
//                      'top'      :'0 px',
-
                 'left'      :'-124px',
+
                 'left'      :offsetLeft,
             'opacity'  :'3.0',
             'opacity'  :'3.0',
         },200,'easeOutBack',function(){
         },200,'easeOutBack',function(){
Line 204: Line 206:
<!-- This part is only if you want to use $...$ delimiters -->
<!-- This part is only if you want to use $...$ delimiters -->
<script type="text/x-mathjax-config">
<script type="text/x-mathjax-config">
-
     MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
+
     MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}, TeX: {equationNumbers: { autoNumber: "AMS" }}});
</script>
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
</html>
</html>

Latest revision as of 00:36, 29 October 2013

Thanks to