Team:ETH Zurich/slidermapinfo

From 2014.igem.org

(Difference between revisions)
(Created page with "<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 = ...")
 
(18 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
 
+
<img src="https://static.igem.org/mediawiki/2014/5/54/ETH_Zurich_Slider_Slide4.png" usemap="#map1" id="map1"/>
-
<script type="text/javascript">
+
<map id="map1" name="map1"><area shape="rect" alt="" title="" coords="50,68,740,534" href="https://2014.igem.org/Team:ETH_Zurich/project/infopro" target="" /><area shape="rect" alt="" title="" coords="131,541,666,600" href="https://2014.igem.org/Team:ETH_Zurich/modeling/whole" target="" />
-
(function($) {
+
</map>
-
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 =  $(#infopro');
+
-
    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({
+
-
    fillColor: 'ffffff',
+
-
    fillOpacity: 0.5,
+
-
    isSelectable: false,
+
-
    clickNavigate: true,
+
-
  });
+
-
 
+
-
 
+
-
 
+
-
$(window).resize(
+
-
  function()
+
-
  {
+
-
onWindowResize();
+
-
  });
+
-
resize(true);
+
-
 
+
-
});
+
-
 
+
-
</script>
+
-
 
+
-
<img src="https://static.igem.org/mediawiki/2014/5/54/ETH_Zurich_Slider_Slide4.png" usemap="#map" id="map"/>
+
-
<map id="map" name="map"><area shape="rect" alt="" title="" coords="532,2268,2820,2484" href="https://2014.igem.org/Team:ETH_Zurich/modeling/whole" target="" /><area shape="rect" alt="" title="" coords="212,36,3132,2268" href="https://2014.igem.org/Team:ETH_Zurich/project/infopro" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
+
-
 
+
</html>
</html>

Latest revision as of 19:06, 17 October 2014

Retrieved from "http://2014.igem.org/Team:ETH_Zurich/slidermapinfo"