Заметки о вёрстке сайтов  ·  Александр Шуркаев об HTML, CSS и JavaScript (скрипты, справочники и примеры по сайтостроению)

Анимированный GIF и слои в Opera 5

6 июня 2001 г.

Описание проблемы анимированного GIF'а и слоёв в Opera 5.

На одном сайте мне необходимо было сделать так, чтобы при наведении «мышкой» на ссылку, один DIV сменялся бы на другой. Задача, вообще-то, тривиальная. Реализация тоже весьма лёгкая.

В самой ссылке пишем onMouseOver="toggle(0, 1)" onMouseOut="toggle(0, 0)". Во внешнем JavaScript файле у меня следующее:

/*
written by alexander shurkayev <alshur@ya.ru> | http://htmlcssjs.ru
*/

function fnLayerName(nNum){
    return sTxt+nNum;
}

var sOn=(bNN4) ? ".visibility="show"" : ".visibility="visible"";
var sOff=(bNN4) ? ".visibility="hide"" : ".visibility="hidden"";
if (bNN4){
    layerRef="document.layers['";
    styleSwitch="']";
}
if (bIE4){
    layerRef="document.all['";
    styleSwitch="'].style";
}
if ((bNN5) || (bOpera4)){
    layerRef="document.getElementById('";
    styleSwitch="').style";
}

function fnSetStyle(sLayerName, sStyle){
    eval(layerRef+sLayerName+styleSwitch+sStyle);
}

function toggle(nNum, hs){
    if (bBrowser3){
        if (hs==0){
            document.images[ImgNames[nNum]].src=Imgs[nNum].src;
            hide(fnLayerName(nNum));
        }
        if (hs==1){
            document.images[ImgNames[nNum]].src=ImgsOver[nNum].src;
            show(fnLayerName(nNum));
        }
    }
}

function show(sLayerName){
    if ((bBrowser4)&&(isLoaded)){
        fnSetStyle(sLogoName, sOff);
        fnSetStyle(sLayerName, sOn);
    }
}

function hide(sLayerName){
    if ((bBrowser4)&&(isLoaded)){
        fnSetStyle(sLogoName, sOn);
        fnSetStyle(sLayerName, sOff);
    }
}

Как видно из скрипта, вызываемая функция toggle вызывает, в свою очередь, функции show и hide. Всё замечательно, но загвоздка в том, что один из слоёв содержит рисунок. А точнее, анимированный GIF (<div id="logo" class="logobox"><a href="http://www.easports.com/"><img src="i/animlogo.gif" width="85" height="84" border="0" alt="EA Sports"></a></div>). Internet Explorer 4+ и Netscape Navigator 4+ замечательно переключают слои. Однако Opera 5.02 не справляется с этой задачей — при наведении «мышкой» на ссылку DIV'ы накладываются друг на друга. Поэтому в начале скрипта у меня находится следующее:

var nBrowserVersion=parseInt(navigator.appVersion);
var sBrowserName=navigator.appName;
var bNN4=(document.layers) ? true : false;
var bIE4=((document.all) && (nBrowserVersion >= 4) && (!window.opera)) ? true : false;
var bNN5=((sBrowserName == "Netscape") && (nBrowserVersion >= 5)) ? true : false;
//var bOpera4=((sBrowserName == "Opera") && (nBrowserVersion >= 4)) ? true : false;
var bOpera4 = false;//If a GIF is animated then it's buggy in Opera5.02 to hide/show a layer with this GIF.
var bBrowser4=((bNN4) || (bIE4) || (bNN5) || (bOpera4)) ? true : false;
var bBrowser3=(nBrowserVersion>2) ? true : false;

А вообще, Opera — хороший браузер. Настоятельно рекомендую.

Хитовые статьи про разработку сайтов

Рассылка новостей и новых статей

Сообщения будут приходить пару раз в неделю, не чаще

Объявления

LiveInternet