Справочник по CSS : Фильтры в Internet Explorer : Динамические фильтры : Inset

Материал из Справочник Web-языков.

								GradientWipe
Главная	::.	CSS	::.	Фильтры в Internet Explorer	::.	Динамические фильтры	::.	Inset
								Iris

[править] Inset()

Новое содержимое элемента страницы диагонально заменяет старое

[править] Синтаксис фильтра Inset():

Где:	Общий пример использования:	Совместимость:
HTML	<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.Inset(sProperties)" ... >	Internet Explorer 5.5 или выше
Script	object.style.filter="progid:DXImageTransform.Microsoft.Inset(sProperties)"	Internet Explorer 5.5 или выше

Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

[править] Свойства, используемые в фильтре Inset():

Атрибуты Исползуются в HTML	Свойства Исползуются в скриптах	Описание
duration	Duration	Задает или возвращает продолжительность преобразования в секундах.
enabled	Enabled	Задает или возвращает признак разрешения применения фильтра. Свойство может принимать следующие значения true - разрешает применить фильтр (значение по умолчанию) false - не разрешает
	Percent	Задает процент выполнения преобразования. Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).
	Status	Возвращает состояние выполнения преобразования. Свойство может принимать следующие значения 0 - если преобразование было остановлено 1 - если оно было применено 2 - если преобразование выполняется

[править] Методы, которые могут быть применены к фильтру Inset():

Метод	Описание
apply	Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите. Для того, чтобы запустить преобразование, используйте метод Play().
play	Запускает преобразование.
stop	Немедленно останавливает преобразование.

[править] Примеры использования динамического фильтра Inset():

Пример 1:

<SCRIPT>
var bToggle = 0;
function fnToggle() {
    oDiv.filters[0].Apply();                   
// После того, как применяется метод Apply к выбранному объекту
// фильтр не запустится пока не будет вызван метод Play

    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.style.backgroundColor="gold";}
    else {
        bToggle = 1;
        oDiv.style.backgroundColor="blue";}  
    oDiv.filters[0].Play(duration=2);  // Set duration as a parameter of Play.
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON><BR/><BR/>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
                filter:progid:DXImageTransform.Microsoft.Inset( );">
</DIV>

Пример 2:

<SCRIPT>
var bTranState = 0;
function fnToggle() {
		oDIV2.filters[0].Apply();
	if (bTranState) { 
		bTranState = 0;
		oDIV2.style.visibility="hidden";    }
	else {  
		bTranState = 1;
		oDIV2.style.visibility="visible";   }
		oDIV2.filters[0].Play();
}
</SCRIPT>

<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>

<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px;
background:gold"> This is DIV #1  </DIV>

<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; 
width:240px; height:160px; background: yellowgreen; 
filter:progid:DXImageTransform.Microsoft.Inset()">
<BR>This is DIV #2</DIV>