How to create an adaptive image map?
Is it possible to create an image map (using <map> and <area>) to make certain areas of an image become hotspots and the image (and map) respond well to size changes and adapt to the screen?
For example, in this image map you can click on both the circle and the square:
<map name="mapa">
<area shape="circle" coords="125,125,50" href="javascript:alert('Círculo')" />
<area shape="rectangle" coords="325,75,425,175" href="javascript:alert('Cuadrado')" />
</map>
<img src="http://i.stack.imgur.com/GvHyu.png" usemap="#mapa" />Now, if I change the image and make it fit 100% of the width, the map areas fail:
<map name="mapa">
<area shape="circle" coords="125,125,50" href="javascript:alert('Círculo')" />
<area shape="rectangle" coords="325,75,425,175" href="javascript:alert('Cuadrado')" />
</map>
<img src="http://i.stack.imgur.com/GvHyu.png" usemap="#mapa" style="width:100%" />How can you make the map areas fit like the image? Is there any better alternative than using maps (without any restriction: you could change the HTML structure, the CSS, add JavaScript, SVG...)?
3 answers
Complementing Philippe's answer, you could make use of some plugin like jQuery RWD Image Maps , which allows you to recalculate the coordinates of the map area and be able to adapt to the size of the window.
<!DOCTYPE html>
<!-- saved from url=(0082)http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#buttercup -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Responsive Image Maps jQuery Plugin</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">
<script src="./Responsive Image Maps jQuery Plugin_files/ios-orientationchange-fix.min.js"></script>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 20px;
}
div {
width: 100%;
}
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
</style>
</head>
<body>
<div>
<h1>Responsive Image Maps jQuery Plugin</h1>
<p>Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize.</p>
<p><a href="https://github.com/stowball/jQuery-rwdImageMaps">Download the plugin from github</a></p>
<p>This image map was created in minutes with Adobe Fireworks.</p>
<img src="http://mattstow.com/experiment/responsive-image-maps/powerpuff-girls.fw.jpg" width="1024" height="768" usemap="#powerpuffgirls" alt="">
<map name="powerpuffgirls">
<area shape="poly" coords="122,36,281,36,285,37,287,39,289,42,289,46,289,48,278,77,276,81,274,84,271,84,218,84,218,90,210,90,208,95,207,99,204,100,72,100,26,87,23,84,20,81,19,75,35,40,37,37,43,34,62,34,65,30,68,25,72,25,115,25,119,27,121,30,122,36,122,36" href="#" title="The Powerpuff Girls" alt="The Powerpuff Girls">
<area shape="poly" coords="864,667,912,649,922,667,971,667,973,718,981,721,985,729,988,730,1010,730,1010,742,833,742,833,730,865,730,865,721,874,721,874,718,864,667,864,667" href="#" title="Cartoon Network" alt="Cartoon Network">
<area shape="poly" coords="1010,297,995,281,979,267,962,255,944,248,927,242,909,237,876,236,857,237,838,240,817,246,797,255,778,266,761,281,746,299,735,321,730,335,728,345,726,348,721,348,709,344,711,360,718,378,708,380,697,388,688,397,685,403,685,411,686,418,691,424,698,429,707,430,735,426,743,427,752,433,762,444,774,454,798,469,787,483,779,481,772,481,761,486,753,495,747,505,746,516,746,520,748,526,751,532,759,538,741,561,734,571,732,583,733,591,737,598,744,604,754,607,765,604,776,597,797,570,817,543,857,487,865,487,893,487,910,484,924,483,930,483,935,484,939,490,934,496,931,501,929,505,932,514,938,519,945,522,954,523,966,520,979,516,985,511,989,507,993,499,994,493,991,484,986,475,967,463,982,454,998,439,1013,424,1024,409,1024,329,1017,312,1010,297,1010,297" href="#" title="Buttercup" alt="Buttercup">
<area shape="poly" coords="571,100,563,83,562,66,549,80,541,96,537,112,536,127,537,141,531,141,508,141,508,141,511,133,517,126,533,114,500,111,476,111,452,114,438,118,424,124,410,130,400,139,392,151,390,166,391,174,394,183,400,190,409,198,391,215,379,234,371,252,368,270,367,276,368,297,371,315,381,338,396,357,414,375,399,378,387,385,379,393,377,405,378,412,382,418,388,424,395,429,411,433,425,435,431,445,439,456,459,474,480,487,502,499,514,507,523,514,528,523,530,534,529,541,526,547,515,562,532,556,548,547,562,535,574,523,583,508,590,490,594,469,596,448,596,430,591,409,587,397,599,390,613,381,628,371,643,356,657,336,666,312,669,299,670,284,669,276,668,264,670,263,697,263,704,261,711,257,716,251,719,243,718,236,715,231,706,221,694,215,683,213,677,213,670,215,664,219,656,231,645,215,652,206,657,198,660,190,662,181,660,169,655,157,648,150,638,142,617,130,596,120,582,112,571,100,571,100" href="#" title="Blossom" alt="Blossom">
<area shape="poly" coords="254,285,232,270,207,260,179,254,150,252,119,254,103,257,88,263,71,270,61,275,58,273,57,273,45,269,36,267,17,270,7,276,1,282,0,282,0,285,0,290,0,351,2,354,1,354,1,390,3,400,5,409,9,420,22,441,39,460,58,475,47,480,38,487,32,493,30,504,33,514,41,523,53,531,69,534,77,532,85,529,90,525,93,517,91,511,88,508,85,505,85,502,86,499,89,496,97,496,120,499,138,502,154,502,167,502,185,531,215,576,235,609,241,616,248,622,255,625,265,628,273,625,280,621,285,613,287,604,283,592,276,580,261,558,269,553,273,547,276,541,277,535,274,523,267,513,257,504,250,501,244,501,240,502,237,502,225,487,242,478,259,468,276,451,282,447,292,445,318,450,327,448,334,445,339,439,341,430,337,418,329,409,318,400,307,397,301,397,301,393,301,391,303,391,321,393,336,391,352,387,370,380,387,369,373,368,364,363,358,360,353,354,350,347,347,330,345,312,343,302,340,293,336,285,331,279,318,272,305,267,293,266,282,267,272,270,262,276,254,285,254,285" href="#" title="Bubbles" alt="Bubbles">
</map>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
$('area').on('click', function() {
alert($(this).attr('alt') + ' clicked');
});
});
</script>
</body>
</html> The Snippet is taken from here
You could simulate the image map with links and css, I don't know if that's what you need. (you can also see it here https://jsfiddle.net/fvaldelvira/7ov6xmao/)
img {
width:100%;
}
div.container {
position:relative;
}
div.aria-links {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
}
div.aria-links a {
position:absolute;
border:1px solid white;
}
div.aria-links a:hover {
background:rgba(255,255,255,.3);
}
a.link-1 {
top: 48.5%;
left: 15.5%;
width: 10.5%;
height: 20.8%;
border-radius: 46%/16% 17% 10% 8%;
}
a.link-2 {
top: 47%;
left: 51.4%;
width: 10%;
height: 21%;
border-radius: 45% 36% 25% 15%/17% 17% 16% 10%;
transform: skew(2deg, -1deg);
}
a.link-3 {
top: 45%;
right: 4.5%;
width: 10%;
height: 21%;
border-radius: 48% 54% 19% 15%/19% 19% 11% 7%;
}<div class="container">
<div class="aria-links">
<a href="#" class="link-1"></a>
<a href="#" class="link-2"></a>
<a href="#" class="link-3"></a>
</div>
<img src="http://67.media.tumblr.com/c3ca763f82308b9f0dceb603fd19c188/tumblr_n5ozv05dxO1qfirfao1_1280.jpg">
</div>The effect is normal since the area coordinates are in pixels and therefore only apply to an image with Size without deformation (aka without forcing a new size as width=100%)
So if you use a map, you won't be able to adapt it to something responsive. The alternative is SVG for example, in which you can even put the onclicks on each of the elements. I've done a lot of country and world maps this way and it works great with SVG, plus be compatible with all browsers including mobile
There is a lot of literature for SVG:
Http://www.w3schools.com/svg /
Https://www.w3.org/2002/Talks/www2002-svgtut-ih/hwtut.pdf
Http://www.desarrolloweb.com/manuales/29 /
And good just by searching SVG on youtube or google, you will find all the literature, manuals, formats, tutorials etc.
Greetings