CODEWITHSUNDEEP
htmlcssimage
James Lee
James Lee

Reputation: 45

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:

enter image description here

Thank you!

Upvotes: 4

Views: 7893

Answers (3)

isherwood
isherwood

Reputation: 61063

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.

Upvotes: 1

T04435
T04435

Reputation: 13992

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:

enter image description here

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

Upvotes: 0

paolobasso
paolobasso

Reputation: 2018

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="https://i.sstatic.net/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>

Upvotes: 5

Related Questions