Staronline1

kod-dönen resim

Selam arkadaşlar öncellikle derse başlamadan önce bir kaç terimi öğretmem lazım.

<div id="featured" class="clearfix grid_12">    Bu kodun anlamı Bulunduğu yere 1050 genişliğinde çizgi koyar.

Ben koda koydum isterseniz siz silebilirsiniz ama koymanızı tavsiye ederim çüzkü resimler menüye felan kayabiliyor.

Gelelim kod yazımına;
  1. (bedava sitem için geçerlidir)Öncelikle bu kodun çalışması için web sayfanıın css kod ayarında olması lazım Ice blue da felan çalışmaz.
  2. Arkadaşlar hatırlarsanız biz web sayfasını 3e bölüyorduk.(Üst,Alt,Styl)Üst kısma <Body> ile contet kısmını aldığımız yerin <body>nin üstüne birde script kodu ekleyeceğiz (Resimlerin dönmesi için.)
  3. İçerik üstü kısmına Şu kodu ekleyelim
<head>
        <!-- Scripts -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://s3.amazonaws.com/nettuts/658_freeTemplate/Final%20File/js/jquery.roundabout-1.0.min.js"></script>
    <script type="text/javascript" src="http://s3.amazonaws.com/nettuts/658_freeTemplate/Final%20File/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript">       
        $(document).ready(function() { //Start up our Featured Project Carosuel
            $('#featured ul').roundabout({
                easing: 'easeOutInCirc',
                duration: 600
            });
        });
    </script> 
</head>
  1. Sakın unutmayın eğer sizin tasarımınızda <body> den öncede bir kod var ise oradaki kodu şu şekilde yapın
<head>

Sizin sitenizin kodu

<script>

Benim verdiğim script Kodu

</script>
</head
  1. Bunuda hallederseniz işimiz %90 tamamlandı şimdi size kaldı Bu resimler hangi sayfalarda olacak bu scripti koymak istediğiniz sayfaya şu kodu yapıştırın.
<div id="featured" class="clearfix grid_12">
            <ul>
                <li>
                    <a href="portfolio_single.html">
                        <span>Read about this project</span>
                        <img src="images/600x300.gif" alt="" />
                    </a>
                </li> 
                <li>
                    <a href="portfolio_single.html">
                        <span>Read about this project</span>
                        <img src="images/600x300.gif" alt="" />
                    </a>   
                </li> 
                <li>
                    <a href="portfolio_single.html">
                        <span>Read about this project</span>
                        <img src="images/600x300.gif" alt="" />
                    </a>
                </li> 
                <li>
                    <a href="portfolio_single.html">
                        <span>Read about this project</span>
                        <img src="images/600x300.gif" alt="" />
                    </a>
                </li> 
                <li>
                    <a href="portfolio_single.html">
                        <span>Read about this project</span>
                        <img src="images/600x300.gif" alt="" />
                    </a>
                </li> 
            </ul>
        </div>
        <div class="hr grid_12 clearfix">&nbsp;</div>
  1. (a href=) resme tıklandığında nereye yönlendirilsin kısmıdır.Örneğin <a href="www.staronline1.tr.ggl">
  2. <span></span> arasındaki yazı resmin altında çıkan yazı kısmıdır.
  3. İmg src= resmin urlsidir.


İşimiz bitmiştir Haydi kolay gelsin.....
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol