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


Расширенные возможности изменяемой графики
Образец только что представленного программного кода можно улучшить. Проявив небольшую изобретательность, можно написать сценарий, в котором нет необходимости связывать программный код с обработчиками onmouseover и onmouseout. Рассмотрим возможность создания класса изменяемой графики, в котором с помoщью цикла по объектам документа обнаруживаются дескрипторы <img>, подходяща изображения делаются предварительно загружаемыми, а затем осуществляется динамическая привязка событий средствами JavaScript. Такой исключительно "чистый" программный код можно разместить во внешнем файле .js и кэшировать для всех соответствующих страниц. Это должно избавить от необходимости копирования вставки однотипного программного кода во все страницы узла, что является общера пространенной практикой в Web, и что делают редакторы типа Dreamweaver.
Кроме улучшения стиля программирования, возможности смены изображена можно использовать и для решения других задач. Например, с помощью смены изображений можно демонстрировать текст или отображать рисунок в определенном месте экрана, когда пользователь помещает указатель мыши на ссылку. Можно создать сценарий, отображающий примечания с информацией о ссылке. Можно предложить изображение, указав на которое, пользователь сможет вызвать появление другого из бражения с более подробной информацией об объекте. Осознав основную идею смен изображений, вы будете ограничены только своей фантазией (и благосклонность ваших пользователей в отношении фантастических эффектов).
Следующая комбинация средств разметки и программного кода 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>Примар изменения целевых объектов для изображения</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
<script type="text/javascript">
<!--
// Загрузка всех изображений
if (document.images)
{
var abouton = new Image();
abouton.src = "abouton.gif";
var aboutoff = new Image ();
aboutoff.src = "aboutoff.gif";
// ... другие кнопки ...
var blank = new Image();
blank.src = "blank.gif";
var descriptionl = new Image();
descriptionl.src = "description.gif";
// ... другие описания ...
}
/* подключение изображения и отображение соответствующего описания */
function on(imgName, description)
{
if (document.images)
{
imgOnSrc = evaKimgName + "on.src");
document.images[imgName].src = imgOnSrc;
document.images["descriptionregion"].src = description.src;
}
}
/* отключение изображения и очистка соответствующего описания */
function off(imgName)
{
if (document.images)
{
imgOffSrc = evaKimgName + "off.src");
document.images[imgName].src = imgOffSrc;
document.images["descriptionregion"].src = "blank.gif";
}
}
</script>
</head>
<body>
<a href="about.html"
onmouseover="on('about', descriptionl);window.status='Компания';return true;"
onmouseout="off('about'); window,status='';return true;"> <img scr="aboutoff.gif" border="0" alt="О нашей компании" name="about" id="about" width="440" height="60" /></a>
<!--... другие кнопки ... -->
&nbsp; &nbsp; &nbsp;
<a href="#"><img src="blank.gif" name="descriptionregion"
id="descriptionregion" width="640" height="140" border="0" alt="" /></a>
</body>
</html>

Хотя из предыдущих примеров и вытекает потенциальная полезность программного кода JavaScript для работы с изменяемой графикой, ее дни сочтены, поскольку многие из соответствующих эффектов значительно усовершенствованы с включением в Web-страницы возможностей CSS.


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


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

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


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







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