CODEWITHSUNDEEP
htmlcss
Kesar Sisodiya
Kesar Sisodiya

Reputation: 1624

How to set link on image using maplink in responsive theme?

I am trying to put a link on image through maplink but it is not working with responsive theme. I don't know how to make it responsive. If anybody have some idea plz share.

html

    <img src="http://www.gate7infotech.com/projects/development/MyLuckyBottle/wp-content/themes/twentythirteen/images/home_background.jpg" alt="new" width="100%" border="0" usemap="#Map2" />
<map name="Map2" id="Map2">
  <area shape="poly" coords="691,918,705,756,931,763,910,930,692,920" href="http://youtu.be/zG28Gy6mKO0" target="_self" alt="new-video" />
</map>

    </div>

css

.container{
    width:100%;
    margin:0 auto;
}

Upvotes: 4

Views: 3667

Answers (3)

Netsurfer
Netsurfer

Reputation: 5542

If you use image maps and the image may vary in size, then a pure HTML/CSS solution is not possible!

You have to use some assistent techniques like Javascript.

There is a jQuery plugin which re-calculates the map coordinates according to the image size:
jQuery-rwdImageMaps

But also remember that image maps are hard to recognize on touch devices!
And they are a "nightmare" from the accessibilty point of view.

So the best would be to not use image maps in responsive design!

Upvotes: 0

Alex
Alex

Reputation: 457

if you want to implement responsive design don't use image maps, instead you can use background image and <a> tags position:absolute to div which has image maps. Use percentages for best view in responsive layout.

HTML

<div class="conatiner">
    <a href="#">link</a>
</div>

CSS

.conatiner{
    width:100%;
    background:red;
    height:500px;
    position:relative;
}
.conatiner a{
    position:absolute;
    top:40%;
    left:30%;
}

DEMO

Upvotes: 1

coma
coma

Reputation: 16659

http://jsfiddle.net/coma/gVu5y/

HTML

<div class="map">
    <img src="http://www.gate7infotech.com/projects/development/MyLuckyBottle/wp-content/themes/twentythirteen/images/home_background.jpg"/>
    <a href="#" class="a"></a>
    <a href="#" class="b"></a>
    <a href="#" class="c"></a>
</div>

CSS

div.map {
    position: relative;
}

div.map > img {
    display: block;
    max-width: 100%;
}

div.map > a {
    display: block;
    position: absolute;
}

div.map > a:hover {
    background-color: rgba(255, 0, 0, .5);
}

div.map > a.a {
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;
}

div.map > a.b {
    top: 0;
    left: 50%;
    width: 20%;
    height: 50%;
}

div.map > a.c {
    bottom: 0;
    right: 0;
    width: 20%;
    height: 50%;
}

Upvotes: 5

Related Questions