Вопрос Слайд эффект

Пользователь · Регистрация: 23.10.2011

Добрый день всем.
Такой вопрос, даже два. Нашёл на днях интересный слайд эффект http://pcvector.net/uploads/demo/scr...ct/index.htmll
Код: http://pcvector.net/scripts/image-ef...i-kursora.html
В процессе ковыряния, экспериментов возникли такие вопросы:
1. как сделать ссылки на квадратах, сохраняя их анимацию;
2. как изменить количество областей;
Буду очень благодарен, если кто нибудь растолкует, распишет что и как..

Администратор · 24.10.2011, 22:12

Цитата:

Сообщение от alunet

2. как изменить количество областей;

Ищем код в исходнике index.html

PHP код:



            <div id="hs_container" class="hs_container">
                <div class="hs_area hs_area1">
                    <img class="hs_visible" src="images/area1/1.jpg" alt=""/>
                    <img src="images/area1/3.jpg" alt=""/>
                </div>
                <div class="hs_area hs_area2">
                    <img class="hs_visible" src="images/area2/1.jpg" alt=""/>
                    <img src="images/area2/3.jpg" alt=""/>
                </div>
                <div class="hs_area hs_area3">
                    <img class="hs_visible" src="images/area3/1.jpg" alt=""/>
                    <a href="http://pcvector.ru"><img src="images/area3/3.jpg" alt=""/></a>
                </div>
                <div class="hs_area hs_area4">
                    <img class="hs_visible" src="images/area4/1.jpg" alt=""/>
                    <img src="images/area4/3.jpg" alt=""/>
                </div>
                <div class="hs_area hs_area5">
                    <img class="hs_visible" src="images/area5/1.jpg" alt=""/>
                    <img src="images/area5/3.jpg" alt=""/>
                </div>
            </div>

Видим, что у нас 5 областей (area1, area2, area3, area4, area5)
Добавим 6 область, вставив её ниже пятой, вот так

PHP код:



            <div id="hs_container" class="hs_container">
                <div class="hs_area hs_area1">
                    <img class="hs_visible" src="images/area1/1.jpg" alt=""/>
                    <img src="images/area1/3.jpg" alt=""/>
                </div>
                <div class="hs_area hs_area2">
                    <img class="hs_visible" src="images/area2/1.jpg" alt=""/>
                    <img src="images/area2/3.jpg" alt=""/>
                </div>
                <div class="hs_area hs_area3">
                    <img class="hs_visible" src="images/area3/1.jpg" alt=""/>
                    <a href="http://pcvector.ru"><img src="images/area3/3.jpg" alt=""/></a>
                </div>
                <div class="hs_area hs_area4">
                    <img class="hs_visible" src="images/area4/1.jpg" alt=""/>
                    <img src="images/area4/3.jpg" alt=""/>
                </div>
                <div class="hs_area hs_area5">
                    <img class="hs_visible" src="images/area5/1.jpg" alt=""/>
                    <img src="images/area5/3.jpg" alt=""/>
                </div>
                <div class="hs_area hs_area6">
                    <img class="hs_visible" src="images/area6/1.jpg" alt=""/>
                    <img src="images/area6/3.jpg" alt=""/>
                </div>
            </div>

И не забудьте залить сами картинки по путям указанным в src=""

Теперь открываем файл style.css и находим в нём

PHP код:



.hs_container{
    position:relative;
    width:902px;
    height:471px;
    overflow:hidden;
    clear:both;
    border:2px solid #fff;
    cursor:pointer;
    -moz-box-shadow:1px 1px 3px #222;
    -webkit-box-shadow:1px 1px 3px #222;
    box-shadow:1px 1px 3px #222;
}

Нас будет интересовать параметр height:471px;
Это и есть высота всего нашего блока из пяти областей, мы же хотим его увеличить на некоторую высоту, которая зависит от высоты картинки.
Допустим высота нашей картинки из новой области 6 - area6 будет 100px, значит мы 471px заменяем на 571px
В самый низ файла style.css добавим стиль нашей area6 области:
Тут height:100px это высота картинки, а width:451px - это её ширина
Top - это положение нашей области от самого верха нашего блока всех областей, так как мы увеличиваем блок по высоте, то начальные координаты нашей area6 будут top:471px; а отступ слева, пусть будет ноль - left:0px;

PHP код:



.hs_area6{
    width:451px;
    height:100px;
    top:471px;
    left:0px;
}

Если добавляем области по ширине, то делаем всё тоже самое, только меняем в CSS параметры width (придется обзавестись калькулятором)

Добавлено через 36 минут

Цитата:

Сообщение от alunet

1. как сделать ссылки на квадратах, сохраняя их анимацию;

Вот так можно сделать:
Добавив к DIV onclick="window.location.href='http://pcvector.ru'"

PHP код:



                <div class="hs_area hs_area5" onclick="window.location.href='http://pcvector.ru'">
                    <img class="hs_visible" src="images/area5/1.jpg" alt=""/>
                    <img src="images/area5/3.jpg" alt=""/>
                </div>

Пользователь · 25.10.2011, 08:47

Vector, Спасибо большое! Получилось ) Широкоформатная печать А0+ Гомель
А как сделать чтобы ссылка открывалась в новом окне? Пробовал target="_blank" добавлять, и вот такую конструкцию с return false: OnClick="window.location.href='http://printfoto.of.by/00/str/map.php'; return false" />
Но ничего не меняется.

Администратор · 25.10.2011, 13:36

Цитата:

Сообщение от alunet

А как сделать чтобы ссылка открывалась в новом окне? Пробовал target="_blank" добавлять, и вот такую конструкцию с return false: OnClick="window.location.href='http://printfoto.of.by/00/str/map.php'; return false" />

Использовать вот так:

PHP код:



onclick="window.open('http://pcvector.ru')"

Пользователь · 25.10.2011, 16:47

Благодарю за помощь, все вопросы решены

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Хаки vbulletin lightbox port - эффект увеличения изображения	Vector	Галереи, картинки, альбомы, смайлы, иконки и т.п.	21	04.01.2013 17:34
Инфо Чат на javascript, эффект матрицы, снег на сайт, пузыри, панели - готовые скрипты!!!	xzxz	JavaScript	0	05.06.2011 02:57

alunet #5
00 МГц Пользователь Вес репутации: 0 Регистрация: 23.10.2011 Сообщений: 3 Сказал(а) спасибо: 0 Спасибок 0 в 0 сообщениях	25.10.2011, 16:47 Благодарю за помощь, все вопросы решены