Responsive Mapping on Image
- Digital Engineering
Responsive Mapping on Image
If an image’s width is given in % and we change the tab or window’s size it goes compressed or expanded accordingly because of the percentage width. But what about mapping on that image. It can not be given in %. Because its basically a collection of coordinates.
javascript tutorials
I will take an example of a poly area on an image.
<img src=”xx.png” style=”width:100%;” border=”0″ usemap=”#Map” id=”img” />
<map name=”Map”>
<area shape=”poly” id=”ar1″ coords=”107,64,170,65,192,87,
</map>
Basically there is an image with id “img” and on which a poly area is set as a link “xyz.html”.
the coords in the poly area is 107,64,170,65,192,87,196,124,
it is a collection of coordinates as x1,y1, x2,y2, x3,y3 ….., x9,y9
So there are 9 points or edges of that poly area on image which works as a link.
If image’s original width is 1000px and height is 600px and this poly area coordinates are calculated on that size. But as we have not set it in the image’s style attribute and set as 100% width so we will take two javascript variables baseWidth,baseHeight and set values 1000,600 to them. And write the code like below –
<script>
var basepolycoords = document.getElementById(‘ar1’)
function resizefunc()
{
var h = document.getElementById(‘
var w = document.getElementById(‘
var coords = changecoords(basepolycoords,w,
document.getElementById(‘ar1’)
}
function changecoords(coords,newx,newy,
{
var arr = new Array();
arr = coords.split(“,”);
var i=0;
for(i=0;i<arr.length;i++)
{
if(i%2==0)
{
arr[i] = parseInt((newx/oldx)*arr[i]);
}
else
{
arr[i] = parseInt((newy/oldy)*arr[i]);
}
}var str = arr.join();
resizefunc();//called to adjust coords according to its initial window size.
</script>