link iconuna mauseover yapımı?

Web Tasarımı - link iconuna mauseover yapımı? Sponsorlu Bağlantılar merhaba arkadaşlar linklerdeki iconlar bazı sitelerde üzerine gelince değişiyi yada renk değiştiriyo grafikler.nettede var anasayfa konularım v.s üzereine gelinde değişiyi nasıl yapılıyo...

Cevapla
link iconuna mauseover yapımı?
Blackman_05 isimli Üye şimdilik offline konumundadır

Blackman_05

Hiç Biri / İstanbul

Standart

link iconuna mauseover yapımı?

Alt 26-06-2009 #1
Sponsorlu Bağlantılar

merhaba arkadaşlar linklerdeki iconlar bazı sitelerde üzerine gelince değişiyi yada renk değiştiriyo grafikler.nettede var anasayfa konularım v.s üzereine gelinde değişiyi nasıl yapılıyo
Bu mesajdan alıntı yap
Sponsor Links

Grafikerler.net Reklamları

Ali Emre isimli Üye şimdilik offline konumundadır

Ali Emre(27)

Webmaster / İzmir

Standart
Alt 26-06-2009 #2
                             Sponsorlu Bağlantılar
Websitelerinin degismez ogelerinden biri de link menuleridir. Bircok website, bu menuleri daha da ilginc bir gorsel yapiya sokmak icin web tasariminda "roll-over" adini verdigimiz efektler kullanir. Bu Roll-Over efektini gerceklestirmek icin bircok websitesi JavaScript ve grafik kullanirlar. Halbuki ayni efekti saglamak icin CSS kullanabilirsiniz. Bu sayede, hem siteniz JavaScript’e bagimli kalmaz hem de daha da erisilir bir hale gelir.

Size, CSS ile roll-over efektinin nasil pisirilecegini ogretmeye calisacagim bu yazida.

Bu tarif icin gerekli malzemeler:

* 2 vazifeli grafik (istege bagli)
* 3 parca CSS kodu
* 1 tutam HTML listesi

Iki vazifeli grafik, bizim, bir resim ile iki kus vurmamizi saglayacak. Boylece roll-over yaratmak icin "on" ve "off" diye iki tane resime gerek kalmayacak. Benim bu ornekte kullanacagim resim asagida gorulmektedir:

link iconuna mauseover yapımı?

Yukarida gordugunuz gibi, bir grafik icinde, hem "off" grafigi, hem de "on" grafigi mevcut. Onemli nokta bu grafiklerin boyutlarinin ayni olmasi ve bu grafikleri iceren ana grafigin (yukarida goruldugu gibi) yuksekliginin, bu iki grafigin yuksekliklerinin toplamina esit olmasi.

Grafigimiz hazir. Simdi menuyu olusturacak HTML’i yazmaya baslayabiliriz. Ben, menu icin HTML 4.01 icinde mevcut olan <ol> elementini kullanacagim. <ol>'in <ul> den tek farki, <ul>'nin sirasiz liste; <ol>'nin ise sirali liste olusturmasi. Eger bir menunun, siralanmis bir liste oldugunu dusunursek, <ol> gibi bir HTML elementinin bu ornek icinde kullanilmasinin daha anlamli olacagini dusunuyorum. Iste HTML kodumuz asagidaki gibi olacaktir:

   1.   <ol id="menu">
   2. <li><a href="#" title="Birinci Link icin buraya tikla " accesskey="1">Birinci Link</a></li>
   3. <li><a href="#" title="Ikinci Link icin buraya tikla" accesskey="2">Ikinci Link</a></li>
   4. <li><a href="#" title="Ucuncu Link icin buraya tikla" accesskey="3">Ucuncu Link</a></li>
   5. <li><a href="#" title="Dorduncu Link icin buraya tikla" accesskey="4">Dorduncu Link</a></li>
   6. <li><a href="#" title="Besinci Link icin buraya tikla" accesskey="5">Besinci Link</a></li>
   7. </ol>
