Отгибающийся уголокТакой интересный визуальный эффект, привлекающий внимание пользователя сайта: верхний правый уголок области сайта будто немного отгибается, а при наведении на него приоткрывается настолько, что туда можно поместить хорошее информационное сообщение. А при клике на это сообщение пользователь попадает на заранее заданную страницу, связанную с этим сообщением.

Как вы, наверное, уже догадались, этот пост раскрывает великую тайну, как сделать такой уголок у себя на сайте. Сразу предупреждаю, если вас пугают такие простые вещи, как закачать несколько файлов на сайт, внести небольшие изменения в файл сценария и добавить одну строку в шапку темы оформления, то лучше сразу вбейте в поисковик фразу peel effect (проверял в Яндексе — на первой же станице есть что надо, подробнее смотреть не стал) — может вам плагин попадётся, который сделает всё за вас.

А смелым посетителям блога, которые читают дальше, сообщаю, что там всё элементарно: достаточно опыта работы с текстовым редактором и программой, которой вы файлы на сервер закачиваете (я это делаю либо через Total Commander — исторически так сложилось, либо через контрольную панель хостинга).

Вам понадобится скачать этот архив. В нём содержится всё, что надо. Только вот картинки и ссылка на пост там те, которые у меня используются в данный момент, их-то и надо будет вам изменить. В первую очередь извлекаем из архива папку «peel-effect». В ней две картинки (у меня 3 — я экспериментировал, но реально используются только две) с размерами 100×100 и 500×500. Одна отображается до наведения на уголок, другая — после наведения. Перерисовываем их (заменяем), имена можно задать такие, какие пожелаете.

Затем надо внести коррективы в файл peel.js (в любом текстовом редакторе). А именно, изменить следующие строчки:

jaaspeel.ad_url = escape('http://hope-designer.ru/?p=1859');
jaaspeel.small_path = 'http://hope-designer.ru/peel-effect/small.swf';
jaaspeel.small_image = escape('http://hope-designer.ru/peel-effect/small-n.jpg');
....
jaaspeel.big_path = 'http://hope-designer.ru/peel-effect/large.swf';
jaaspeel.big_image = escape('http://hope-designer.ru/peel-effect/large-n-1.jpg');

Здесь задаются следующие значения:

  • ссылка на пост, которому посвящаем уголок;
  • путь к файлу small.swf (меняйте только имя сайта, если папку peel-effect разместите в корне сайта);
  • адрес маленькой картинки 100×100;
  • путь к файлу large.swf (аналогично второму пункту);
  • адрес большой картинки 500×500.

И после этого необходимо только добавить в файл header.php вашей темы оформления (в редакторе темы) одну строку между тегами <head> и </head>:

<script src="http://hope-designer.ru/peel-effect/peel.js" type="text/javascript"></script>

Соответственно, адрес сайта указываете свой. А также путь к папке peel-effect, если она у вас не в корне сайта.

Запись опубликована 2 октября 2010 года. Предыдущие посты рубрики «Web-кодинг»:

Подписка на RSS канал блога RSS подписка (как это?) поможет вам не пропустить ничего интересного на этом блоге.