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

Тема в разделе "Веб-дизайн", создана пользователем farm, 8 янв 2011.

Модераторы: zek24
  1. farm

    farm

    Регистр.:
    8 июн 2006
    Сообщения:
    537
    Симпатии:
    106
    Как вывести кнопки следующая/предыдущая прямо на фотке?

    Вот есть пример. Наводим курсор на фото, появляются стрелочки.
    http://stars-djs.promodj.ru/foto/473062/2896281.html

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

    bork75 Д☼брая собака )

    Регистр.:
    21 июн 2008
    Сообщения:
    1.449
    Симпатии:
    716
    На фотку нужно повесить два парящих слоя, что бы они были кликабельны, нужно использовать прозрачную 1px картинку (из-за проблем в некоторых браузерах с пустым дивом)

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

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

    PHP:
    <html>
    <
    body>
    <
    style>
    .
    left_img {}
    .
    left_img1 {backgroundurl(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 {backgroundurl(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>
     
    farm нравится это.