Biraz saçma oldu ama içine ben bir kaç tane resim ekleyerek göstermek istedim size bu örneği. Sayfada görünmeyen gizli ve animasyonlu açılır  çerçeveler kullanmak isteyenler için yapılmış bir örnek bu. Kendi isteğinize  göre içine menü yerleştirerek açılır bir menü de yapabilmeniz mümkün. Sayfada sadece png formatında hazırlanmış olan yuvarlak bir buton görünüyor. Web sitenin en üst sol tarafında sürekli sabit bir şekilde sayfa ile beraber aşağı ve yukarı hareket eden bir resimdir bu. Mouse ile  bu png butonun üstüne geldiğiniz anda buton aşağı doğru kayıyor ve ardından sağ tarafa  doğru içinde resimlerin olduğu çerçeve açılıyor. Mouseyi geri çektiğiniz zaman ise tekrar resim çerçevesi kapanıp buton da yukarı eski yerine geri gidiyor.

Kullanım

Head  etiketleri arasına eklenmesi gereken bölümler.

Js ve still dosyaları adresleri : 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="slayt-window.js" type="text/javascript"></script>

 Css : 

<style type="text/css" media="screen">
#sabit {
    visibility: visible;
    position: fixed;
    z-index: 9999;
    top: -240px;
}
#buton a {
    background-image: url(buton.png);
    background-repeat: repeat;
    width: 50px;
    height: 300px;
    float: left;
}
.panel {
    position: fixed;
    background-color: #000;
    top: 0px;
    margin-left: 40px;
    width: 0px;
    height: 210px;
    float: left;
    overflow: hidden;
    background: rgb(0, 0, 0);
    opacity: 0.9
}
.panel_ici_icerik img {
    background-color: #000;
    margin: 10px 20px 20px;
    width: 150px;
    height: 150px;
    float: right;
    border: solid 20px #333
}
.panel_ici_icerik img:hover {
    background-color: #000;
    margin: 10px 20px 20px;
    width: 180px;
    height: 180px;
    float: right;
    border: solid 5px #336
}
</style>

•  Body etiketleri arasına eklenmesi gereken bölüm.

<div id="sabit">
<div id="buton">
<a href="#"></a>
<div class="panel">
<div class="panel_ici_icerik">
<img src="resim1.jpg" alt="başlık 1" height="150" width="150" border="0"></div>

<div class="panel_ici_icerik">
            <img src="resim2" alt="başlık 2" height="150" width="150" border="0"></div>

<div class="panel_ici_icerik">
<img src="resim3" alt="başlık3" height="150" width="150" border="0"></div>

<div class="panel_ici_icerik">
<img src="resim4" alt="başlık4" height="150" width="150" border="0">
</div>