mehmetduran.com - Paylaşmak Güzeldir...
Javascript - Css ile Saydamlık
Sitelerimizde saydam yapmak istediğimiz nesneleri javascript ve css yardımı ile saydam yapabiliriz. Bunun için aşağıda javascript fonksiyonunu sayfamızın head tagı arasına yazalım.

function makevisible(cur,which){
strength=(which==0)? 1 : 0.2;
if (cur.style.MozOpacity){cur.style.MozOpacity=strength}
else if (cur.filters){cur.filters.alpha.opacity=strength*100}}

Daha sonra da saydam yapacağımız nesneye aşağıda yazılan kodu ekleyelim.

style="filter:alpha(opacity=20);-moz-opacity:0.2"
onMouseout="makevisible(this,0.2)" onMouseover="makevisible(this,0)"

Örnekte saydamlık derecesi 0.2 olaraka alınmıştır. Bu değeri azaltıkça saydamlıkta azalmaktadır.
 

Böylece yukarıda kodu eklediğimiz nesne saydam hale gelmiştir. Bunun örneğini yukarıda ki menüden en sondaki `Rss` menüsünün üzerine gelerek açılan menüde görebilirsiniz.
İyi Çalışmalar.
Mehmet Duran 24 Haziran Salı 2008 5 19868 5,0
Javascript Web Tasarım Css Tasarım-Görsellik Opacity Saydam
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Css e-book Jquery ile Tab Şeklinde Menü Hazırlama Ajax 'Yükleniyor' Gifleri Ascii Generator dotNET Animated Gif Producer ile Gif'ler Hazırlayın
Yorumlar
Yorum Yaz
RSS Yorum Takibi
burak tankut 26 Ocak Pazartesi 2009 07:22 #1
süper ya saolun hocam.
Ömer 27 Ekim Salı 2009 21:10 #2
Firefoxta neden çalışmaz?
Mehmet Duran 27 Ekim Salı 2009 23:10 #3
Merhaba. Verdiğim ekran görüntüsü firefox'tan. Acaba hangi sürümü kullanıyosun? Javascript etkin mi? Eğer buralarda sorun yoksa kodlarına dikkat etmelisin. Zİra bu kodları denedim ve sitemde de kullanmıştım.
Ömer 28 Ekim Çarşamba 2009 00:48 #4
Sürüm 3.5.3 JS etkin.IE'de calısıyor fakat Firefoxda saydamlığı vermiyor.
Mehmet Duran 28 Ekim Çarşamba 2009 23:25 #5
Firefox 3.5 ile moz-opacity yerine direk olarak opacity kullanılıyor. Bu yüzden buradaki kodları (hem javascript hem de css kodları) biraz değiştirmen gerekiyor. (moz-opacity yerine opacity kullanmalısın) Ancak eski sürümlerde buradaki kodlar çalıştığı için tamamını kaldırmamanı öneririm.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Hizmet amaçlı işler başarıya, kar amaçlı olanlar ise başarısızlığa yöneliktir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009