/* Описание котейнера для изображений */  
 #pic{  
    background-color: #000000;  
    position: relative; /* Положение выставлено как relative. 
                           Это необходимо для того, чтобы потом 
                            абсолютно (absolute)спозиционировать 
                           большу картинку относительно левого 
                            верхнего угла слоя */  
    left: 0px;  
    top: -1px;  
    width: 462px;       /* Ширина слоя = ширине миниатюры */  
   }  
   /* Описание стиля большой картинки */  
   /* Идея в том, что изображение сначала имеет размеры 1х1 и 
      смещено за пределы видимости слоя. */  
   #pic a .large {  
    border: 0px;  
    display: block;  
    height: 0px;  
    left: 0px;  
    position: absolute;  
   top: 0px;  
   width: 0px;  
   }  
    
  #pic a img {  
    border: 0;  
   }  
     
   /* Выставляем стиль для ссылки, которая обрамляет изображения */  
   #pic a.p1, #pic a.p1:visited {  
    background: #999999;  
    border: 0px solid #000000;  
    display: block;  
    height: 110px;  
    left: 0;  
    text-decoration: none;  
    top: 0;  
    width: 455px;  
   }  
     
   /* Стиль для ссылки при наведении на нее мышкой */  
   #pic a.p1:hover {  
    background-color: #000000;  
   color: #000000;  
    text-decoration: none;  
   }  
     
  /* Стиль для большого изображения при наведении 
      мышки на миниатюру */  
   #pic a.p1:hover .large {  
    border: 1px solid #000000;  
    display: block;  
   position: absolute; /* Абослютное позиционирование 
                           относительно слоя-контейнера */  
    top: -95px;        /* Покажем большю картинку справа */  
   left: 6px;        /* по центру от миниатюры */  
  width: 443px;       /* Выставим нужные размеры большой */  
   height: 204px;      /* картинки, потому что она была 1х1 */  
   }