Привязка панелей табов к ссылкам в виде координат на изображении

by Andrey Dobrovoi

HTML

<div style="width: 420px; margin: 40px auto;">
    <p>Привязка панелей табов к ссылкам в виде координат на изображении. По умолчанию все панели скрыты, открываются по клику на цветные секции изображения</p>
     <div id="test">
<img src="http://s1.hostingkartinok.com/uploads/images/2015/03/5851986e28da3911c6ed692553311ca0.png" usemap="box">
<map name="box">
<area shape="rect" coords="0,0,75,75" href="#box1" title="Красный">
<area shape="rect" coords="0,75,75,150" href="#box2" title="Синий">
<area shape="rect" coords="75,0,150,75" href="#box3" title="Зеленый">
<area shape="rect" coords="75,75,150,150" href="#box4" title="Желтый">
</map>
        <div id="box">
            <div id="box1" class="panel">
                <p>В показателе area в атрибуте href указываете идентификатор к той или иной панели #box1, #box2 и т.д...</p>
             </div>
             <div id="box2" class="panel">
                 Содержание второй панели раскрывается по клику зелёной секции изображения!
            </div>
             <div id="box3" class="panel">
                 Третья панель раскрывается по клику синей части изображения!
            </div>
            <div id="box4" class="panel">
                 Четвёртая  панель раскрывается по клику жёлтой части изображения!
            </div>
         </div>
      </div>
</div>

CSS

* { margin: 0; padding: 0; }
h1 {
  font: 36px Georgia, Serif;
  margin: 20px 0;
}
p {
  margin: 0 0 10px 0;
}
#test {
    position:relative;
    width:100%
}

#box {
    height: auto;
    overflow:hidden;
    position:relative;
    top:-1px;
}

.panel {
    border:1px solid #ccc;
    display:none;
    height:auto;
    overflow:auto;
    padding:10px;
    position:relative;
    overflow-x:hidden
}
#box1:target,#box2:target,#box3:target,#box4:target {
    display:block
}