"
Team:Heidelberg/Templates/Footer-Tour
From 2013.igem.org
(Difference between revisions)
Nils.kurzawa (Talk | contribs) m (Created page with "<html> <style type="text/css"> - →Image map styles: .imageMap {width:100%; position:relative;} .imageMap img {display:block; width:100%; border-radius:20px;} .imageMap .h...") |
Nils.kurzawa (Talk | contribs) |
||
| (14 intermediate revisions not shown) | |||
| Line 14: | Line 14: | ||
.imageMap a.p4 {height: 46%;left: 30.4%;top: 20%;transform: rotate(18deg);-ms-transform:rotate(18deg); /* IE 9 */ | .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%;} | -webkit-transform:rotate(18deg); /* Safari and Chrome */width: 6.3%;} | ||
| - | .imageMap a.p5 {height: 28%;left: 36. | + | .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%;} | -webkit-transform:rotate(-8deg); /* Safari and Chrome */width: 4.3%;} | ||
| - | .imageMap a.p6 {height: 38%;left: 42 | + | .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%;} | -webkit-transform:rotate(23deg); /* Safari and Chrome */width: 5.6%;} | ||
| - | .imageMap a.p7 {height: 46%;left: | + | .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%;} | -webkit-transform:rotate(-27deg); /* Safari and Chrome */width: 6.3%;} | ||
| - | .imageMap a.p8 {height: 57%;left: 56. | + | .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%;} | -webkit-transform:rotate(23.5deg); /* Safari and Chrome */width: 8%;} | ||
| - | .imageMap a.p9 {height: 28%;left: 64. | + | .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%;} | -webkit-transform:rotate(-45deg); /* Safari and Chrome */width: 4%;} | ||
| - | .imageMap a.p10 {height: 28.5%;left: | + | .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%;} | -webkit-transform:rotate(22deg); /* Safari and Chrome */width: 4.1%;} | ||
| - | .imageMap a.p11 {height: 46%;left: 73 | + | .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%;} | -webkit-transform:rotate(-18deg); /* Safari and Chrome */width: 6.3%;} | ||
| - | .imageMap a.p12{height: 41%;left: | + | .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%;} | -webkit-transform:rotate(24.5deg); /* Safari and Chrome */width: 5.6%;} | ||
| - | .imageMap a.p13{height: 29%;left: | + | .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%;} | -webkit-transform:rotate(40deg); /* Safari and Chrome */width: 4%;} | ||
| - | .imageMap a.p14{height: 29%;left: 92. | + | .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 */ | |
| + | -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:hover .hotspots {visibility:visible;} | .imageMap:hover .hotspots {visibility:visible;} | ||
| Line 55: | Line 58: | ||
.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) | + | .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 61: | Line 64: | ||
<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 129: | Line 133: | ||
<div title="Sigma Aldrich"> | <div title="Sigma Aldrich"> | ||
<a class="p14" aria-haspopup="false" rel="nofollow" href="http://sigmaaldrich.com"></a> | <a class="p14" aria-haspopup="false" rel="nofollow" href="http://sigmaaldrich.com"></a> | ||
| + | </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 136: | Line 150: | ||
<div> | <div> | ||
<script src="https://2013.igem.org/Team:Heidelberg/Templates/jquery-js?action=raw&ctype=text/javascript"></script> | <script src="https://2013.igem.org/Team:Heidelberg/Templates/jquery-js?action=raw&ctype=text/javascript"></script> | ||
| - | + | <script src="https://2013.igem.org/Team:Heidelberg/Templates/bootstrapjs?action=raw&ctype=text/javascript"></script> | |
| - | <script src="https://2013.igem.org/Team:Heidelberg/Templates/holderjs?action=raw&ctype=text/javascript"></script | + | <script src="https://2013.igem.org/Team:Heidelberg/Templates/holderjs?action=raw&ctype=text/javascript"></script> |
<script src="https://2013.igem.org/Team:Heidelberg/Templates/easing-js?action=raw&ctype=text/javascript"></script> | <script src="https://2013.igem.org/Team:Heidelberg/Templates/easing-js?action=raw&ctype=text/javascript"></script> | ||
<script src="https://2013.igem.org/Team:Heidelberg/Templates/kwicks.js?action=raw&ctype=text/javascript"></script> | <script src="https://2013.igem.org/Team:Heidelberg/Templates/kwicks.js?action=raw&ctype=text/javascript"></script> | ||
| Line 143: | Line 157: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(function() { | $(function() { | ||
| - | $('. | + | $('.carousel').carousel(); |
| + | $('.jumbotron').hide(); | ||
| + | $('#overview').show(); | ||
$('#panel-1').click(function(){ | $('#panel-1').click(function(){ | ||
| + | $('.jumbotron').hide(); | ||
$('#overview').show(); | $('#overview').show(); | ||
| + | }); | ||
| + | $('#panel-2').click(function(){ | ||
| + | $('.jumbotron').hide(); | ||
| + | $('#gold').show(); | ||
| + | }); | ||
| + | $('#panel-3').click(function(){ | ||
| + | $('.jumbotron').hide(); | ||
| + | $('#modules').show(); | ||
| + | }); | ||
| + | $('#panel-4').click(function(){ | ||
| + | $('.jumbotron').hide(); | ||
| + | $('#tag').show(); | ||
| + | }); | ||
| + | $('#panel-5').click(function(){ | ||
| + | $('.jumbotron').hide(); | ||
| + | $('#soft').show(); | ||
| + | }); | ||
| + | $('#panel-6').click(function(){ | ||
| + | $('.jumbotron').hide(); | ||
| + | $('#model').show(); | ||
| + | }); | ||
| + | $('#panel-7').click(function(){ | ||
| + | $('.jumbotron').hide(); | ||
| + | $('#hp').show(); | ||
| + | }); | ||
| + | $('#panel-8').click(function(){ | ||
| + | $('.jumbotron').hide(); | ||
| + | $('#results').show(); | ||
}); | }); | ||
$('.kwicks').kwicks({ | $('.kwicks').kwicks({ | ||
| - | maxSize : | + | maxSize : "250px", |
spacing : 5, | spacing : 5, | ||
behavior: 'menu' | behavior: 'menu' | ||
}); | }); | ||
| - | + | ||
var items = $('.item'); | var items = $('.item'); | ||
for (var i = 0; i < items.length; ++i) { | for (var i = 0; i < items.length; ++i) { | ||
| Line 165: | Line 210: | ||
function () { | function () { | ||
var $this = $(this); | var $this = $(this); | ||
| - | $this.find('img').stop().animate({ | + | $this.find('img.circle').stop().animate({ |
| - | 'width' :' | + | 'width' :'320px', |
| - | 'height' :' | + | 'height' :'320px', |
// 'top' :'0 px', | // 'top' :'0 px', | ||
'left' :'-124px', | 'left' :'-124px', | ||
| Line 179: | Line 224: | ||
var $this = $(this); | var $this = $(this); | ||
$this.find('ul').fadeOut(500); | $this.find('ul').fadeOut(500); | ||
| - | $this.find('img').stop().animate({ | + | $this.find('img.circle').stop().animate({ |
'width' :'52px', | 'width' :'52px', | ||
'height' :'52px', | 'height' :'52px', | ||
Latest revision as of 20:37, 28 October 2013
