Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically resizing Image-maps and images

I'm currently trying to make an Image-Map on my site that will resize depending on the size of the window... I was wondering if there was anyway to do this with HTML or will I have to do this with Javascript or another language.

<div style="text-align:center; width:1920px; margin-left:auto; margin-right:auto;"> <img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="1920" height="1080" alt="" /> <map id="_Image-Maps_5201211070133251" name="Image-Maps_5201211070133251"> <area shape="poly" coords="737,116,1149,118,944,473," href="http://essper.bandcamp.com" alt="Bandcamp" title="Bandcamp"   /> <area shape="poly" coords="1006,589,1418,590,1211,945," href="http://soundcloud.com/essper" alt="Soundcloud" title="Soundcloud"   /> <area shape="poly" coords="502,590,910,591,708,944," href="http://facebook.com/the.essper" alt="Facebook" title="Facebook"   /> </map> 

like image 385
ultrazoid Avatar asked Nov 10 '12 10:11

ultrazoid


People also ask

Can an image map be responsive?

Image maps, however, are not natively responsive. That means that if the image scale needs adjustments due to a browser's window being resized or the page being viewed on a mobile device, the image map and its clickable area will not scale down with the screen size.

Are image maps deprecated?

In short - it is part of both specs and is not deprecated.

What is image map in multimedia?

In Web page development, an image map is a graphic image defined so that a user can click on different areas of the image and be linked to different destinations.


2 Answers

I wrote a small little lib to keep an imageMap scaled to a resizable image, so the map stays in sync as the image scales. Useful when you want to map a percentage scaled image etc.

It can be used with or without jQuery.

https://github.com/davidjbradshaw/imagemap-resizer

and you can see it working at.

http://davidjbradshaw.com/imagemap-resizer/example/

like image 182
David Bradshaw Avatar answered Sep 21 '22 16:09

David Bradshaw


If you end up to do the task with JavaScript, here is a cross-browser codesnippet to resize all areas in MAP element.

window.onload = function () {     var ImageMap = function (map) {             var n,                 areas = map.getElementsByTagName('area'),                 len = areas.length,                 coords = [],                 previousWidth = 1920;             for (n = 0; n < len; n++) {                 coords[n] = areas[n].coords.split(',');             }             this.resize = function () {                 var n, m, clen,                     x = document.body.clientWidth / previousWidth;                 for (n = 0; n < len; n++) {                     clen = coords[n].length;                     for (m = 0; m < clen; m++) {                         coords[n][m] *= x;                     }                     areas[n].coords = coords[n].join(',');                 }                 previousWidth = document.body.clientWidth;                 return true;             };             window.onresize = this.resize;         },         imageMap = new ImageMap(document.getElementById('map_ID'));     imageMap.resize(); } 

previousWidth must be equal to the width of the original image. You also need to use some relative units in HTML:

<div style="width:100%;"> <img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="100%" alt="" /> 

Working demo at jsFiddle. If you open the fiddle in IE, you can actually see AREAs when clicking them.

like image 26
Teemu Avatar answered Sep 20 '22 16:09

Teemu