Difference between revisions of "Team:ETH Zurich"

Line 4: Line 4:
  
 
<head>
 
<head>
−
 
 
<meta name="viewport" content="width=device-width" initial-scale=1" />
 
<meta name="viewport" content="width=device-width" initial-scale=1" />
 +
 +
<script> ;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").load(function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);
 +
 +
 +
$(document).ready(function(e) {
 +
    $('img[usemap]').rwdImageMaps();
 +
 +
    $('area').on('click', function(e) {
 +
      e.preventDefault();
 +
      var target = $(this).attr('href');
 +
      var imagemapItems = $('.imagemap__item');
 +
 +
      imagemapItems.hide();
 +
      $(target).show();
 +
      $(target+'> h4').addClass('is-open');
 +
    });
 +
}); </script>
  
 
<style>
 
<style>
Line 25: Line 41:
 
<body>
 
<body>
  
−
<img src="https://static.igem.org/mediawiki/2017/a/a7/Wiki2.png" usemap="#image-map" >
+
<div class="m-imagemap">
 +
<img class="imagemap__img" src="https://static.igem.org/mediawiki/2017/a/a7/Wiki2.png" usemap="#image-map" >
  
  
−
<map name="image-map">
+
<map id="image-map" name="image-map">
 
<area href="https://2017.igem.org/Team:ETH_Zurich/Background" coords="300,1000,30,1100" shape="rect"  border="0">
 
<area href="https://2017.igem.org/Team:ETH_Zurich/Background" coords="300,1000,30,1100" shape="rect"  border="0">
 
<area href="https://2017.igem.org/Team:ETH_Zurich/Description" coords="900,1850,520,1930" shape="rect"  border="0">
 
<area href="https://2017.igem.org/Team:ETH_Zurich/Description" coords="900,1850,520,1930" shape="rect"  border="0">
Line 36: Line 53:
  
  
−
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 
−
<script type="text/javascript" src="../js/imageMapResizer.min.js"></script>
 
−
<script type="text/javascript">
 
−
 
−
$('map').imageMapResize();
 
−
 
−
</script>
 
  
 
</body>
 
</body>

Revision as of 09:36, 3 October 2017