Подгрузка изображений
Для того, чтобы эффект смены изображений проявился сразу после загрузки страницы, надо подгрузить изображения, которые будут сменять исходные в ответ на события мыши, написав в начале документа соответствующий скрипт. Для предыдущего примера с бабочками можно сделать это так:
<script type="text/javascript" language="JavaScript">
but1 = new Image();
but1.src = 'butterfly1.jpg';
but2 = new Image();
but2.src = 'butterfly2.jpg';
but3 = new Image();
but3.src = 'butterfly31.jpg';
</script>
В этом случае изображения подгрузятся заранее и в нужный момент будут взяты из кэша.
Определение типа браузера
И, разумеется, нельзя забывать определять тип браузера и в зависимости от него выполнять разные варианты сценария. Представив себе, что у кого-то еще может быть, например, MS Internet Explorer 3, не понимающий объекта Images, надо дописать еще пару операторов и подправить написанное ранее. Определить, способен ли браузер воспринять сценарий смены изображений, можно по крайней мере двумя способами.
Определить тип и версию браузера с помощью свойств объекта Navigator и, зная особенности браузеров, присвоить какой-нибудь переменной значение true либо false в зависимости от того, поддерживается ли объект Images ( назовем, например, эту переменную OK ) :
<script type="text/javascript" language="JavaScript">
var n=navigator.appName;
var v=parseInt(navigator.appVersion);
var Netscape=((n=="Netscape")&&(v>=3));
var Explorer4=((n=="Microsoft Internet Explorer")&&(v>=3));
var OK = ((Netscape)||(Explorer4));
</script>
Здесь переменная OK получит значение true (истина), если браузер - Netscape Navigator версии не ниже 3 или MS Internet Explorer версии не ниже 4, и значение false ( ложь) в случае MS Internet Explorer 3.
Непосредственно выяснить, определен ли объект Images в данном браузере:
<script type="text/javascript" language="JavaScript">
var OK = document.images;
</script>
Здесь переменная OK получит значение true (истина), если в браузере определен объект Images, и значение false ( ложь) в противном случае.
Теперь полученное значение переменной OK можно использовать как условие в условных операторах. Таким образом, сценарий должен быть по крайней мере таким:
<script type="text/javascript" language="JavaScript">
var OK = document.images;
if (OK)
{
but1 = new Image();
but1.src = 'butterfly1.jpg';
but2 = new Image();
but2.src = 'butterfly2.jpg';
but3 = new Image();
but3.src = 'butterfly31.jpg';
};
function changeImg(source)
{
if (OK) { document.pict.src = source + '.jpg' };
};
</script>