Добавляем...


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

<style type="text/css">
a:hover {background-color: yellow; font-weight: bold;}
</style>

Если, вооружившись идеей hover (задержки указателя мыши на объекте), пойти немного дальше, можно изменить и фоновое изображение области, чтобы создать еще больший графический эффект. Для этого установите для области изменения прозрачное GIF-изображение с некоторым текстом alt, а затем измените фоновое изображение при задержке указателя мыши в этой области. С таким простым кодом CSS можно получить исчезающую и появляющуюся графику вообще без использовании JavaScript! Следующий пример иллюстрирует эту идею.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример изменяемой графики на базе CSS</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
<style type="text/css">
a img {height: 35px; width: 70px; border-width: 0; background: top lett no-repeat; }

a#buttonl img {background-image: url(buttonloff.gif);}
a#button2 img {background-image: url(button2off.gif);}

a#buttonl:hover img {background-image: url (buttonlon.gif);}
a#button2:hover img {background-image: url(button2on.gif);}
</style>
</head>
<body>
<div id="navbar">
<a id="buttonl" href="http://www.javascriptref.com/"ximg src="blank.gif" alt="JavaScript Ref"></a>

<a id="button2" href="http: //www.google.com/"ximg src="blank.gif" alt="Google"></a>
</body>
</html>

С CSS можно пойти еще дальше и решить проблему загрузки множества изображений, являющуюся просто наказанием при использовании эффекта смены изображений. Например, можно создать одно большое изображение кнопок навигации в меню для включенного состояния и одно большое изображение кнопок — для выключенного состояния.
Затем можно использовать области отсечения CSS в соответствии с правилами : hover или JavaScript, чтобы отображать и скрывать части изображения, создающего и соответствующий динамический эффект. Такой простой подход позволяет уменьшить число запросов изображений в данном случае с восьми до двух, если кнопки разделены на две группы, поскольку они используются вместе. Метод CSS оказывается достаточно мощным сам по себе и может использоваться для реализации простых визуальных эффектов типа смены изображений, но его возможности оказываются еще более широкими, если объединить его с JavaScript при создании эффектов DHTML.


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика