Ошибка: Failed to parse the Currency Converter XML document.
$18 057.17


Ошибка: Failed to parse the Currency Converter XML document.
$32 332.35


Ошибка: Failed to parse the Currency Converter XML document.
$13 696.80


Предварительная загрузка рисунков (preload) и перекат (rollover)

Если у вас есть серия изображений для предзагрузки, то вы можете воспользоваться функцией preLoad, которую я написал для подобных ситуаций, которая проста в работе и не требует каких-либо модификаций для работы функции переката (rollover).

function preLoad()
{
if(document.images)
{
var argLen = arguments.length;
for(var i = 0; i < argLen; i++)
{
var arg = arguments[i];
var sufLen = suffix.length;
     for(j = 0; j > sufLen; j++)
{
var suf = suffix[j]
self[arg + «_» + suf] = new Image();
self[arg + «_» + suf].src = iPath + arg + «_» + suf + «.» + iExt;

}
}
loaded = true;
}
}

Первая переменная, – iPath, – указывает путь к каталогу, который содержит изображения. Путь может быть абсолютный, относительный или указанный относительно корневой директории.

Вторая переменная, – iExt, – является расширением файла всех изображений. Около 99% времени мы тратим на загрузку изображений, которые формируют навигационную панель или используются в подобных целях. Вероятнее всего, расширение всех файлов будет одинаковым для всех изображений. В случае необходимости, лишь минимум усилий необходимо будет для изменения этого расширения.


Третья переменная, loaded, содержит булевское значение, которое указывает, действительно ли функция preLoad () вызвана , и изображения были загружены. Без этого, ваши изображения, которые вы используете в функции rollOver () не будет существовать, и если пользователь наведет курсор мыши на такую картинку до завершения загрузки страницы, вы получите сообщение об ошибке. Проверяя значения загруженной переменной в функции rollOver (), мы предотвращаем появление этой ошибки.

Четвертая переменная, suffix, фактически является массивом. В нем определяется префикс, который добавится к имени изображения, чтобы обозначить состояние, в котором изображение находится. Для моей задачи достаточно двух префиксов-on и off. Если вам для загрузки требуется более, чем два префикса, достаточно просто добавить общее количество состояний, в которых Вы нуждаетесь.

Что бы заставить это все работать, осталось сделать последний шаг-загрузить изображения. Вы можете сделать это несколькими путями. Единственное, что надо сделать-это составить список имен изображений для функции preLoad (), используемый как аргумент, для всех изображений, которые вам необходимо загрузить. Так, если необходимо загрузить изображения about, product, order, contact, и faq с префиксами on и off, то возможны следующие варианты:
Вызов функции preLoad () через обработчик события onLoad
<body onLoad=«preLoad(«about»,«product»,«order»,«contact»,«faq»)»>
Вызов функции через обработчик события window.onload в пределах блока <script>, вызывающего функцию preLoad ().
function onLoad()
{
preLoad(«about», «product», «order», «contact», «faq»);
}
window.onload = onLoad;
Вызов функции preLoad () через обработчик события onLoad для каждого изображения, к которому будет применена функция rollOver.
<a href=«about.html»
onMouseover=«rollOver(«about», «on»)»
onMouseout=«rollOver(«about», «off»)»>
<img name=«about» src=«images/about_off.gif»
onLoad=«preLoad(this.name)» height=«25»
width=«75» border=«0» alt=«About»></a>

Примечание: вышеупомянутый блок кода с функцией preLoad () предзагрузит файлы с префиксами on и off только для изображения about. Никакие другие изображения, нуждающиеся в предзагрузке, загружены не будут. Фокус состоит в том, чтобы добавить функцию preLoad (this.name) к каждому объекту, имеющему перекат (rollover), и следовательно нуждающемуся в предзагрузке изображений, связанных с ним.

