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

Yorum(1)

GünCeraN

29 Mart 2009 11:24

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

Yorum Gönder