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


Программный код для работы с изменяемой графикой
Одним из путей обобщения программного кода для работы с изменяемой графикой является разработка соглашения о выборе имен для изображений и создание программного кода в соответствии с ними. Можно, например, всегда использовать с именами файлов изображений суффиксы "on" и "off", указывающие на назначение с оответствующих изображений. Тогда вопрос о том, какое из изображений следует отобразить на экране, можно будет выяснить в автоматическом режиме, рассмотрев имя и соответствующий суффикс. Лучше всего эта идея иллюстрируется с помощью примера:

<script type="text/javascript">
<!--

function preloadlmage(url)
{
var і = new Image();
i.src = url;
return i;
if (document.images)
{ // Загрузка изображений
var homeon = preloadlmage("homeon.gif");
var homeoff = preloadlmage("homeoff.gif");
var productson = preloadlmage("productson.gif");
var productsoff = preloadlmage("productsoff.gif");
// При вводе "myimage" данная функция устанавливает
// значение myimageon.src для src изображения
function mouseOn(imgName)
{
if (document.images)
document[imgName].src = eval(imgName + "on.src");
}

// При вводе "myimage" данная функция устанавливает
// значение myimageoff.src для src изображения

function mouseOff(imgName)
{
if (document.images)
document[imgName].src = eval(imgName + "off.src");
}
//-->
</script>

Обратите внимание на то, что здесь мы обобщили не только функцию подмены изображения, но и функцию предварительной загрузки.
Где-нибудь позже в файле HTML в обработчиках событий onmouseover и onmouseout, вызывающих соответствующие части сценария, будут использованы изображения с подходящими именами и ссылками:

<а href="home.html" onmouseover="mouseOn('home');" onmouseout="mouseOff('home');"><img src="homeoff.gif" height="50" width="100" name="home" id="home" border="0" alt="Home" /></a>
<br />

<a href="products.html" onmouseover="mouseOn('productsf);" onmouseout="mouseOff('products');"><img src="productsoff.gif" height="50" width="100" name="products" id="products" border="0" alt="Products"</a>

Вот полный текст примера:

<!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>Иcпoльзoвaниe изменяемой графики с предварительной загрузкой</title>
<meta http-equiv="content-type"
content="text/html; charset=windows-1251" />
<script type="text/javascript">
<!--
function preloadlmage(url)
{
var і = new Image();
i.src = url;
return i;
}

if (document.images)
{ // Загрузка изображений
var homeon = preloadlmage("homeon.gif");
var homeoff = preloadlmage("homeoff.gif");
var productson = preloadlmage("productson.gif");
var productsoff = preloadlmage("productsoff.gif");
}
// При вводе "myimage" данная функция устанавливает
// значение myimageon.src для src изображения

function mouseOn(imgName)
{
if (document.images)
document[imgName].src = eval(imgName + "on.src");
}
// При вводе "myimage" данная функция устанавливает
// значение myimageoff.src для src изображения
function mouseOff(imgName)
{
if (document.images)
document[imgName].src = eval(imgName + "off.src");
</script>
</head>
<body>

...Здесь размещается содержимое страницы...
<br />

<а href="home.html" onmouseover="mouseOn('home');"
onmouseout="mcuseOff('home');"><img src="homeoff.gif" height="50" width="100" name="home" id="home" border="0" alt="Home" /></a>

<br />

<a href="products.html" onmouseover="mouseOn('products');"
onmouseout="mouseOff('products');"><img src="productsoff.gif" height="50" width="100" name="products" id="products" border="0" alt="Products" /></a>
</body>
</html>

В таком сценарии изменяемой графики все зависит только от способности программиста использовать средства копирования и вставки и правильно записывать имена. Изменяемые изображения стали настолько привычными, что большинство редакторов HTML, использующих принцип WYSIWYG, уже могут сами генерировать программный код изменяемых изображений при условии получения от пользователя основных параметров.
Но программный код, получаемый в результате вырезания и вставки или заполн ния соответствующей формы, мы изучать не собираемся. Давайте рассмотрим нечт более сложное, чем простейшие варианты изменения изображений.


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


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

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


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







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