Q: Link different parts of an image to different urls I'm trying to make a social media page for my website and I would like to have different social media icons link to each of my social media page.  I've tried to use the map tag but the image resolution changes based on browser.  I understand that if I make it an absolute image that it may fix this but using absolute coordinates seems like a very flawed design.  Is there a way of tagging the icons with urls that will stay fixed to the proper position regardless of screen resolution?
This is the image with the icons I was talking about:

Thank you!

A: One solotiun can be use the MAP tag of html (it's cross-browser) and sites like this can help you to get the right coordinate, see this DEMO. But this way it's not realyresponsive then I advice you to use this JQuery plug-in(there is a DEMO) for make <map> tag more responive.


$(document).ready(function(){
    $('img[usemap]').rwdImageMaps();
});
/* You can see that it's responive */
img {
    width: 300px;
    height: 380px;
}
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
</head>
<body>
<img src="http://i.stack.imgur.com/sMtTr.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="" title="instantgram" href="#" shape="rect" coords="77,346,177,447" />
    <area alt="" title="gmail" href="#" shape="rect" coords="203,576,314,683" />
    <area alt="" title="..." href="#" shape="rect" coords="474,579,582,688" />
    <area alt="" title="..." href="#" shape="rect" coords="605,344,716,451" />
    <area alt="" title="..." href="#" shape="rect" coords="471,104,582,216" />
    <area alt="" title="..." href="#" shape="rect" coords="205,106,319,216" />
</map>
</body>
</html>



A: As I mentioned in a comment, this can be done in a nicely responsive manner:
Fiddle demo


#social-wrapper {
  background: #eee;
  width: 50%;
  height: 0;
  padding-bottom: 50%;
  margin: 5% auto;
  border: 5px solid rgba(100, 100, 100, 0.65);
  border-radius: 50%;
  position: relative;
}
.social-icon {
  position: absolute;
  width: 80px;
  height: 80px;
  background: url(http://placehold.it/80x80);
}
.social-icon:nth-child(1) {
  top: calc(8% - 40px);
  left: calc(24% - 40px);
}
.social-icon:nth-child(2) {
  top: calc(8% - 40px);
  left: calc(76% - 40px);
}
.social-icon:nth-child(3) {
  top: calc(50% - 40px);
  left: calc(100% - 40px);
}
.social-icon:nth-child(4) {
  top: calc(92% - 40px);
  left: calc(76% - 40px);
}
.social-icon:nth-child(5) {
  top: calc(92% - 40px);
  left: calc(24% - 40px);
}
.social-icon:nth-child(6) {
  top: calc(50% - 40px);
  left: -40px;
}
<div id="social-wrapper">
  <div class="social-icon"></div>
  <div class="social-icon"></div>
  <div class="social-icon"></div>
  <div class="social-icon"></div>
  <div class="social-icon"></div>
  <div class="social-icon"></div>
</div>


Wrap each icon in an anchor and link it as needed.

A: Hello There Please Check my solution:
HTML
<div class="social_media">
    <a href="" class="social_item">
        <img src="./facebook-256.png" class="sm facebook">
    </a>
    <a href="" class="social_item">
        <img src="./facebook-256.png" class="sm twitter">
    </a>
    <a href="" class="social_item">
        <img src="./facebook-256.png" class="sm tripadvisor">
    </a>
    <a href="" class="social_item">
        <img src="./facebook-256.png" class="sm google">
    </a>
    <a href="" class="social_item">
        <img src="./facebook-256.png" class="sm instagram">
    </a>
    <a href="" class="social_item">
        <img src="./facebook-256.png" class="sm youtube">
    </a>
</div>

Then
CSS
.social_media {
  position: relative;
  width: 15rem;
  height: 15rem;
  box-sizing: border-box;
  margin: 5em auto;
  border: 5px solid rgba(100, 100, 100, 0.65);
  border-radius: 50%;
}

.social_item img {
   text-decoration: none;
   position: absolute;
   font-size: 3rem;
   color: steelblue; 
}

[class*="sm"] {
  width: 3rem;
  height: 3rem; 
}

[class*="facebook"],
[class*="twitter"] {
  top: 0px;
}

[class*="instagram"],
[class*="tripadvisor"] {
  top: calc(15rem / 2 - 3rem / 2);
}

[class*="instagram"] {
  left: calc(-3rem / 2); 
}

[class*="tripadvisor"] {
  left: calc(15rem - 3rem / 2); 
}

[class*="google"],
[class*="youtube"] {
  top: calc(15rem - 3rem); 
}

[class*="facebook"],
[class*="youtube"] {
  left: calc((15rem - 3rem) - (3rem / 2));
}

[class*="twitter"],
[class*="google"] {
  left: calc(3rem / 2);
}

Once you have this in place you will get something like this:

To finalize it:
The only changes you have to do is change the img src="./facebook-256.png" for the corresponding social media logo, also add your social media link in the a href="" 
Thanks T04435
