Dynamic Image Map that works when window is resized

Last time i was creating an image map in my website and found my self into a state where image was dynamically resized by browser to fit it into the space. But it created a problem in the image map. Coordinates of Image Map were same as before, while image was resized by the browser. In such a situation i need my image map coordinates to be changed dynamically.
I tried to find a solution to this problem and found that i am not alone facing this problem. Finally i found a solution called dynamic image map. This technique need some java script to be implemented with your image map. This technique is not a tough one. Just follow the following steps.

How to create a dynamic image map with javascript

  • Copy the following code

!function(){"use strict";function a(){function a(){function a(a){function c(a){return a*b[1===(d=1-d)?"width":"height"]}var d=0;return a.split(",").map(Number).map(c).map(Math.floor).join(",")}for(var b={width:h.width/i.width,height:h.height/i.height},c=0;f>c;c++)e[c].coords=a(g[c])}function b(){i.onload=function(){(h.width!==i.width||h.height!==i.height)&&a()},i.src=h.src}function c(){function b(){clearTimeout(j),j=setTimeout(a,250)}window.addEventListener?window.addEventListener("resize",b,!1):window.attachEvent&&window.attachEvent("onresize",b)}var d=this,e=d.getElementsByTagName("area"),f=e.length,g=Array.prototype.map.call(e,function(a){return a.coords}),h=document.querySelector('img[usemap="#'+d.name+'"]'),i=new Image,j=null;b(),c()}window.imageMapResize=function(b){function c(b){if("MAP"!==b.tagName)throw new TypeError("Expected <MAP> tag, found <"+b.tagName+">.");a.call(b)}Array.prototype.forEach.call(document.querySelectorAll(b||"map"),c)},"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a)})}();

  • Paste it in a blank notepad
  • Save that notepad as MapResizer.js
  • Upload it on your website server. (If you don't have file uploading access, then use yourjavascript.com to upload that file and get its url in your email). You will need the URL of MapResizer.js in the next step.
  • After </map> paste the following code in your HTML document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="Paste complete url of mapresizer.js" type="text/javascript"></script>
 <script type="text/javascript">

No comments:

Post a Comment