Menu
I'm trying to map all the numbers in the image below, which I've done. But now I want to dynamically resize the image and map according to the window's width.
Here's the relevant html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>20 Keys</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<!-- Start of first page: #home-->
<div data-role="page" id="home" data-theme="b">
<div data-role="header">
<img src="images/20keyslogo.jpg" width="100%">
</div><!-- /header -->
<div class="white" data-role="content" data-theme="b">
<img id="imageMaps" src="images/20keys.jpg" usemap="#20Keys" width="100%" alt="Select Key" border="0"/>
<map id="20Keys" name="20Keys">
<area shape="circle" alt="Key 1" title="" coords="41,54,31" href="" target="" />
<area shape="circle" alt="Key 2" title="" coords="41,543,31" href="" target="" />
<area shape="circle" alt="Key 3" title="" coords="538,543,31" href="" target="" />
<area shape="circle" alt="Key 4" title="" coords="499,293,31" href="" target="" />
<area shape="circle" alt="Key 5" title="" coords="484,213,31" href="" target="" />
<area shape="circle" alt="Key 6" title="" coords="79,293,31" href="" target="" />
<area shape="circle" alt="Key 7" title="" coords="141,145,31" href="" target="" />
<area shape="circle" alt="Key 8" title="" coords="483,374,31" href="" target="" />
<area shape="circle" alt="Key 9" title="" coords="209,99,31" href="" target="" />
<area shape="circle" alt="Key 10" title="" coords="290,504,31" href="" target="" />
<area shape="circle" alt="Key 11" title="" coords="289,83,31" href="" target="" />
<area shape="circle" alt="Key 12" title="" coords="370,99,31" href="" target="" />
<area shape="circle" alt="Key 13" title="" coords="370,488,31" href="" target="" />
<area shape="circle" alt="Key 14" title="" coords="95,213,31" href="" target="" />
<area shape="circle" alt="Key 15" title="" coords="438,442,31" href="" target="" />
<area shape="circle" alt="Key 16" title="" coords="438,145,31" href="" target="" />
<area shape="circle" alt="Key 17" title="" coords="95,374,31" href="" target="" />
<area shape="circle" alt="Key 18" title="" coords="141,442,31" href="" target="" />
<area shape="circle" alt="Key 19" title="" coords="209,488,31" href="" target="" />
<area shape="circle" alt="Key 20" title="" coords="538,45,31" href="" target="" />
</map>
<p><a href="#two" data-role="button">Interactions between any two keys</a></p>
<p><a href="#about" data-role="button">About 20 Keys</a></p>
<p><a href="http://www.20keysglobal.com" data-role="button">Visit International 20 Keys Website</a></p>
<p><a href="#register" data-role="button" data-rel="dialog" data-transition="pop">Register for Pro Version</a></p>
<p><a href="mailto:[email protected]" data-role="button">Make Suggestion for Improvement</a></p>
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<p class="margin">
<a href="#home" data-rel="back" data-role="button" data-inline="true" data-icon="gear">Settings</a>
</p>
</div><!-- /footer -->
</div><!-- /page one -->
And here's the javascript I used from the best answer in Dynamically resizing Image-maps and images (thanks Teemo):
window.onload = function () {
var ImageMap = function (map) {
var n,
areas = map.getElementsByTagName('area'),
len = areas.length,
coords = [],
previousWidth = 604;
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('20Keys'));
imageMap.resize();
return;
}
The image and map does resize on according to the window width but unfortunately not as perfectly as I'd like it to. Only the first Key actually resizes perfectly when the window resizes. For the rest, the further away from the top left the more inaccurate it is.
I've already changed the image to be a perfect square in hope that it'll fix the problem but it hasn't.
I'm not too experienced in javascript, and my math skills aren't what they used to be. All help will be appreciated. Thank you in advance.
973
Making Images Responsive Open your stylesheet in the Stylesheet EditorTip: In the Advanced Stylesheet Editor, use the filter to get to your image elements (or 'hotspots'): Select the img element. Expand the Unclassified property and set the max-width to 100%
In short - it is part of both specs and is not deprecated.
The bottom line is that if you want or need to use an image map, they are still a part of the standard, and they do have valid uses. Just try to make them as accessible and easy to use as you can.
The <area> tag of HTML image maps requires a set of coordinates that become the boundary box of a clickable element on an image map. The <area> tag supports three different shapes natively: rectangle, circle, and polygon.
The image will resize to 50% but the image map will stay where it is, I am guessing this is because the imagemap areas like you showed in your layer diagram in yesterday's blog post is a separate image if I understood correctly. And i never use jsfiddle to test it or anything, thats just to share it here.
How to resize an image? 1. Click on the "Select Image" button to select an image. 2. Enter a new target size for your image. 3.
I think this is what you want to do. mapScale is designed to automatically change an imagemap to match the size of an image that you've set in advance through CSS. It sounds like you want to do something a little different - match the size of the image to the user's screen. You need to first detect the size and then use resize to change it.
Maintaining high degree of accuracy in circle cropping, using the mathematical expressions. just upload an image and drag the crop circle to desired location in the image, then do the circle cropping.
Probably the width of the image is not 100% of the body.
Instead of calculating the scale (x) with document.body.clientWidth, use the offsetWidth of the image:
x = img.offsetWidth / previousWidth;
:
previousWidth = img.offsetWidth;
A live demo at jsFiddle.
Notice, that the aspect ratio of the image doesn't need to be 1:1, the scale is the same for both directions, as long as you keep the original ratio of the image.
(The original code is maybe too much binded to the original question, rather than being a generic multi-purpose map resizer.)
157
You might find this little project of mine helpful, as a more generic solution, that also copes with non-fixed aspect ratios and multiple ImageMaps on the page.
https://github.com/davidjbradshaw/imagemap-resizer
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
