Saydam Görsel | CSS | Uğur Keskin
Internet Explorer için saydam görsel özelliği filter: alpha(opacity=x) ile sağlanır, 0 ile 100 arası saydamlık değeri verilebilir. Diğer tarayıcılar için ise opacity: x ile sağlanır ve 0.0 ile 1.0 arası saydamlık değeri alabilir. Kodumuzun her tarayıcıda aynı sonucu vermesini istiyorsak her iki özelliği birden kullanmalıyız.
Görselimizin normal halini görelim...
Görselimizin saydam özelliği almış halini görelim...
Saydam örneğimizin CSS kodunu görelim...
img {
opacity: 0.5;
filter: alpha(opacity=50);
}
Saydam örneğimizin HTML/XHTML kodunu görelim...
<img src="test.jpg" width="200" height="150" alt="yuklenemedi" />CSS Mouseover Efekti - Mouseover Effect
Görselin üzerine fare işaretçisi ile birlikte geldiğimizde görselin saydam olmasını ya da saydam görselin üzerine fare işaretçisi ile birlikte geldiğimizde görselin normal olmasını mouseover efekti ile sağlayabiliriz. Aşağıdaki görsellerin üzerine fare işaretçisi ile gelerek efekti test edebilirsiniz.
Internet Explorer için mouseover ile saydam görsel özelliği this.filters.alpha.opacity=x ile sağlanır, 0 ile 100 arası saydamlık değeri verilebilir. Diğer tarayıcılar için ise this.style.opacity=x ile sağlanır ve 0.0 ile 1.0 arası saydamlık değeri alabilir. Kodumuzun her tarayıcıda aynı sonucu vermesini istiyorsak her iki özelliği birden kullanmalıyız.
Kodumuzda onmouseover ve onmouseout öznitelikleri yer alacak. Fare işaretçisi görsel üzerinde ise onmouseover özniteliğine verdiğimiz stil çalışacak, fare işaretçisi görsel üzerinde değil ise onmouseout özniteliğine verdiğimiz stil çalışacak.
Örnek olarak görelim...
İlk örneğin kodunu görelim...
<img src="test.jpg" width="200" height="150" alt="yuklenemedi"
style="opacity: 1.0; filter: alpha(opacity=100);"
onmouseover="this.style.opacity=0.6; this.filters.alpha.opacity=60"
onmouseout="this.style.opacity=1.0; this.filters.alpha.opacity=100" />
İkinci örneğin kodunu görelim...
<img src="test.jpg" width="200" height="150" alt="yuklenemedi"
style="opacity: 0.6; filter: alpha(opacity=60);"
onmouseover="this.style.opacity=1.0; this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.6; this.filters.alpha.opacity=60" />ÖRNEK:
