В этой статье я покажу простой метод создания полупрозрачной подсветки (т.н. ролловер) элементов меню, который создает эффект мягкого фонового свечения. Эффект работает во всех браузерах, включая IE 6 - это возможно за счет использования полупрозрачных изображений в формате png и скрипта pngfix для вышеупомянутого браузера. Результат будет примерно следующим:

Этот метод был создан Брюсом Крозе (Bruce Kroeze), статью которого можно найти здесь.

Шаг 1: создание изображений

Для начала нужно создать изображения для меню и ролловеров в формате png, которые нужно поместить в одну директорию. Все изображения должны иметь один и тот же префикс, например “btn_”, а изображения для ролловеров должны иметь суффикс “_on.png”. Например, если основное изображение “btn_home.png”, то ролловер должен иметь название “btn_home_on.png”.

Шаг 2: HTML - создание элементов меню

Все изображения меню должны иметь ID, соответствующий названию изображения. Если изображение называется “btn_home.png”, тогда id должен быть “home”. Также, для изображений обязательно устанавливать значения ширины и высоты, так как это требуется для скрипта pngfix, исправляющего прозрачность png в IE 6. Далее, создаем маркированный список, для которого устанавливаем класс “nav”. Пример:

<ul id="topnav" class="nav">
	<li class="first"><a href="#"><img id="home" src="btn_home.png" height="27" width="62"/></a></li>
	<li><a href="#"><img id="store" src="btn_store.png" height="27" width="126"/></a></li>
	<li><a href="#"><img id="stories" src="btn_stories.png" height="27" width="81"/></a></li>
	<li><a href="#"><img id="lessons" src="btn_lessons.png" height="27" width="86"/></a></li>
</ul>

Шаг 3: подключение скриптов.

Добавляем библиотеку jquery.js и скрипт pngrollover.js, который будет выполнять подсветку. Также добавляем скрипт pngfix для IE 6 используя условные выражения:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="pngrollover.js"></script>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<script type="text/javascript">SSS.IE6 = true;</script>
<![endif]-->

Помимо прочего, в условных выражениях явно указывается, что тип браузера IE 6.

Шаг 4: инициализация

Ну и последнее, вызываем функции preloadimages(), которая загружает изображения и menuinit(), которая инициализирует меню. Первый аргумент функции preloadimages() это префикс изображений, остальные аргументы, это изображения, которые нужно загрузить. Пример:

<script type="text/javascript">
$(function() {
	SSS.preloadimages("btn_", "home_on.png", "store_on.png", "stories_on.png", "lessons_on.png", "company_on.png", "careers_on.png", "contact_on.png");
	SSS.menuinit();
});
</script>

смотреть демозагрузить пример

Запись добавлена 12 апреля 2008 в категории jQuery, Эффекты.Вы можете следить за комментариями используя ленту новостей RSS 2.0.Вы можете оставить комментарий, или отправить trackback со своего сайта.