|
|
| (6 intermediate revisions not shown) |
| 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 = $('#container1');
| |
| - | var imgWidth = container.width();
| |
| - |
| |
| - | $( "#map1").each(function() {
| |
| - | $(this).css('height', 'auto', 'width', 'auto');
| |
| - | $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0);
| |
| - | });
| |
| - |
| |
| - | container = $('#container2');
| |
| - | imgWidth = container.width();
| |
| - |
| |
| - | $( "#map2").each(function() {
| |
| - | $(this).css('height', 'auto', 'width', 'auto');
| |
| - | $(this).mapster('resize',Math.min(imgWidth, $(this).naturalWidth()) ,0,0);
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | }
| |
| - |
| |
| - | $(document).ready(function(){
| |
| - |
| |
| - | $('#map1').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="#map1" id="map1"/> | | <img src="https://static.igem.org/mediawiki/2014/5/54/ETH_Zurich_Slider_Slide4.png" usemap="#map1" id="map1"/> |
| - | <map id="map1" name="map1"><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="" /> | + | <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="" /> |
| | </map> | | </map> |
| - |
| |
| | </html> | | </html> |
"
