Код:

<div id="pun-main" class="main pages">
	<div class="section">
<h1><span>Статистическая карта США</span></h1>
<div class="container">
<div id="picture">
 <div id="mt" class="more"><a href="#"><img src="http://sa.uploads.ru/VTrub.png"></a><span>Монтана</span></div>
<div id="ma" class="more"><a href="#"><img src="http://sa.uploads.ru/VTrub.png"></a><span>Массачусетс</span></div>
<div id="ar" class="more"><a href="#"><img src="http://sa.uploads.ru/VTrub.png"></a><span>Арканзас</span></div>
<div id="va" class="more"><a href="#"><img src="http://sa.uploads.ru/VTrub.png"></a><span>Вирджиния</span></div>
<div id="fl" class="more"><a href="#"><img src="http://sa.uploads.ru/VTrub.png"></a><span>Флорида</span></div>
<div id="tx" class="more"><a href="#"><img src="http://sa.uploads.ru/VTrub.png"></a><span>Техас</span></div>
<div id="ca" class="more"><a href="#"><img src="http://sa.uploads.ru/VTrub.png"></a><span>Калифорния</span></div>
 <div id="infobox" style="bottom: -460px;">
   <span class="close"><a href="#"><img src="http://sc.uploads.ru/uoFWl.png"></a></span>
   <br>
   <div id="mt_info">

<img src="http://sc.uploads.ru/wUjQp.jpg" alt="" /><br /><span style="text-decoration: underline;"><strong>Монтана</strong></span><br />Площадь: 381 154 км²<br />Население: ок. 1 006 000 чел.<br /> Блаблаблаблаблаблаблаблаблаблаблабла.

   </div>
   
   <div id="ma_info">

<img src="http://s1.uploads.ru/i/yt1Ir.jpg" alt="" /> <br /> <span style="text-decoration: underline;"><strong>Массачусетс</strong></span><br />Площадь: 27 336 км²<br />Население: ок. 6 588 000 чел.<br />Блаблаблаблаблаблаблаблаблабла!
   </div>

   <div id="ar_info">

<img src="http://sa.uploads.ru/pmEw6.jpg" alt="" /><br /> <span style="text-decoration: underline;"><strong>Арканзас</strong></span><br /> Площадь: 137 732 км²<br />ок. 2 938 000 чел.<br /> Блаблаблаблаблаблаблаблаблаблабла!

   </div>
   <div id="va_info">

<img src="http://sa.uploads.ru/8qxYv.jpg" alt="" /> <br /> <span style="text-decoration: underline;"><strong>Вирджиния</strong></span><br /> <br />Площадь: 110 785 км² <br />Население: ок. 8 200 000 чел.<br />Блаблаблаблаблаблаблаблаблаблабла.

   </div>
   <div id="fl_info">

<img src="http://sb.uploads.ru/da4OU.jpg" alt="" /> <br /> <span style="text-decoration: underline;"><strong>Флорида</strong></span><br /> <br />Площадь: 170 304 км²<br />Население: ок. 19 318 000 чел.<br /> Блаблаблаблаблаблаблаблаблаблаблабла!

   </div>
   <div id="tx_info">

<img src="http://sb.uploads.ru/cGvjf.jpg" alt="штат Техас" /><br /> <span style="text-decoration: underline;"><strong>Техас</strong></span><br />Площадь: 696 241 км² <br />Население: ок. 25 700 000 чел.<br />Блаблаблаблаблаблаблаблаблаблаблаблабла.

   </div>
   <div id="ca_info">

<img src="http://sa.uploads.ru/ovbPu.jpg" alt="" /> <br /> <span style="text-decoration: underline;"><strong>Калифорния</strong></span> <br /> Площадь: 423 970 км²<br/>Население: ок. 37 692 000<br/>Блаблаблаблаблаблаблаблаблаблабла.

   </div>
 </div>
 <div id="fade_bg">&nbsp;</div>
</div>


<script type="text/javascript">
$(document).ready(function(){
  $('a').click(function() { 
      this.blur(); 
  }); 

  $(".more a").click(function(){  
    $("#infobox").animate({bottom: '26px' }, 300);  
    $("#fade_bg").fadeIn(); 
    return false; 
  });

  $(".more").hover(function(){ 
     $(this).stop().animate({width: '155px' }, 100).css({'z-index' : '10'}); 
     }, function () { 
     $(this).stop().animate({width: '38px' }, 200).css({'z-index' : '1'}); 
  });  

  $("#mt a").click(function(){ 
     $("#mt_info").show(); 
  });  
  $("#ma a").click(function(){ 
     $("#ma_info").show(); 
  });  
  $("#ar a").click(function(){ 
     $("#ar_info").show(); 
  });  
  $("#va a").click(function(){ 
     $("#va_info").show(); 
  });  
  $("#fl a").click(function(){ 
     $("#fl_info").show(); 
  });  
  $("#tx a").click(function(){ 
     $("#tx_info").show(); 
  });  
  $("#ca a").click(function(){ 
     $("#ca_info").show(); 
  });  

  $("#fade_bg, .close").click(function(){ 
     $("#fade_bg").fadeOut(); 
     $("#infobox").animate({bottom: '-460px' }, 300, function() {
         $("#infobox > div").css("display", "none"); 
     }); 
     return false; 
  });

});
</script>

<style>
.more img:hover {opacity:1.0}
.more img {opacity:1.0}
span.close {position: absolute; left: 5px; top: 5px;}
#infobox {
    bottom: -460px; 
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #000000;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 10px #633F25;
    height: 350px;
    left: 50px;
    padding: 0 10px 10px;
    position: absolute;
    width: 500px;
    z-index: 20;
}
#fade_bg {
position:absolute; 
z-index:15; 
width:100%; 
height:100%; 
background-color: #C0C0C0;
opacity: 0.8;
display:none;
}
#mt {left: 155px; top: 10px;}
#ma {right: 20px; top: 90px;}
#ar {left: 350px; top: 240px;}
#va {right: 108px; top: 180px;}
#fl {bottom: 90px; right: 115px;}
#tx {bottom: 80px; right: 330px;}
#ca {bottom: 170px; left: 40px;}
.more span {
    color: #000000;
    font-family: arial;
    font-size: 18px;
    left: 40px;
    padding: 5px 0 0 5px;
    position: absolute;
    text-shadow: 1px 1px 2px #FFFFFF;
    width: auto;
}
.more {
    background: repeat scroll 0 0 transparent;
    border: 1px solid #000000;
    height: 30px;
    overflow: hidden;
    padding: 5px;
    position: absolute;
    text-align: left;
    width: 56px;
    overflow:hidden;
}
#picture {
    background: url("http://sb.uploads.ru/HrlmB.jpg") repeat scroll 0 0 transparent;
    height: 416px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 621px;
}
#infobox div {
    height: 340px;
    margin-bottom: 100px;
    overflow-y: auto;
}
</style>
</div>
	</div>
</div>