Size çok kullanışlı fakat sadece internet explorer ile çalışan filterları göstermek istiyorum. Filterlar istediğiniz bir sayfaya yada nesneye istediğiniz özel bir efekti uygulamanızı sağlar.Filter yada süzgeçleri sadece div ve span elementleri, inline resimler, form elementleri ile tablo elementleri için kullanabilirsiniz.
Aşağıda 2 örnek göstereceğim ve aşağıdaki link ile istediğiniz efekti oluşturup, gerekli kodu elde edebilirsiniz.
IE Filter Script'i için Tıklayın
Örneğin üzerine geldiğinde renk değiştiren resimlerden oluşmuş bir menu yapabilmek için JavaScript kullanmanız gerekir. Bunu filter yani süzgeçler ile çok basit bir şekilde yapabilirsiniz.
<img src="ourimage.jpg" onMouseOver="this.style.filter='Alpha(Opacity=90, FinishOpacity=50, Style=4, StartX=100, StartY=100, FinishX=100, FinishY=0); ';" onMouseOut="this.style.filter='';">
Bu örneği deneyin ve farkı görün.
Bazen ise üzerine geldiğinde yavaşça aşağıya doğru açılan menuler görürüz. Bu JavaScript ile yapmak için bir dizi karmaşık kod yazmanız gerekir. Bakın Filter ile ne kadar kolay;
<style type="text/CSS">
.Menu {visibility: hidden}
.menuMOver {visibility: hidden}
.Menu {filter:progid:DXImageTransform.Microsoft.DropShadow(color=#999999, offX=0, offY=0)
progid:DXImageTransform.Microsoft.Blinds(direction=down, bands=1)}
</style>
<script type="text/JavaScript">
var ActiveMenu = null;
var ActMenu = null;
function hideActive() {
if(ActiveMenu!== null) {
hideIt(ActiveMenu);
ActiveMenu = null;
}
}
function popMenu(M) {
hideActive();
ActiveMenu = document.getElementById(M);
if(ActiveMenu.filters) ActiveMenu.filters[1].apply();
showIt(ActiveMenu);
if(ActiveMenu.filters) ActiveMenu.filters[1].play(0.5);
}
function hideIt(object) {
object.style.visibility="hidden";
}
function showIt(object) {
object.style.visibility="visible";
}
function hideObj(div) {
document.getElementById(div).style.visibility = "hidden";
}
</script>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onClick="hideActive();">
<div id="myMenu" class="Menu">
<a href="1.HTML">1</a>
<a href="2.HTML">2</a>
</div>
<div class="menuDiv">
<div class="menuCol" onMouseOver="popMenu('myMenu');"><a href="#">LINK</a></div>
</div>
