Загибающийся флеш-уголок для сайта.
23.01.2012 Рубрика: Обучение \ HTML&CSS
От автора: данный материал сложно назвать уроком в полном понимании этого слова. Скорее, здесь я хочу поделиться с Вами одной привлекательной вещицей, которая подойдет для любого сайта – это загибающийся уголок для сайта. Вполне вероятно, что Вы уже видели такую штуку в сети – это колышущийся уголок в правом верхнем углу сайта, который при наведении на него курсора загибается, открывая скрытую под ним картинку. Вещь довольно привлекательная и, что самое главное, прицепить ее на любой сайт не составит особого труда и не займет много времени – всего пару минут и уголок уже на сайте.
 |
Автор: Андрей КудлайЗовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e – в свободное время как раз занимаюсь его изучением. |
Для работы я скачал в сети бесплатный шаблон, с которым мы и будем работать. Для работы нам понадобятся всего 5 файлов:
2 картинки: large.jpg и small.jpg
2 флешки: large.swf и small.swf
файл подключения и настроек: peel.js
Картинки и флешки показывают уголок в двух положениях – открытый и приоткрытый уголок. Флешки анимаируют показ картинок. Картинки Вы, конечно же, можете использовать свои, написать на них необходимы текст или вывести нужное изображение. Единственное, желательно соблюдать те размеры, которые Вы увидите в исходниках, т.е. 100*100 для маленькой картинки и 500*500 для большого изображения.
Теперь о файле peel.js, который подключает уголок на сайт и отвечает за его настройки. Все необходимые настройки заключены в первых строках файла – 10 строк (10 настроек). Давайте распишем каждую из них:
jaaspeel.ad_url – ссылка на страницу, куда будет осуществлен переход по клику на уголок;
jaaspeel.small_path – путь к маленькой флешке;
jaaspeel.small_image – путь к маленькой картинке;
jaaspeel.small_width – ширина уголка в исходном положении (желательно, чтобы она совпадала с шириной маленькой картинки);
jaaspeel.small_height – высота уголка в исходном положении (желательно, чтобы она совпадала с высотой маленькой картинки);
jaaspeel.big_path – путь к большой флешке;
jaaspeel.big_image – путь к большой картинке;
jaaspeel.big_width – ширина уголка в отогнутом положении (желательно, чтобы она совпадала с шириной большой картинки);
jaaspeel.big_height – высота уголка в отогнутом положении (желательно, чтобы она совпадала с высотой большой картинки);
jaaspeel.big_params – в этом параметре добавляется ссылка к отогнутому уголку, которую при желании можно закомментировать.
Собственно это все, что можно изменять в данном файле. Остальной код отвечает за позиционирования флешек и их публикацию на странице.
Теперь осталось только подключить данный файл на страницу. Подключается он, как и любой другой скрипт. Между тегами HEAD пропишем строку кода:
<script type="text/javascript" src="peel/peel.js"></script>
Вот и все…
Теперь можно сохранить файл, обновить страницу в браузере и наслаждаться результатом. Остается сказать несколько слов об особенностях подключения и настройки файла, например, на CMS WordPress. Во-первых, каталог с файлами уголка желательно располагать в Вашей текущей теме (/wp-content/themes/ваша-тема/). Во-вторых, все пути в настройках прописываем абсолютно. Например, путь к маленькой флешке будет таким: http://Ваш_сайт/wp-content/themes/ваша-тема/peel/small.swf. Ну и подключаем скрипт, конечно же, используя также абсолютный путь:
<script type="text/javascript" src="http://Ваш_сайт/wp-content/themes/ваша-тема/peel/peel.js"></script>
Где прописывать подключение, думаю, всем понятно – сделать это нужно в файле header.php Вашей темы.
На этом данный урок закончен. Надеюсь, что Вам пригодится показанная вещь.
Удачи и до новых встреч!
| Подписаться |
|
Поделиться |
|
Метки: флеш-уголок
Популярные записи
Монетизация сайта с помощью ссылочных бирж.
Как создать свой первый профессиональный дизайн сайта с нуля.
На пути к монетизации сайта: увеличиваем рейтинг сайта через наращивание ссылочной массы.
Загибающийся флеш-уголок для сайта.
Создание шаблона для отдельной страницы WordPress.
Урок очень интересный и на первый взгляд прост, но у меня не получилось. Запутался как путь прописывать к файлам. Сайт на джумла. Подскажите где ошибка?
Нравится или не нравится:
0 
0
Чтобы не путаться, везде можно прописывать абсолютные пути, например, – так будет выглядеть путь к скрипту, расположенному в каталоге peel… сам каталог при этом должен быть помещен в корень сайта. Также абсолютные пути можно указывать в самом файле скрипта.
Нравится или не нравится:
1 
0
Все это конечно интересно!но я не умею работать со скриптами на прямую,я хотела попросить на просто javascript который вставляешь в шаблон сайта Между тегами HEAD и он работает!заранее благодарю
Нравится или не нравится:
1 
0
Ольга, еще раз внимательно пересмотрите урок… в уроке нет работы с JavaScript вообще. Все, что требуется, – это поместить каталог peel в корень сайта и подключить скрипт.
Нравится или не нравится:
0 
0
Очень интересный момент, и вообще мне нравятся ваши уроки, к сожалению я их под забросил, но обязательно вернусь что б глубже понять структуру сайта, и применять таки финты как этот .
Нравится или не нравится:
0 
0
Уважаемый Андрей! не получается уголок. Загружаю папку peel внутрь главной папки на Narod.ru. Как прописываю в index Вы можете сами на сайте посмотреть. В peel.js я пишу так jaaspeel.ad_url = escape(‘‘);
Что не так?
Нравится или не нравится:
0 
0
Nata, что именно не получается? Зашел на Ваш сайт, уголок работает.
Нравится или не нравится:
0 
0
Не работает. Я в трех браузерах проверила: мозиле, опере, эксплорере.
Нравится или не нравится:
0 
0
Дайте мне свой скайп, я через экран вам покажу.
Нравится или не нравится:
0 
0
Может быть в моих браузерах чего-то не хватает? Так нет, на других сайтах я такие уголки вижу.
Нравится или не нравится:
0 
0
Специально разместил сайт из урока на народе – matroskin978.narod.ru – посмотрите будет ли у Вас показывать. У меня не работает только в IE7. В Мозилле и Опере все ок.
Да и кстати, сейчас у Вас не работает уже – файл скрипта не находит.
Нравится или не нравится:
0 
0
Напишите мне на почту, я Вам пошлю файл с фото и Вам все будут видно. У Вас здесь нет возможности переслать файл.
Нравится или не нравится:
0 
0
Nata, зачем мне файл и фото, если у меня все работает на народе, а у Вас не работает? В комментарии ниже написал, что необходимо обновить flash player.
Нравится или не нравится:
0 
0
matroskin978.narod.ru
не показывает уголок
Нравится или не нравится:
0 
0
Скорее всего, у Вас не установлен либо не обновлен flash player. Перейдите по ссылке get.adobe.com/ru/flashplayer и установите плеер.
Нравится или не нравится:
0 
0
После установки get.adobe.com/ru/flashplayer
Opera стала показывать, а мозила и эксплорер нет. Почему?
Почему сдвигается large.jpg глубже к центру, а не с левого края?
Нравится или не нравится:
0 
0
Flash player устанавливается для каждого браузера отдельно. Если после установки не показывает – перезапустите браузер. По поводу IE, то у меня в 7-ой версии также не показывается.
Картинка large.jpg позиционируется относительно верхнего левого угла флешки, а поскольку размеры самой флешки 500*500 пикселей, то пустыми остаются 100 пикселей ширины и 100 – высоты. Если Вы хотите уголок поменьше, то сделайте картинку 500*500 пикселей, но размеры в скрипте оставьте 400*400.
Нравится или не нравится:
0 
0
На маленьком дисплее мой сайт не сдвигает внутреннюю картинку, а на большом дисплее-сдвигает внутрь на 200 пикселей. И край становится белый. Ваш сайт везде нормально показывает-и на маленьком и на большом. Это только в опере.
Нравится или не нравится:
0 
0
Nata, Вы совсем невнимательно прочитали мой предыдущий комментарий относительно размеров. Я говорил, что картинку необходимо сделать с размерами 500*500 пикселей… Вы же сделали ее еще меньше – 300*300 )))
Перечитайте внимательнее мой комментарий.
Нравится или не нравится:
0 
0
Как перезапустить браузер? Обновить?
Нравится или не нравится:
0 
0
Как Вы перезапускаете компьютер? Перезапустить – это значит выключить и включить.
Нравится или не нравится:
0 
0
Да внимательно я читаю, просто мне не нравится такой большой отгиб, и я экспериментирую. Сейчас все сделала по Вашим рекомендациям, но ничего не меняется: Ваш сайт хорощо показывает, у моего внутренняя картинка сдвигается внутрь и край делается белым, а надписи почти не видно. Работает только в опере.
Нравится или не нравится:
0 
0
Ну экспериментируйте
Только позволю себе процитировать часть урока: «…желательно соблюдать те размеры, которые Вы увидите в исходниках, т.е. 100*100 для маленькой картинки и 500*500 для большого изображения»
Нравится или не нравится:
0 
0
Здравствуйте, попробовал поставить, все работает, но вот только изображение само по себе искажается. И картинка не совсем красиво выглядит, по сути изображение уменьшается. Это как то лечиться?
Нравится или не нравится:
0 
0
Здравствуйте. Лечится очень просто. В уроке указаны рекомендуемые размеры, при которых все отлично отображается – используйте их.
Нравится или не нравится:
0 
0
Я и поставил, те параметры, которые Вы рекомендуете в уроках и в итоге идет искажение большой картинки. А лечится эта штука заданием таких параметров для:
jaaspeel.big_width = ’600′;
jaaspeel.big_height = ’600′;
После большая картинка не искажается, несмотря на то что ее размер 500×500 пикселей. А так спасибо Вам за полезный скрипт
Нравится или не нравится:
0 
0
Пожалуйста
Хотя у меня картинка 500*500, аналогичные размеры указаны в скрипте, и картинка отображается корректно…
Ну да Вы же сами могли видеть в уроке и исходниках
Нравится или не нравится:
0 
0
Здравствуйте. Пишу немного не по теме. Проблема в том, что я не знаю, как убрать с блога этот уголок. Блог на вордпрессе. Если не трудно, подскажите, пожалуйста. Смена шаблона результата не дала. Я просто не знаю, в каком месте находится скрипт. Спасибо.
Нравится или не нравится:
0 
0
Поищите в плагинах что-то напоминающее «Page Peel»… и отключите его.
Нравится или не нравится:
1 
0
Спасибо! Очень помог. Я подписываюсь на блог.
Нравится или не нравится:
0 
0
И еще, если не очень затруднит. На этом же блоге не могу удалить спам-комментарии. Они просто не удаляются в админке, а внизу появляется надпись:»Внутренняя ошибка» на розовом фоне. Это поправимо или нет?
Нравится или не нравится:
0 
0
Попробуйте отключить плагины, имеющее отношение к работе со спамом, и удалить их после этого. Если не поможет, тогда проще переустановить WordPress.
Нравится или не нравится:
1 
0
Не помогло. Буду переустанавливать. У Вас не работает подписка по имейл
Нравится или не нравится:
0 
0
Андрей, здравствуйте. Похоже что архив битый, перезалейте пожалуйста если не сложно
Нравится или не нравится:
0 
0
Здравствуйте.
Только что проверил архивы – все скачивается и распаковывается. Возможно, у Вас скачался архив с ошибкой. Попробуйте еще раз.
Нравится или не нравится:
0 
0
Андрей, спасибо огромное за прекрасный урок.
Сделал уголки на 2-х своих сайтахЖ
блог на wordpress
сайт на Joomla
В Мозилле всё отображается великолепно.
А вот в IE, в wordpress отображается
в Joomla – ни в какую
Нравится или не нравится:
0 
0
Пожалуйста
Сергей, дело в том, что IE почему-то некорректно обрабатывает скрипт (peel.js), публикуя флеш в head’e. Только сейчас обратил внимание на эту его проблему. Решается довольно просто – подключайте данный скрипт не в блоке head, а в body. Сразу после этого в IE у меня заработало. В остальных браузерах также после этого работает отлично.
Нравится или не нравится:
1 
0
Спасибо, Андрей. Обязательно применю сегодня.
Спасибо за Вашу отзывчивость и быстрый ответ.
Удачи Вам. Подписался на Вашу рассылку
Нравится или не нравится:
0 
0
Заработало. Ещё раз огромное спасибо, Андрей
Нравится или не нравится:
0 
0
Пожалуйста
Нравится или не нравится:
0 
0