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


Ограничения изменяемой графики
Предыдущий пример изменяемой графики работает в современных браузерах, но в старых браузерах (типа Netscape 4) вы не сможете так реагировать на события mouseover, а в очень старых браузерах (типа Netscape 3) — реагировать на эти события вообще. К тому же можно столкнуться с проблемами адресации сценария, связанными с завершением загрузки соответствующих изображений для реализации указанных эффектов. Мы покажем, как решаются эти и другие подобные проблемы чтобы вы могли получить представление о том, какие вопросы совместимости сценариев могут возникать при использовании динамических эффектов.

Проблемы привязки событий

Первой проблемой, связанной с использованием изменяемой графики в разных браузерах и разных версиях одного браузера, является отсутствие возможности привязки событий в рамках дескриптора <img> во многих старых реализациях JavaScript. Так, если необходимо обеспечить обратную совместимость с Netscape 3 и Netscape 4, нужно вспомнить о том, что изображение можно указать в рамках ссылки и что ссылки в Netscape 3 и Netscape 4 могут реагировать на события onmouseover. Для реализации необходимых возможностей управления можно использовать обработчики событий ссылки. Следующий пример иллюстрирует возможности применения этой техники для пары изображений, "imageon.gif" и "imageoff.gif".

<!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>Haбpocoк программы для работы с изменяемой графикой</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<script type="text/javascript">
<!--
function mouseOn()
{
document.imagel.src = "imageon.gif";
}
function mouseOff()
{
document.imagel.src = "imageoff.gif";
}
</script>
</head>
<body>
<a href="#" onmouseover="mouseOn()" onmouseout="mouseOff()">
<img name="imagel" id="imagel" src="imageoff.gif" border="0"
width="90" height="90" alt="rollover" /></a>
</body>
</html>


Отсутствие поддержки объекта Image

Вы обнаружите, что предыдущий пример не работает в некоторых старых браузе-рах, например в Internet Explorer 3 и Netscape 2. В этих браузерах отсутствует поддержка изображений в сценариях, т.е. не поддерживается коллекция images[ ]. Поэтому перед тем, как пытаться изменить изображение, следует перестраховаться и выполнить проверку на наличие соответствующей поддержки JavaScript.
Чтобы убедиться в том, что браузер пользователя обеспечивает поддержку изображений в сценариях, можно проверить доступность коллекции document.images[ ]:

if (document.images)
{
// программный код для изменения изображений
}

Указанный оператор выясняет, существует ли document.images. Если объект не существует, document.images получит значение undefied, которое в данном случае будет оценено как false. С другой стороны, если соответствующий массив существует, он является объектом и поэтому выражение условия будет оценено, как true. Мы используем указанную проверку в следующем примере при решении одной из прoблем, возникающих при переходе от одной версии браузера к другой.

Предварительная загрузка изображений

Что случится, если пользователь попытается использовать эффект изменяемой графики до окончания загрузки соответствующих изображений? К сожалению, будет показано испорченное изображение. Чтобы этого не допустить, используют предварительную загрузку JavaScript, заставляющую браузер завершить загрузку изображений (и других объектов) до того, как они понадобятся, и поместить их в кэш для испольювания в дальнейшем.
Чтобы обеспечить предварительную загрузку изображений, проще всего создать новый объект Image и задать источник изображения для предварительной загрузки в разделе <head> документа. Это заставит браузер начать загрузку изображения немедленно. Если только выполнение сценария не будет отложено, то сценарий сможет продолжить свою работу лишь после завершения загрузки изображения, поэтому предварительная загрузка будет гарантирована. Чтобы создать объект Image, используйте объектный конструктор new:

var myImage = new Image();

Конструктору можно передать значения width (ширина) и height (высота), но на практике это не имеет большого смысла, когда целью является предварительная загрузка:

var myImage = new Image(ширина, высота);

Для созданного объекта можно указать свойство src, чтобы браузер мог выполнить загрузку:

myImage.src = "Адрес URL изображения";

Рассмотрим следующий усовершенствованный пример использования изменяемой графики:

<!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 offImage = new Image(); // для неактивного состояния
offImage.src = "imageoff.gif";
var onlmage = new Image(); // для активного состояния
onImage.src = "imageon.gif";
}

function mouseOn()
{
if (document.images)
document.images.imagel.src = onlmage.src;
}

function mouseOff()
{
if (document.images)
document.images.imagel.src = offImage.src;
}
//-->
</script>
</head>
<body>
<a href="http://www.print.com" onmouseover="mouseOn();"
onmouseout="mouseOff();"><img src="imageoff.gif" name="imagel"
id="imagel" border="0" width="90" height="90" alt="" /></a>
</body>
</html>

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


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


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

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


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







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