Zoque
Dirsek Teması:
Geri Dön Zoque » Webmaster Kaynaklari » Makaleler » Bağlantılarda Simge Kullanmak (css attribute kullanımı)

Bağlantılarda Simge Kullanmak (css attribute kullanımı)

 
Konuyu Paylaş Article Tools
Ceyhun Aksan Ceyhun Aksan şu an çevrimdışı
 
Ceyhun Aksan's Avatar
Üyelik Tarihi: 29.01.2005
Mesaj: 611
07.02.2007 | 19:58

CSS ile tasarım yapmanın güzelliklerinden biri de geliştirilebilir ve kullanılabilir uygulamalar hazırlarken bize kazandırmış olduğu esneklik. Önceki bir yazımda size ziyaret edilen bir link ile yeni/eski yazı uygulamasının nasıl hazırlanabileceğini anlatmıştım. Şimdiki yazı ise bunun biraz farklı bir kullanımı ama uygulayacağımız kodlar yine hyperlink ( href ) üzerine şekillenecek.

Buna verilebilecek bir çok örnekten şimdi yine bir tanesini anlatayım. Yazıyı buradaki örnek üzerine hazırlamak istedim.

Simgeleriniz
web sitenizin hitap ettiği adresleri düşünün. Daha çok ne tür bağlantılar içeriyorsunuz?
Dosya bağlantıları, e-posta adresleri, web siteleri vs. Çünkü her adres türü için özel simgeler kullanabileceksiniz. Yalnız şunu da belirtmek isterim, şu an için bu yöntemi standart uyan internet tarayıcıları desteklemekte -Firefox, Safari, IE7 ve diğerleri-

Alıntı:
() site içi bağlantı
Siteniz içinde başka bir sayfaya bağlantı verdiğimizde kullanacağız.

() E-Posta içeren bağlantılarda kullanacağız.

() PDF dosyası içeren bağlantılarda kullanacağız.

() WORD dosyası içeren bağlantılarda kullanacağız.

() EXCEL içeren bağlantılarda kullanacağız.
... ve buna benzer bir çok simge ile farklı özelleştirilebilir bağlantılar hazırlayabilirsiniz.

Şimdi örnekleri nasıl hazırlayabileceğimizi anlatayım. Bu arada yukarıda belirttiğim gibi sadece standart kodları destekleyen internet tarayıcıları ile bu uygulamaları görüntüleyebilirsiniz. Fakat yazının ilerleyen kısımlarında genel olarak çalışan bir uygulamayı da anlatacağım. Dileyen istediği gibi kullanabilir.

Nasıl Uygulayacağım?
Normalde linklerimiz benim de hali hazırda uyguladığım gibi genel olarak farklı renklerde ve altı, üstü, sağı, solu çizgili olarak sunulmakta. ( Örnek bir link gibi. )

Şimdi bir *.pdf dosyasına link vermiş olsam, kullanıcı bu bağlantının üzerine gelip status bar`a bakmadıkça ya da ben bağlantının yanında bunu belirtmedikçe kullanıcı bunun farkına varmayacaktır. Bu da link tıklandığında kullanıcının bir süre bekleyip *.pdf dosyasının açılmasını bekleyecektir. Ya da başka bir siteye link verdiğimde kullanıcı bu sayfadan ayrılmak durumunda kalacaktır. Bu nedenle uygulamamız kullanışlılık açısından önem arzetmektedir.

Uygulamalar
PDF dosyasını bağlantı olarak belirtmekle başlayalım.
Kod:
a[href $='.pdf'] { 
   padding-right: 18px;
   background: transparent url(icon_pdf.gif) no-repeat center right;
}
Kodu incelediğimizde, style dosyası içerisinde a parametresi içerisinde yer alan bağlantıda *.pdf adresi aranmakta ve bulunduğunda sağ alandan 18 px`lik bir boşluk oluşturulup buraya background-image olarak pdf simgesi yerleştirilmektedir.

Kod:
<a href="./files/holidays.pdf">Tatil Rehberim</a>
E-Posta bağlantılarında ise durum biraz daha farklı. Normal dosyalara verdiğimiz bağlantılarda href $='.pdf' olarak belirttiğimiz bölümde yer alan $ bağlantı içerisinde yer alan uzantıyı kullanmamıza olanak tanırken e-posta adresinde bu alanda ^="mailto:" yani ^ kullanacağız. Çünkü e-posta adresleri href="http:// yerine href="mailto: olarak tanımlandırılmaktadır.

