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;
- (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.
- 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.)
- İçerik üstü kısmına Şu kodu ekleyelim
<!-- 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>
- Sakın unutmayın eğer sizin tasarımınızda <body> den öncede bir kod var ise oradaki kodu şu şekilde yapın
Sizin sitenizin kodu
<script>
Benim verdiğim script Kodu
</script>
</head
- 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.
<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"> </div>
- (a href=) resme tıklandığında nereye yönlendirilsin kısmıdır.Örneğin <a href="www.staronline1.tr.ggl">
- <span></span> arasındaki yazı resmin altında çıkan yazı kısmıdır.
- İmg src= resmin urlsidir.
İşimiz bitmiştir Haydi kolay gelsin.....