CSS ile Basit Şekilde Fare Üzerine Gelince(Rollover) Resim Değişimi Yapmak

Kasım 10th, 2008 • 75818 yorumhttp://www.fatihhayrioglu.com/css-ile-basit-sekilde-fare-uzerine-gelincerollover-resim-degisimi-yapmak/CSS+ile+Basit+%C5%9Eekilde+Fare+%C3%9Czerine+Gelince%28Rollover%29+Resim+De%C4%9Fi%C5%9Fimi+Yapmak2008-11-10+08%3A48%3A42fatih.hayrioglu CSS, Web Standartları, XHTML
Etiketler: fare üzerine gelince, link, resim, rollover

Daha önce bu konuya Resimli Menüler kısmında anlatmıştım, ama orada yapı daha karışık olduğu için anlaşılması ve basit uygulamalara uyarlanması konusunda sıkıntılar oluyordu. Bu işi daha basit bir örnek yardımı ile yapıp daha anlaşılır yapmak için beraber bir örnek yapalım.

Tek resimde işi halletmemiz, resmin sayfa yüklenmesinden önce yüklenmesi sebebiyle fare üzerine geldiğinde herhangi bir resim yükleme işlemini beklemediğimiz için daha akıcı olduğu gibi avantajlarını olduğunu daha önce anlatmıştık.

İlk olarak fare imlecinin üzerine geldiğinde değişecek resmin her iki hali yanyana gelecek şekilde yan yana veya alt alta gelecek şekilde tek resim olarak hazırlıyoruz(aradaki çizgiyi iki resim arasındaki ayrımı göstermek için koydum, normal resimde bu olmayacak)

Xhtml kodumuzu yazalım

<a class="anasayfayaDon" href="anasayfa.htm">Ana Sayfaya Dön</a>

CSS kodumuzu yazalım

a.anasayfayaDon {
    display: block;
    width: 80px;
    height: 80px;
    background: url(images/degisen_resim.gif) 0 0 no-repeat;
    text-decoration: none;
    text-indent:-999px;
}

a:hover.anasayfayaDon {
    background-position: -80px 0;
}

Yöntemi daha önce anlattığımız gibi ardalan kaydırmaca yöntemidir. Hazırladığımız ardalan resminin ilk olarak istediğimiz kısmını gösteriyoruz. Fare imleci üzerine geldiğinde ise yatayda aynı eksende bulunan başlangıçta görünmeyen resmi eksi konum vererek gösteriyoruz.

Örnek sayfayı görmek için tıklayınız

CSS ile Menü Yapmak II – Yatay Menüler

Kasım 6th, 2006 • 21139 yorumhttp://www.fatihhayrioglu.com/css-ile-menu-olusturmak-ii/CSS+ile+Men%C3%BC+Yapmak+II+-+Yatay+Men%C3%BCler2006-11-06+09%3A47%3A43fatih.hayrioglu CSS, Web Standartları, XHTML
Etiketler: CSS, link, menü, örnek, Web Standartları, XHTML, yatay-menüler

Yatay Menüler

Bir önceki makalede dikey menüye bir örnek yapmıştık. şimdi de yatay menülere bir örnek vereceğiz. Önceki makalede bahsettiğimiz gibi yatay ve dikey menüler belli bir yere kadar kodlaması aynıdır. Biz aynı olan kısmı geçip sonrasına devam ediyoruz.
Okumaya devam edin »

CSS’i Web Sayfalarına Eklemek

Temmuz 23rd, 2006 • 9123 yorumhttp://www.fatihhayrioglu.com/cssi-web-sayfalarina-eklemek/CSS%27i+Web+Sayfalar%C4%B1na+Eklemek2006-07-23+18%3A47%3A36fatih.hayrioglu CSS, Web Standartları, XHTML
Etiketler: CSS, css eklemek, import, link, style, Web Standartları, XHTML

1- Kod içinde (In-line)

Direk olarak (X)HTML elementin içine style özelliği kullanılarak uygulamak. Okumaya devam edin »

Sözde-sınıflar(Pseudo-class) ve Sözde-elementler(Pseudo-elements)

Temmuz 22nd, 2006 • 8632 yorumhttp://www.fatihhayrioglu.com/pseudo-siniflari-ve-pseudo-elementleri/S%C3%B6zde-s%C4%B1n%C4%B1flar%28Pseudo-class%29+ve+S%C3%B6zde-elementler%28Pseudo-elements%292006-07-22+17%3A36%3A01fatih.hayrioglu CSS
Etiketler: CSS, link, Pseudo-elementleri, Pseudo-sınıfı, sözde-elementler, sözde-sınıflar

Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi.) Okumaya devam edin »