Kod:
a[href ^="mailto:"] {
   padding-right: 20px;
   background: transparent url(icon_mail.gif) no-repeat center right;
}
olarak belirttiğimiz style tanımlandırılması sonucunda;

Kod:
<a href="mailto:billg@Microsoft.com">E-Posta Gönder</a>
Örnek
site Dışı bağlantılar hazırladığımızda ise bir class oluşturmamız gerekmektedir. Kullanırken ise belirttiğimiz adresin türüne göre classı ekleyeceğiz.

Kod:
a[href ^="http://"] {
    padding-right: 18px;
    background: transparent url(icon_external.gif) no-repeat center right;
}
şeklindeki style satırımızda popup olarak belirttiğimiz classlarda yine yukarıda da anlattığımız padding ve background-image değerleri belirtilmekte.

Kod:
<a href="http://www.ceyhunaksan.com">Yardım Sayfası</a>
Diyelim ki JavaScript ile hazırladığınız popup sayfalarınız var o halde;

Kod:
a[href ^="JavaScript:"] {
    padding-right: 18px;
    background: transparent url(icon_external.gif) no-repeat center right;
}
Kod:
<a href="JavaScript:pencere();">Sayfa</a>
kullanımını tanımlandırabilirsiniz.

Örnek kullanım için askthecssguy.com sayfasında yer alan şu dosyası inceleyebilirsiniz. Benim son anlattığım bağlantılar kısmı bu verilen örnekte yer almadığı için yazımdaki kodları temin edebilirsiniz.

Genel Olarak Nasıl Standart Sağlayabilirim?

Yazı içerisinde de belirttiğim gibi Firefox, IE7 ve Safari gibi standart kodları -en azından bir kısmını- destekleyen internet tarayıcılarının dışında yukarıdaki style kodlarını görüntüleyememekteyiz.

Böyle bir durumla karşılaşmamak için yapmamız gerekenler ise kullanım alanlarımıza uygun olarak classlar hazırlamak.
Örneğin mail adresleri için tüm internet tarayıcılarında aynı görüntüyü elde etmek istiyor isek;

Kod:
a .mail {
   padding-right: 20px;
   background: transparent url(icon_mail.gif) no-repeat center right;
}
Kod:
<a href="mailto:billg@Microsoft.com" class="mail">E-Posta Gönder</a>
kullanmamız gerekmektedir. Aynı yöntemi diğer kullanım parametrelerinde de izlemeliyiz.

Ayrıca sitede hazırlanmış bir js dosyası ile belirtilen adreslerin faviconlarını gösterebilirsiniz.

