Новости портала "Горячие ссылки"

Здравствуйте!

Приветствую читателей новостей проекта "Горячие ссылки". В данный момент у рассылки следующее количество подписчиков: 1117.

В сегодняшнем выпуске, как и в позапрошлом, расскажу о новой публикации "ГАДского вестника". Материал объемный, поэтому он вполне достоин отдельного разговора. Это рассказ нашего нового автора, Сергея Галаева, о его летней поездке в Крым с друзьями. Они отдыхали "дикарями" в Симеизе и остались очень довольны поездкой. "Отчет" о путешествии и несколько десятков фотографий, сделанных Сергеем, предлагаются вашему вниманию. Сергей - коллега вашего покорного слуги, мы вместе работаем, поэтому и наши взгляды на жизнь чем-то похожи... Оцените сами! Единственный еще не решенный пока вопрос - название текста, надо балансировать между скучным "Симеиз - 2003", пошлым "Симеиз - это классно" и напыщенным "Мое открытие Симеиза". Если у вас есть идеи - напишите.

Перехожу к технической стороне дела, поэтому сразу предупреждаю: дальнейшее вряд ли будет интересно тем, кто не знает, чем JavaScript отличается от HTML. Для фанатов расскажу о деталях. Конечно, общее оформление выдает себя "с головой" - это HTML Gallery Maker, как и в "Байкальском хребте - 1999", и "Левашоу - 2001", и других объемных материалах "ГАДского вестника" с большим количеством фотографий. Так же, как и предпоследний из них "Рыбинский вальс", оформительские идеи для "фотографического движка" почерпнуты из статьи С.А.Круглова "Кроссбраузерный DHTML", спасибо автору статьи еще раз. На этот раз я думал воспользоваться готовым продуктом Круглова - JavaScript-библиотекой для работы со "слоями" Klayers, но некоторые вещи оказались описаны только в упомянутой статье, и пока не включены в библиотеку. Поэтому в результате скрипт управления отображением фотографии был собран "вручную", в результате он получился достаточно компактен. Так же, как и в "Рыбинском вальсе", система отображения фотографии корректно работает в браузерах Internet Explorer и Netscape Navigator версий 4 или новее, при отключении поддержки JavaScript увеличенная фотография отображается в новом окне.

Если "кликнуть" на фотографию в тексте, при срабатывании JavaScript большая картинка появится "под курсором" мыши, постепенно увеличится и "выедет" на центр экрана, заняв все свободное пространство. Максимальный размер фотографий - не больше 800х600, здесь я заботился о двух факторах: 35% пользователей Сети, использующих это разрешение монитора (по данным HotLog.Ru), и уменьшении "веса" графических файлов. Тем более, если размер экрана больше, картины такого размера все равно смотрятся хорошо. В скрипт встроены еще несколько разумных ограничений: полностью увеличенная картинка не может вылезти за границы окна, если оно оказывается сжато по какому-либо направлению. Поэтому для полноценного просмотра иллюстраций рекомендуется разворачивать окно браузера на полный экран.

Казалось бы, нажал кнопку, картинка "выехала" и остановилась, можно оформить все в виде одной функции. Однако проверка показала, что картинка при этом не прорисовывается в промежуточных положениях, поэтому пришлось использовать знакомый механизм рекурсивного вызова функции "перерисовки" слоя с новым размером картинки, запуская функцию "из себя" через setTimeout().

Пока картинка увеличивается в размерах, над ней постепенно проявляется краткий комментарий (это реализовано только для Internet Explorer, потому что у Netscape Navigator есть проблемы с динамическим выводом в слой русского текста). Netscape Navigator вообще показал себя не лучшим образом при перерисовке слоя с картинкой: оно происходит скачками, поэтому при увеличении размера поочередно выводятся два слоя, после вывода нового предыдущий стирается, и так далее. Пока картинка увеличивается, все крупнее и крупнее выводится тот же графический файл на самом деле небольшого размера, который вставлен прямо в текст. Конечно, пока он движется, недостаточное качество картинки не так бросается в глаза. Когда же изображение фиксируется в самом большом размере, поверх последнего слоя выводится полноразмерная картинка высокого качества (увы, большего размера), и с какой скоростью она отобразится - зависит от качества вашего интернет - соединения. В любом случае, благодаря наличию двух слоев, никаких подергиваний изображения не будет!

Изюминка скрипта - появление картинки "из-под курсора" мыши. Именно браузеронезависимая JavaScript-функция определения координат мыши нет в библиотеке Klayers, но она описана в статье "Кроссбраузерный DHTML". С применением функции все делается просто, а получается красиво: с одной стороны, есть координаты мыши (точка старта картинки), с другой стороны, в каждый момент с учетом фактического размера картинки в данный момент "полета" определяются координаты второй точки - левого верхнего угла картинки, если бы она росла ровно из центра экрана. Если же брать линейную комбинацию этих координат с простейшим весовым коэффициентом (по номеру "кадра"), получится тот странный эффект плавной кривой выезда картинки, который реализован в скрипте.

В остальном все дело лишь в технической реализации: как поочередно рисовать и "убирать" слои, чтобы это работало в обоих браузерах (причем "в полете" слои меняются только у Netscape Navigator). Как запускать и останавливать движение картинки в сторону увеличения или уменьшения ее размера и как менять "на лету" размер комментария (через размер шрифта, конечно). Вот такая получилась система.

Наслаждайтесь результатом! Не забудьте, что для того чтобы свернуть просмотренную фотографию, на ней надо тоже "кликнуть". Впрочем, если вы уже прочитали текст "под ней", можно просто оставить слой на экране и читать дальше.

Прошел уже месяц, поэтому опубликовано продолжение романа-фэнтези Средиземье - крохотный мирок: часть 11. Добро пожаловать!

Обновлена страница "проекта PING" - статьи на тему скорости доступа к различным серверам Сети, написанной еще в 2000 году. Теперь ссылки на этой странице дополнены новыми системами проверки доступности сайтов.

Что ж, поскольку мы увидимся через месяц, поздравляю всех с наступающими новогодними и рождественскими праздниками!

До встречи, Ваш Александр Левченя
Адрес сайта: http://hotlinks.ru
Электронная почта: webmaster@hotlinks.ru