Фишка с картинками

Тема в разделе "Наполнение", создана пользователем boomerang, 03.07.2011.

  1. Offline

    boomerang Недавно здесь

    Регистрация:
    20.05.2011
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    Вот не давно понадобилось сделать одну фишку с картинками, а именно:
    Есть Главная картинка, На ней нарисовано пару домиков.
    Мне нужно сделать так чтобы при клике по какому-то домику, всплывало окно( или картинка) с еще маленькими картинками, и чтобы при клике на одну из этих картинок, страница перенаправляла на ссылку привязанную, с этой маленькой картинкой!
    Есть ли какой-то плагин такой, или в редакторе есть такая возможность?! Пожалуйста помогите...
     
  2.  
  3. Offline

    eLig Пользователь

    Регистрация:
    27.05.2009
    Сообщения:
    103
    Симпатии:
    7
    Пол:
    Мужской
    Я бы реализовывал через слои (DIV).
     
  4. Offline

    boomerang Недавно здесь

    Регистрация:
    20.05.2011
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    А по подробнее можно.....
     
  5. alex0603
    Offline

    alex0603 Недавно здесь => Cпециалист <=

    Регистрация:
    25.11.2007
    Сообщения:
    415
    Симпатии:
    39
    Пол:
    Мужской
    Хороший вариант с дивами кстати надо будет взять на заметку. а делается это примерно так

    Есть слой <div class="pic_main"></div> ему делаем CSS и бекраундом ставим нужную первую картинку с домиками.

    Дальше напимер если нужно сделать 4 кликабельные зоны делаем

    <div class="pic_main">
    <div id="pic_zone1"></div>
    <div id="pic_zone2"></div>
    <div id="pic_zone3"></div>
    <div id="pic_zone4"></div>
    </div>

    Соотвественно в ксс им даём точную ширину и высоту что бы не накладывались друг на друга и располагаем их в "pic_main" в нужных местах, опять в ксс..

    Дальше нам надо сделать по сути кликабельными эти зоны
    Значит переделываем немного код и получаем

    <div class="pic_main">
    <a href="#" alt="#" id="link_zone1"><div id="pic_zone1"></div></a>
    <a href="#" alt="#" id="link_zone2"><div id="pic_zone2"></div></a>
    <a href="#" alt="#" id="link_zone3"><div id="pic_zone3"></div></a>
    <a href="#" alt="#" id="link_zone4"><div id="pic_zone4"></div></a>
    </div>


    Далее.. нам нужны всплывающие окна.. Берём какой нить скприпт на Mootools или Jqwery попапа.. И довинчиваем в это конструкцию. Хотя если это делать внутри стать.. можно использовать плагин типа JA HighSlide, и тогда задача в разы упрощается..

    Вот как то так)

    Ушёл пить кофе)
     
  6. Offline

    boomerang Недавно здесь

    Регистрация:
    20.05.2011
    Сообщения:
    9
    Симпатии:
    0
    Пол:
    Мужской
    Спс alex0603, буду пробовать....
     

Поделиться этой страницей

Загрузка...