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ı

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ı

Açılış Sayfalarını web.config Üzerinden Ayarlama

-
Resim
Hazırladığınız web sitesinin açılış sayfasını, IIS ayarlarına hiç dalamadan dileğinizi gibi değiştirmek mi istiyorsunuz? bu yazı tam size göre. Normalde bir siteyi yayınlamaya başladığınızde ISS'te önceden tanımlanmış dosya adlarını arayarak sitenizi açmak ister. Mesela IIS 7.0'daki default file (varsıyalan belge) tanımları şöyledir: Default.htm Default.asp Index.htm Index.html Iisstart.htm ISS sitenizde yukarıdaki dosyaları sırasıyla tarar ilk önce hangisini bulur ise o sayfası açar. ISS üzerinde kendi sitenize gidip Default Document sekmesinden kendi dosyalarınızıda tanımlayabiliyorsunuz. Örnegin giris.aspx dosyasını açılış sayfası olmasın istiyorsanız, IIS üz
Devamı