Ancak unutmamamız gereken bir husus da bu ve buna benzer uygulamalarda kullanılacak js betiklerinin sayfanın yüklenmesini olumsuz etkileyecek olmasıdır. İnternet tarayıcılarında standart olarak CSS uygulamalarına cevap verene programların dışında IE6 gibi eski tür tarayıcılarda aynı şekilde uygulayabilmemiz için ise gerektiğinde js dosyasını çalıştırılabilir kılabiliriz. Böylelikle sadece istediğimiz tarayıcıda js yükleneceğinden mümkün olduğu kadar sorunun önüne geçmiş oluruz.
Kod:
<!--[if IE 6]>
script dosyası
<![endif]-->
Bu şekilde js dosyasının sadece IE6`da çalışmasını sağlayabiliriz, diğer internet tarayıcılarında da yukarıda anlatılan attribute selectors uygulamalarını çalıştırabiliriz.

selectors attribute kullanılarak örnekler geliştirilebilir.
__________________
.
Blog - Portfolio - İletişim - FriendFeed
.
  Alıntı yap
sahip sahip şu an çevrimdışı
 
sahip's Avatar
Üyelik Tarihi: 29.11.2002
Mesaj: 1,166
08.02.2007 | 15:45

Ceyhun çok güzel ve kapsamlı olmuş yazın.
Ellerin sağlık.

İlk baştaki ikon dışarıya/ başka siteye bağlanı olması gerekiyor, cssguy ' ın sitesinde öyle diyor sanırım.

Bu arada senin site çalışmıyor mu?
__________________
YENİ: POOZZ
PEYKit.com : kolay reklam, ilan aracı
SuniPeyk RSS
  Alıntı yap
Ceyhun Aksan Ceyhun Aksan şu an çevrimdışı
 
Ceyhun Aksan's Avatar
Üyelik Tarihi: 29.01.2005
Mesaj: 611
08.02.2007 | 21:58

Teşekkürler sahip
Evet ilk simge için öyle yazılmış ancak ben biraz yazıyı değiştirip bizim kullanımlarımıza göre düzenledim. Örneğin kendi sitemde site içi linklerde simge çıkartmıyor, dış bağlantılara simge koyuyorum... gibi.

Anlamadım, son zamanlarda sunucu kaynaklı sorunları sıklıkla yaşamaya başladım. Sanırım değişiklik yapacağım sunucuda :\
__________________
.
Blog - Portfolio - İletişim - FriendFeed
.
  Alıntı yap
Nous Nous şu an çevrimdışı
 
Nous's Avatar
Üyelik Tarihi: 09.05.2006
Mesaj: 13
14.02.2007 | 23:30

makale çok güzel ellerine sağlık hocam.
ek olarak bende bir şey eklemek istiyorum. geçenlerde yabancı sitelerin birinde bir CSS kodu buldum fare tekerlegini tıklayarak sayfayı aşşagı yukarı kaydırırken o iğrenf default simgeyi değiştirmeye yarıyor.. gayette güzel oluyor

Kod:
HTML>img
{
width: 0!important;
height: 108px!important;
padding-left: 48px!important;
background: url(http://netkozmos.com/mause.png) no-repeat;
}
tekrar teşekkür ediyorum makale için..
  Alıntı yap
Ceyhun Aksan Ceyhun Aksan şu an çevrimdışı
 
Ceyhun Aksan's Avatar
Üyelik Tarihi: 29.01.2005
Mesaj: 611
15.02.2007 | 11:14

Alıntı:
Ashra tarafından gönderilen mesaj: Mesajı Görüntüle
makale çok güzel ellerine sağlık hocam.
ek olarak bende bir şey eklemek istiyorum. geçenlerde yabancı sitelerin birinde bir CSS kodu buldum fare tekerlegini tıklayarak sayfayı aşşagı yukarı kaydırırken o iğrenf default simgeyi değiştirmeye yarıyor.. gayette güzel oluyor

Kod:
HTML>img
{
width: 0!important;
height: 108px!important;
padding-left: 48px!important;
background: url(http://netkozmos.com/mause.png) no-repeat;
}
tekrar teşekkür ediyorum makale için..
Rica ederim, bu arada belirttiğin kod içi teşekkürler. bir süre önce bu konuda bir araştırma yapmıştım ve bu uygulamanın ff`de çalışıyor. Alternatif uygulamalar hazılandığında ilgili bir yazı hazırlanabilir aslında.

Ben de teşekkür ederim.
__________________
.
Blog - Portfolio - İletişim - FriendFeed
.
  Alıntı yap
Nous Nous şu an çevrimdışı
 
Nous's Avatar
Üyelik Tarihi: 09.05.2006
Mesaj: 13
16.02.2007 | 07:19

evet şu an bir tek firefoxta çalışıyor olması kötü. detaylı araştırmıştım ie için bir şey bulamadım..
  Alıntı yap
Comment

Etiketler

kullanimi , attribute , css , kullanmak , simge , baglantilarda

Article Tools


 
Zoque'a hoşgeldiniz!
Zoque, 27.02.1999 tarihinde yayın hayatına başlamış, paylaşıma dayalı bir oluşumdur. Tasarım, teknoloji, web, kültür ve sanat ana başlıkları altında bilgi paylaşımı ve benzer değerlere sahip katılımcıların birbirleriyle iletişime girmelerine imkan sağlar. Bu amaçla saygın ve ciddi bir ortamda yardımlaşmak, haberleşmek, kendi bildiklerini diğer katılımcılarla paylaşmak isteyen, oluşumumuza düzenli katılımda bulunacağı inancını taşıyan konuklarımızı üye olmaya davet ediyoruz. [ » ]

Üye Girişi:

Connect with Facebook
Son Eklenen 20 Konu
BlogKüme'yi destekliyoruz
Kitap okuyor musunuz? Ne kadar peki?
Zoque'a sponsor olmak ister misiniz?

Zoque RSS Aboneliği Zoque RSS Aboneliği
En yeni konuları günün ilk ışıkları ile sabah kahvenizin yanında okumak ister misiniz?

Forum Yazılımı: vBulletin® Version 3.8.3 Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.3.0 vbulletin

Arayüz/Skin "Güneş" © www.zoque.com / net. Copyright © 1999 - 2009
Konu powered by GARS 2.1.8m ©2005-2006
Forum Saati GMT +2. Şu anda saat: 04:23.