Pager для фотогалереи, как сверстать?

farm · 8 Янв 2011

Как вывести кнопки следующая/предыдущая прямо на фотке?

Вот есть пример. Наводим курсор на фото, появляются стрелочки.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

В примере сделано через скрипты, как это спозиционировать через html/css ?

bork75 · 8 Янв 2011

На фотку нужно повесить два парящих слоя, что бы они были кликабельны, нужно использовать прозрачную 1px картинку (из-за проблем в некоторых браузерах с пустым дивом)

Каждый слой заключаешь в ссылки на следующ. и предыдущ. фотки и вешаешь событие onmouseover (поменять стиль с картинкой) и onmouseout (другой стиль, где нет картинки)

Набросал по-быстрому готовый пример.

PHP:

<html>
<body>
<style>
.left_img {}
.left_img1 {background: url(http://i.cdn.promodeejay.net/foto_left3.gif) no-repeat top left; width:53; height:43; position: absolute; top: 19px; left: 13px; z-index: 101}


.right_img {}
.right_img1 {background: url(http://i.cdn.promodeejay.net/foto_right3.gif) no-repeat top left; width:53; height:43; position: absolute; top: 19px; left: 13px; z-index: 101}
</style>



<div style="position:relative;">
 
 <img src="http://fotos1.cdn.promodeejay.net/resized_600/00/00/47/30/62/3_55cd68.jpg">

   <a href='#'  onmouseover="my_img.className='left_img1';" onmouseout="my_img.className='left_img';">
      <img src="http://i.cdn.promodeejay.net/0.gif" style="position: absolute; top: 0; left: 0; width: 276px; height: 406px; z-index: 100">
      <div id="my_img" class="left_img"></div>
   </a>

    
  <a href='#'  onmouseover="my2_img.className='right_img1';" onmouseout="my2_img.className='right_img';">
      <img src="http://i.cdn.promodeejay.net/0.gif" style="position: absolute; top: -2; left: 324; width: 276px; height: 406px; z-index: 100">
      <div id="my2_img" class="right_img" style="position: absolute; left: 537px; top: 8px"></div>
  </a>    
             
</div>

</body>
</html>

Pager для фотогалереи, как сверстать?

farm

Постоялец

bork75

The Team