Use <map> tag in a responsive image

Asked

Viewed 1,139 times

1

Good night,

I need to link a piece of an image, but this link has to work responsibly. When I view the page on a mobile phone, I miss the mapping.

What’s the best way to do that?

What did I do? In the following link, there is a way to do the mapping, but I didn’t understand how to apply on my page. http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

html5 css3

1 answer

1

It is necessary to use the jQuery bitlioteca (such as Google) for the plugin to work.
Then you can add the referenced mapping library of the Github

Enter the two libraries before the tag closes </head> of your website:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js"></script>

And then already into the <body> add the remaining code, pointing to the desired element:

$(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>
<script type="text/javascript" src="https://rawgit.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js"></script>

<img class="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 is also an example in jsFiddle where you can drag the edges of the results window for a better view of the demo.

  • @Chun, thanks for the help. But when I test on my mobile phone for example, the mapped area stops working. What I mean is this: Normal size, okay. When reducing, the marked point is fixed... I need to make it responsive, to follow the image reduction. In the example I put on Fiddle [https://jsfiddle.net/z2zyhefw/], I cannot make the sun always marked, regardless of the image.

  • Complementing the information, there is a difference between our codes. I need to use the class img-responsive to reduce or enlarge the image, according to the device.

  • @Hebertrichard I tested on my mobile and is working properly. Yes, it’s likely that the codes don’t match, I don’t know what your code was because you didn’t add it to your question, so I created an example sketch. But just change the class .minhaImg to the desired class. Here is another example

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.