admin管理员组文章数量:1336320
I'm trying to create a responsive image map. It works perfectly when its in desktop mode but when i'm changing to mobile mode the hyperlink does not work anymore .I checked few videos and read online since yesterday but still can not find out where is the problem .Any help will be appreciated in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Responsive Image Maps </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="../../js/ios-orientationchange-fix.min.js"></script>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
}
img {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
</style>
</head>
<body>
<img src="test.jpg" usemap="#image-map">
<map name="#image-map">
<area alt="" title="" href="#" shape="rect" coords="915,1856,1012,1953" style="outline:none;" target="_self" />
<area alt="" title="" href="tel:513-442-7777" shape="rect" coords="1045,1859,1142,1956" style="outline:none;" target="_self" />
<area alt="" title="" href="mailto:[email protected]" shape="rect" coords="1176,1856,1273,1953" style="outline:none;" target="_self" />
</map>
<script src=".10.2/jquery.min.js"></script>
<script src="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>I'm trying to create a responsive image map. It works perfectly when its in desktop mode but when i'm changing to mobile mode the hyperlink does not work anymore .I checked few videos and read online since yesterday but still can not find out where is the problem .Any help will be appreciated in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Responsive Image Maps </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="../../js/ios-orientationchange-fix.min.js"></script>
<style>
body {
font-family: Helvetica, Arial, sans-serif;
}
img {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
</style>
</head>
<body>
<img src="test.jpg" usemap="#image-map">
<map name="#image-map">
<area alt="" title="" href="#" shape="rect" coords="915,1856,1012,1953" style="outline:none;" target="_self" />
<area alt="" title="" href="tel:513-442-7777" shape="rect" coords="1045,1859,1142,1956" style="outline:none;" target="_self" />
<area alt="" title="" href="mailto:[email protected]" shape="rect" coords="1176,1856,1273,1953" style="outline:none;" target="_self" />
</map>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="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>- You may have made the image responsive, but the coordinates for the map are static and that's why they don't work properly when the map size changes. You may want to consider ditching the image map in favor of Geolocation links. – Scott Marcus Commented Apr 9, 2018 at 1:38
- Thank you @ScottMarcus for taking your time to answer my question.I'm new in web designing can you explain me a bit more .Like whats Geolocation links ? – marie Commented Apr 9, 2018 at 1:41
-
1
Alternately, you could use invisible
<a>elements over the picture, absolutely positioned by percentage. That way as the page/image scales so too would the links. – Alexander Nied Commented Apr 9, 2018 at 2:03 - @AlexanderNied if i use <a> tag it will target everything no? – marie Commented Apr 9, 2018 at 2:05
- if i use <a> tag it will target everything no? -- Well, to do that plan, you would use specific ID's in order to appropriately target the element with CSS to size and position it over the target. Is that what you are asking? – Alexander Nied Commented Apr 9, 2018 at 3:42
1 Answer
Reset to default 5This can be acplished with a simple, old-school responsive image and floating anchors sized and positioned in percentages. Try loading the below snippet at a few different screen widths. You'll see the floating anchor with a red border hovering over Jupiter at all screen widths-- the picture grows and shrinks with the viewport, and the link adjusts its dimensions accordingly.
#wrapper {
width: 100%;
max-width: 812px; /*actual width of image-- behaves strangely if exceeding this*/
position: relative;
}
#wrapper img {
max-width: 100%;
}
#anchor-jupiter {
border: 1px solid red;
height: 44%;
width: 17%;
position: absolute;
left: 39.75%;
top: 50%;
}<div id="wrapper">
<img src="https://i.sstatic/myS74.png" />
<a id="anchor-jupiter" href="https://en.wikipedia/wiki/Jupiter" target="_blank"></a>
</div>Remove the border, and you have something that behaves a lot like an image map, but is fully configurable with CSS and able to be made responsive:
#wrapper {
width: 100%;
max-width: 812px; /*actual width of image-- behaves strangely if exceeding this*/
position: relative;
}
#wrapper img {
max-width: 100%;
}
#anchor-jupiter {
height: 44%;
width: 17%;
position: absolute;
left: 39.75%;
top: 50%;
}<div id="wrapper">
<img src="https://i.sstatic/myS74.png" />
<a id="anchor-jupiter" href="https://en.wikipedia/wiki/Jupiter" target="_blank"></a>
</div>Now, you lose a few things from image maps with this approach-- since you are using anchors sized with CSS, you don't have full SVG-like shape support that you have with image maps. However, you have some limited shape support with CSS.
Also, note that there are newer formats for responsive images available -- although you would have to check browser support and provide fallbacks.
本文标签： javascripthow to make an image map responsiveStack Overflow
版权声明：本文标题：javascript - how to make an image map responsive? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742390960a2465981.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论