Клуб друзей



Эффект с прозрачностью картинки для кнопок навигации


Курсор мыши на первой кнопке

Курсор мыши на второй кнопке










Подведите курсор мыши к одной из кнопок. Хотите сделать подобный эффект? Как вы уже догадались, здесь медленно меняется степень прозрачности картинок. Вот только работает это в IE версии 4 и выше.
    То, что вы видите - Бэкграунд с изображением на нем черно-белых кнопок, поверх этих кнопок располагаются другие, но они прозрачны. Чтобы точно попасть на них другими кнопками, я заключил его в рамку таблицы, - тот же эффект будет и с фреймом, даже проще, так, как проще позиционировать в фрейме. Кнопки выводятся также при помощи таблицы, сложность только правильно попасть кнопкой на свое место. Далее JavaScript программа изменяет степень прозрачности в данном случае с 10% до 100% шагом 5, и интервалом между шагами 60 миллисекунд. Применяется в данном случае визуальный фильтр alpha из объекта filters. Этот объект содержит IE и вызывается напрямую из JS программы, только в самом начале загружаются рисунки со степенью прозрачности 10% обычным HTML-способом - style="filter:alpha(opacity=10)". Вызывается выполнение соответствующих функций традиционно событиями onMouseover и onMouseout.
    Вот текст программы:
В заголовке помещаем функции:

<head>
. . .
<script language="JavaScript">
function high(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",60) // задержка итераций
}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=10 // максимальная степень прозрачности
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100) // минимальная степень прозрачности
cur2.filters.alpha.opacity+=5 // шаг
     else if (window.highlighting)
clearInterval(highlighting)
}
</script>
. . .
</head>
    Помеченое красным можно установить на свое усмотрение. Нужно также иметь в виду, что браузеры, отличные от IE версии 4 и выше выдадут ошибку, поэтому лучше подстраховаться и сделать например альтернативную навигацию:

<script language = "JavaScript">
brname = navigator.appName;
brver = parseInt(navigator.appVersion);
    if (brname == "Microsoft Internet Explorer" && brver >= 4) {
. . . . .
}
         else {
. . . . .
}
</script>

    Затрудняетесь что в скобках вместо точек писать? Чтож, можно поместить такое:

{
document.writeln('Ждите, гружу в '+brname+', версии '+brver);
window.location.href = "URLname";
}

если поместить это вместо точек, и задать имя соответствующего документа HTML вместо URLname, то вполне нормально загрузится нужный документ, в первом случае для IE, во втором, тоесть в блоке за "else" - для всех остальных браузеров. Существуют и другие, более сложные способы, например заключать в IF - функции JS описанные ранее, но сложность составит при использовании этих функций, там тоже понадобится проверка, а записывать потом все позиционирование, а также и альтернативную навигацию при помощи выражения document.write() будет трудоемко.
    Теперь как использовать эти функции. В теле HTML-документа, в любом его месте пишем:

<a href="URLname" target="nameFrameOrWindow"><img src="myImage.jpg" border=0 alt="myText"style="filter:alpha(opacity=10)" onMouseover="high(this)" onMouseout="low(this)"></a>

где URLname - URL вызываемого по клику документа, myImage.jpg - URL картинки (кстати, JPEG или GIF нет разницы), которая и будет менять прозрачность. Начальная степень прозрачности в данном примере равна 10%, это значение желательно сделать одинаковым со значением в функции low() JS-программы. Значение "nameFrameOrWindow" - имя окна или фрейма, куда будет загружен документ. Его можно опустить, если загрузка осуществляется в основное окно или в тот же фрейм.
    Вы можете взять текст изображенный выше, а также скопировать HTML - текст этой страницы для более подробного рассмотрения, но при этом нужно будет скопировать бэкграунд внутри рамки таблицы bgkn.jpg, и две кнопки k1.jpg и k2.jpg
Удачного применения!


[<<Назад]

WDstudio © 2000г.