Image Map On background Image-Responsive

Following is the code to use mapping in the responsive background image.
 Code written here is for the rectangular image. First half[50%] of the image is linked to one URL, and another 50%[half] image is linked to another URL.
/* HTML code for imap */

<div id="demo"> 
<a id="link1" title="link1" href="#"></a>
 <a id="link2" title="link2" href="#"></a>
</div>
/* CSS */

#demo{
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-size: 100%;
    background-repeat: no-repeat;
background-image:url(http://www.color-hex.com/palettes/1051.png);
    
}
a#link1, a#link2 {
    overflow: hidden;
    position: absolute;   
}
#link1 {
    left: 0%;
    width: 100%;
    height: 100%;
}
#link2 {
    left: 50%;
    width: 100%;
    height: 100%;    
}

19 thoughts on “Image Map On background Image-Responsive

  1. Pingback: Google
  2. Pingback: doc 5246
  3. Pingback: Lezione 2
  4. Pingback: treadmills
  5. Pingback: 토토검증
  6. Pingback: Cheap FUT Coins
  7. Pingback: flexible vibrator
  8. Pingback: Chicago SEO
  9. Pingback: Detroit SEO

Leave a Reply