Новая версия сайта находится по адресу
wa.artel.by
Материал взят с сайта http://www.xs4all.nl/~ppk/js/ с нарушением всех авторских прав. Перевод и адаптация by FireFalcon.
Только не думайте, что я сомневаюсь в вас. Уж скрипт для замены рисунков написать может практически кто угодно. Однако... Однако есть довольно много мелких фенечек, которые и не сразу заметишь. Допустим, я не замечал. Конечно, большинство из вас внимательнее и упорнее, чем я. Но для тех, кто все таки сомневается, эта статья. Итак, замена изображений на onMouseOver.
Кусочек полезных замечаний:
К сожалению, в Netscape 6 оказался недокументированный баг, который делает этот скрипт (кстати, и большинство других mouseover скриптов) ненадежным. Когда пользователь наводит мышу на линк-картинку, а страница еще не до конца загрузилась, Netscape 6 сбивается с толку и может потерять предварительно загруженные изображения. Поэтому здесь добавлен метод, который не дает Netscape 6 выполнять функцию на onMouseOver, пока страница не до конца загружена. Решение не идеальное. Некоторые версии NN6 все равно имеют проблемы. Но он устраняет худшие проблемы.
// переменные
var base= "pix/mo_"
var nrm = new Array();
var omo = new Array();
var stuff = new Array('home','place');
var loaded = (!(navigator.userAgent.indexOf('Netscape6')+1));
// Pre-load часть.
if (document.images)
{
for (i=0;i<stuff.length;i++)
{
nrm[i] = new Image;
nrm[i].src = base + stuff[i] + ".gif"
omo[i] = new Image;
omo[i].src = base + stuff[i] + "_omo.gif";
}
}
// функции: первая mouseover, вторая mouseout
function over(no)
{
if (document.images && loaded)
{
document.images[stuff[no]].src = omo[no].src
}
}
function out(no)
{
if (document.images && loaded)
{
document.images[stuff[no]].src = nrm[no].src
}
}
В BODY вставляем onLoad, который устанавливет переменную loaded в true. Это для устранения бага Netscape.
<BODY etc. onLoad="loaded = true">Как встраивать onMouseOver в HTML вы все знаете...
<A HREF="whatever.html" onMouseOver="over(0)" onMouseOut="out(0)"><IMG SRC="pix/mo_home.gif" NAME="home" etc.></A>Поговорим о переменных.
var base= "pix/mo_"
var nrm = new Array();
var omo = new Array();
var stuff = new Array('home','place');
base - это путь к графическому файлу + начальная часть имени этого файла; nrn и omo - массивы, необходимые для предварительной загрузки изображений и при замене изображений; stuff хранит имена изображений.
var loaded = (!(navigator.userAgent.indexOf('Netscape6')+1));
Ета штука для исправления бага Netscape 6. Если строка Netscape6 не присутствует в navigator.userAgent, indexOf() возвращает -1 + 1 = 0 (boolean false). Если присутствует, то indexOf возвращает число большее 0 (boolean true). Потом инверсирует boolean (!). Так что в Netscape 6 выдается false, а все остальные браузеры - true. True обозначает исполнять функцию, false - не исполнять. В Netscape 6 по этой причине переменная будет false, пока страница не загрузится до конца (в onLoad мы установили ее true, так что функция может мсполняться). Во всех остальных браузерах переменная всегда true.
Рассмотрим еще одну фенечку этого скрипта, которая может вызвать любопытство.
if (document.images && loaded)
Эта строчка проверяет, а вообще поддерживает ли браузер document.images? Если нет, то ничего не будет. Точнее, изображение не будет меняться. Потом чекаем переменную loaded. Если она false (если браузер Netscape 6 и страница не до конца загрузилась), функция не исполняется. Только если переменная true - все начинает работать.
Ну а все остальное должно быть понятно интуитивно.
