Hover Stili Resim Önizleme ve Asıl Resim Gösterme

-

İnternet tarayıcıların gelişimesiyle birlikte CSS tabanlı özellikler de artmaktadır. Önceden javascriptler kullanarak yaptığımız rollover resimleri artık css ile de yapabilmekteyiz. Öncelikle aşağıdaki biçimde CSS style'ımızı oluşturarak sayfamızın <head> tagı altında hazırlayalım.


<style type="text/css">
.onizleme
    {
      position: relative;
      z-index: 0;
    }

.onizleme:hover
    {
      background-color: transparent;
      z-index: 50;
    }

.onizleme span
    {
      position: absolute;
      background-color: #444444;
      padding: 2px;
      left: -1000px;
      border: 1px dashed #2F4F4F;
      visibility: hidden;
      color: #000000;
      text-decoration: none;
    }

.onizleme span img
    {
      border-width: 0;
      padding: 1px;
    }

.onizleme:hover span
    {
      visibility: visible;
      top: 0;
      left: 150px;
    }

</style>

Sonrasında aşağıdaki kodu sayfanızda rollover - hover resim kullanacağınız yere ekleyebilirsiniz. Ben aşağıdaki örnekte küçük resmin üzerine gelince büyük resim çıkacak şekilde ayarladım. İstediğiniz değişiklikleri css'i modifiye ederek hazırlayabilirsiniz.


<a class="onizleme" href="#thumb">
  <img height="117px" src="\kucukresim.jpg" width="125px" alt="küçükresim" />
  <span>
    <img id="yanresim" runat="server" alt="büyükresim" src="\buyukresim.jpg" />
  </span>
</a>
Anahtar Kelimeler:css, hover, roll over, image

Yorumlar

  1. GünCeraN29 Mart 2009 11:24

    Aradığım kodları bulduğum için çok sevindim. Kodlar için teşekkürler.

    YanıtlaSil

Yorum Gönder

Bu blogdaki popüler yayınlar

ORA-06502: PL/SQL: sayısal veya değer hatası: karakter dizesi arabelleği çok küçük hatası ve çözümü

-
"ORA-06502: PL/SQL: sayısal veya değer hatası: karakter dizesi arabelleği çok küçük" hatası Oracle'da veri girilen kolona girilmek istenen değer uzun olduğunda veya veri tipi uyumsuzluğunda ortaya çıkmaktadır. Sizin veri girmek istediğiniz kolon boyutu 3 karakter ama siz 4 karakterlik bir metin girmeye çaışırsanız bu hata ile karşılaşırsınız. kolon varchar2(3); UPDATE example SET kolon = 'abcd' Sorunun diğer sebebi ise tip uyumsuzluğudur. kolon number; UPDATE example SET kolon = 'a' Çözüm Hatadan kaçınmak için değişken tipi ve kolon tipi aynı olmalıdır. v_kolon example.kolon%type Veri boyutu kolon boyutunu geçmemelidir Anahtar Kelimeler: ORA-0650, DB hata mesejları, Oracle
Devamı

Ahmet Ümit - Sis ve Gece

-
Resim
Arka Kapak: "Yazarının Türkçe tutkunu, Türkçe vurgunu kişiliğiyle, eşine az rastlanır bir ustalıkla kotardığı bu roman, bence bugüne dek polisiye roman konusunda eşine rastlanmadık bir beceri ve başarı abidesidir." -Vedat Günyol, Cumhuriyet Kitap- "Ahmet Ümit'in sürükleyici bir anlatımı var. Romanın en başarılı yanı bu. Ve bu, bir polisiye roman için çok önemli. Bu bakımdan Ahmet Ümit'in polisiye romanda yolu açık görünüyor." -Fethi Naci, Yeni Yüzyıl- "Roman Polanski bu kitabı okusaydı mutlaka filme çekerdi. Ahmet Ümit bence iyi bir roman kurucusu... Çok bizden olan olay ve kişileri anlatırken klasik polisiyenin, özellikle hep birinci tekil ağızdan anlatılagelmiş Chandler romanlarının tadını duydum... Ama en ilginci, o ürpertici final. Tam bir sürpriz ve gerçek anlamda soğuk terler döktüren..." -Atilla Dorsay, Yeni Yüzyıl- "Eleştirmenlerin övgüsünü kazanan edebi niteliğe sahip olan ilk Türk polisiye romanı." -T. Sait Halman, ...
Devamı

Sık Kullanılan Regular Expression'lar

-
Resim
Önceki yazımda size Regular Expressionlar ve kullanımları hakkında bilgi vermeye çalıştım. Bu yazımda ise sıklıkla kullanılan bazı patternleri paylaşmak istiyorum. Regex'lerin kullanıcının girdiği verinin tutarlılığını sağlamakta çok önemli olduğunu belirtmek isterim. Ayrıca bir metin içerisinde bellirlenen bir şablona uyan kelimeleri seçmek içinde biçilmiş kaptandır. Örneğin; bir metin dosyası içerisindeki eposta adreslerini arıyorsanız eposta regex'ini kullanarak çok kolay bir biçimde bulabilirsiniz. Aynı örnekten devam etmek gerekirse kullanıcıdan eposta adresini girmesini istiyorsanız yine regexler işinizi görecektir. Böylece kullanıcı geçerli olmayan bir eposta adresini giremeyecektir. Buda hatayı en aza indirgeyip veri tutarlılığını arttıracaksınız demek oluyor. Sıklıkla Kullanıla...
Devamı