Menu listemizi olusturmak icin <ol> liste elementini kullandik. Ayrica <ol> listemize, CSS icinde kullanacagimiz ve referanslarda bulunacagimiz bir id verdik. id="menu" CSS icinde, bu listenin nasil gorunmesi gerektigini belirlememize yarayacak. Ayrica linkler icinde hem title hem de accesskey elementlerini kullandik.

title ve accesskey, erişilebilirlik icin onemli HTML elementleridir. title ile bu linkler hakkinda engelli kullanicilara daha fazla bilgi verebiliriz ve accesskey ile de fare kullanamayan engelli ziyaretcilerimizin klavye yardimi ile site icinde hareket etmelerini saglayabiliriz. Ornegin ALT+3 klavye tuslari bizi "Ucuncu Link" elementine goturecektir.

Butun bu asamalardan sonra CSS’imizi yazabiliriz. CSS bolumunde size 3 degisik CSS yazarak, 3 degisik menu sonucu elde etmenize yardimci olacagim. Birinci CSS size grafiksel dikey bir menu verecek.

1. CSS – Grafiksel Dikey Menu

#menu {margin: 0; padding: 0; font: bold 12px/24px Verdana, sans-serif;}
#menu ol, #menu li {margin:0; padding: 0 0 5px 0; list-style: none;}
#menu a:link, #menu a:visited {width:125px; height:26px; background: url(grafik.gif) no-repeat; color: #999; display: block; text-decoration: none; text-indent: 14px;}
#menu a:hover {background-position: 0 -26px; color: #900; text-decoration: none;}

Yukarida ki CSS’i incelerseniz goreceksiniz ki hazirladigimiz grafigi biz listedeki linkler icin arkaplan resmi olarak kullandik. Fakat yuksekligi 26 piksel vererek bu arkaplan resminin yanlizca bir kismini gostererek, grafigin "off" olarak gorunmesini sagladik. a:hover yani fare linkin uzerine geldiginde ise arkaplanin poziyonunu degistirerek grafigin "on" olmasini sagladik.Önizleme

2. CSS – Grafiksel Yatay Menu

#menu {margin: 0; padding: 0; font: bold 12px/24px Verdana, sans-serif;}
#menu ol, #menu li {display: inline; list-style-type: none; }
#menu a:link, #menu a:visited {width:125px; height:26px; background: url(grafik.gif) no-repeat; color: #999; float:left; margin: 0; text-decoration: none; text-align:center;}
#menu a:hover {background-position: 0 -26px; color: #900; text-decoration: none;}

Yukaridaki CSS, dikey menu CSS’ine cok benzemesine ragmen, sonuc bize yatay menu vermekte. Bunu saglayan ise display:inline; elementi ve float:left elementidir.Önizleme

Konu Mehmet Doğan'a Aittir.Teşekkür Ederiz.
Bu mesajdan alıntı yap
Blackman_05 isimli Üye şimdilik offline konumundadır

Blackman_05

Hiç Biri / İstanbul

Standart
Alt 26-06-2009 #3
çok tşkler kaç zamandır arıyordım
Bu mesajdan alıntı yap
Ali Emre isimli Üye şimdilik offline konumundadır

Ali Emre(27)

Webmaster / İzmir

Standart
Alt 26-06-2009 #4
Rica Ederim.
Bu mesajdan alıntı yap
Cevapla

Benzer Konular
Konu Konu Bilgileri Forum Cevaplar Son Mesaj
link kaldırma erdinksk Corel Draw Soru ve Sorunlarınız 2 15-06-2009 08:48:19
asp dersler(link) wwaslıww Php, Asp, Perl, Html 0 17-03-2009 14:45:07
Flashda link attrition Flash 2 01-03-2009 07:00:33
tek link brush sercansarigul Brush 13 17-07-2008 09:52:27

Kapat
Şifremi Unuttum?