Good evening,
I need to link a piece of an image, but this link has to work responsibly. When I view the page on a phone, I lose the mapping.
What is the best way to do this?
What did I do? In the following link, there is a way to do the mapping, but I did not understand how to apply it to my page. link
You need to use the jQuery bitmap library (such as Google ) for the plugin to work. Then you can add the referenced mapping library from GitHub
Insert both libraries before the closing of the </head> tag for your site:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><scripttype="text/javascript" src="https://rawgit.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js"></script>Andthenwithinthe<body>addtheremainingcode,pointingtothedesiredelement:
$(document).ready(function(e) {
$('.minhaImg[usemap]').rwdImageMaps();
});
// código abaixo apenas para teste
$('area').on('click', function() {
alert($(this).attr('alt') + ' clicado!');
});.minhaImg {
width: 500px;
height: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><scripttype="text/javascript" src="https://rawgit.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js"></script><imgclass="minhaImg" src="https://i.stack.imgur.com/1ly6F.gif"width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sol">
<area shape="circle" coords="90,58,3" alt="Mercurio">
<area shape="circle" coords="124,58,8" alt="Venus">
</map>Here's an example on jsFiddle where you can drag the edges of the results window for a better view of the demo