Теперь, для того чтобы увидеть, как будет работать этот способ предзагрузки по сравнению со старым, приведем пример использования старого метода для тех же пяти ссылок, указанных выше.
if(document.images)
{
about_on = new Image();
about_on.src = «images/about_on.gif»;
about_off = new Image();
about_off.src = «images/about_off.gif»;
product_on = new Image();
product_on.src = «images/product_on.gif»;
product_off = new Image();
product_off.src = «images/product_off.gif»;
order_on = new Image();
order_on.src = «images/order_on.gif»;
order_off = new Image();
order_off.src = «images/order_off.gif»;
contact_on = new Image();
contact_on.src = «images/contact_on.gif»;
contact_off = new Image();
contact_off.src = «images/contact_off.gif»;
faq_on = new Image();
faq_on.src = «images/faq_on.gif»;
faq_off = new Image();
faq_off.src = «images/faq_off.gif»;
}

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

Приведем пример функции rollOver ():
function rollOver(iName, iState)
{
if(document.images && loaded)
    {
    document.images[iName].src = self[iName + «_» + iState].src;
    }
}

Вызвать эту функцию можно из html-документа:
<a href=«about.html» onMouseover=«rollOver(«about», «on»)»
onMouseout=«rollOver(«about», «off»)»>
<img name=«about» src=«images/about_off.gif»
height=«25» width=«75» border=«0» alt=«About»></a>

Есть три важных детали, которые следует отметить при рассмотрении вышеуказанного кода.

Атрибут name изображения такое же, как одно из значений, используемых функцией preLoad ().

Это то же значение используется как аргумент iName (первый параметр) функции rollOver ().

Инициируемое изображение должно иметь префикс off.

 

Интересное

Выявление признаков...
Наблюдение за состоянием жёстких дисков.По грубым подсчётам, 60% всех случаев повреждения винчестеров имеют механическую природу (износ подшипников, хрупких дисков и головок чтения/записи)....
Подробнее...
Delphi. Работа с реестром
Реестр — один из важнейших элементов windows. Там можно найти множество настроек windows и других программ. Сейчас программистов больше привлекает хранение опций своих программ в реестре нежели в...
Подробнее...
Как узнать информацию о...
Вы, возможно, видели нестандартные дельфийские компоненты, позволяющие сделать лог системы. Сейчас мы самостоятельно реализуем что-нибудь не хуже.Прежде всего, где хранится эта самая системная...
Подробнее...
Секреты популярности сайта
Подумайте, хорошо ли раскрыта тема вашего сайта на его страницах. Что в основном пользователь ищет в интернете? Информацию.От различных товаров до банальных новостей. Предоставляйте информацию на...
Подробнее...
20 самых бестолковых...
В 1985 году Microsoft дала жизнь Windows 1.0 C тех пор и началось уже 22-летнее господство этой самой популярной и самой раздражающей людей платформы. А вы никогда не задумывались, какие функции...
Подробнее...
Продвижение сайтов в...
Описание: Продвижение сайтов в поисковых системах и интернет-маркетинг поисковых машин очень актуальны в современном бизнесе для достижения коммерческого успеха. Эта книга — прежде всего...
Подробнее...
Adobe Photoshop и Corel Draw
Уважаемые читатели, что возникает в ваших головах при словосочетании «компьютерная графика»? Конечно, у рядового пользователя сразу возникает в голове какой-нибудь Терминатор или иное детище...
Подробнее...
Как узнать информацию о...
Вы, возможно, видели нестандартные дельфийские компоненты, позволяющие сделать лог системы. Сейчас мы самостоятельно реализуем что-нибудь не хуже.Прежде всего, где хранится эта самая системная...
Подробнее...
Шесть правил ухода за...
Мало кому приходит в голову протирать экран телевизора спиртом — так почему же у многих чешутся руки произвести подобное издевательство над монитором?!Причем можно было бы понять, если бы это...
Подробнее...
Перл для чайников от NS
Эту статью я решил написать, после того как узнал насколько сложно «врубиться» во всё, даже если у вас есть под рукой какое либо пособие по PERL. Везде, уже в самом начале, начинают ссылаться на...
Подробнее...