Search code examples
scalabilityimagemap

CSS scalability image map

I have a problem that bothers me for couple days: How can I make to central part of this puzzle image works as a link when I resize browser windows (PC view, tablet view, mobile view...)? I need to link Breed image to work as a link.

<style type="text/css">
.header-images {
display: table;
}

.row {
    display: table-row;
}

.img-01 {
    display: table-cell;
    border: none;
}

.img-02 {
    display: table-cell;
    border: none;
}

.img-03 {
    display: table-cell;
    border: none;
}

.img-04 {
    display: table-cell;
    border: none;
}

.header-images img {
    width: 100%;
    height: auto;
}
</style>
<div class="header-images">
 <div class="row">
  <div class="img-01">
   <a href="home/zuechter"><img src="http://s27.postimg.org/rloi8ejr7/01_en.png" alt=""></a>
  </div>
  <div class="img-02">
   <a href="/home/hundesport"><img src="http://s27.postimg.org/lm0r4qyyr/02_en.png" alt=""></a>
  </div>
 </div>
 <div class="row">
  <div class="img-03">
   <a href="/home/mitglied"><img src="http://s27.postimg.org/6fzarjybn/03_en.png" alt=""></a>
  </div>
  <div class="img-04">
   <a href="/home/jugend"><img src="http://s27.postimg.org/61xyrye83/04_en.png" alt=""></a>
  </div>
 </div>
</div>

Solution

  • I have manage to fix it using Matt Stow plugin. Thank you Matt!