Team:ETH Zurich/lab/overview/overview map

From 2014.igem.org

(Difference between revisions)
(Created page with "<html> <center> <img usemap="#map" id="map" src="https://static.igem.org/mediawiki/2014/c/ce/ETH_Zurich_2014_Lab_overview_new.png" style="width:100%;"/> <map id="map" name="map"><area...")
Line 1: Line 1:
<html>
<html>
 +
<script type="text/javascript">
 +
(function($) {
 +
function img(url) {
 +
var i = new Image;
 +
i.src = url;
 +
return i;
 +
}
 +
 +
if ('naturalWidth' in (new Image)) {
 +
$.fn.naturalWidth = function() { return this[0].naturalWidth; };
 +
$.fn.naturalHeight = function() { return this[0].naturalHeight; };
 +
return;
 +
}
 +
$.fn.naturalWidth = function() { return img(this[0].src).width; };
 +
$.fn.naturalHeight = function() { return img(this[0].src).height; };
 +
})(jQuery);
 +
 +
 +
 +
function onWindowResize()
 +
{
 +
  var curWidth = $(window).width(),
 +
  curHeight = $(window).height(),
 +
  checking=false;
 +
  if (checking) {
 +
      return;
 +
  }
 +
  checking = true;
 +
  window.setTimeout(
 +
    function() {
 +
        var newWidth = $(window).width(),
 +
            newHeight = $(window).height();
 +
        if (!(newWidth !== curWidth ||
 +
            newHeight !== curHeight)) {
 +
            resize(false);
 +
        }
 +
        checking=false;
 +
    }, 300);
 +
}
 +
 +
function resize(initial) {
 +
if (!initial)
 +
{
 +
    var container =  $('#article');
 +
    var imgWidth = container.width();
 +
 +
  $( "#map" ).each(function() {
 +
      $(this).css('height', 'auto', 'width', 'auto');
 +
      $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0); 
 +
  });
 +
}
 +
 +
}
 +
 +
 +
$(document).ready(function(){
 +
 +
$('#map').mapster({
 +
    fillOpacity: 0.5,
 +
    isSelectable: false,
 +
    clickNavigate: true,
 +
    mapKey: 'name',
 +
    areas: [
 +
            {
 +
                key: "qs",
 +
                fillColor: '2C2F3D'
 +
            },
 +
 +
            {
 +
                key: "integrases",
 +
                fillColor: '2C2F3D'
 +
            },
 +
 +
            {
 +
                key: "xor",
 +
                fillColor: '2C2F3D'
 +
            },
 +
 +
            {
 +
                key: "diff",
 +
                fillColor: '2C2F3D'
 +
            },
 +
 +
            {
 +
                key: "cell",
 +
                fillColor: 'FFFFFF'
 +
            }
 +
            ]
 +
  });
 +
 +
 +
 +
 +
$(window).resize(
 +
  function()
 +
  {
 +
onWindowResize();
 +
  });
 +
resize(true);
 +
});
 +
</script>
<center>
<center>
<img usemap="#map" id="map" src="https://static.igem.org/mediawiki/2014/c/ce/ETH_Zurich_2014_Lab_overview_new.png" style="width:100%;"/>
<img usemap="#map" id="map" src="https://static.igem.org/mediawiki/2014/c/ce/ETH_Zurich_2014_Lab_overview_new.png" style="width:100%;"/>

Revision as of 14:55, 15 October 2014