WEB DİZAYN
BOXES
Farklı bir uygulama daha size farklı uygulamalar ve bunları nasıl kodunuza gömeniz hakkında bilgiler vermeye çalısıyorum ve yararlı oluyorsa ne muTLu bana... KodunHead kısmına aşağıdaki gibi olmalıdır.
< script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js">< /script>
< script type="text/javascript">
$(document).ready(function(){
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});
< /script>
Body kısmına bu kodlar gömülmesi yeterli olacaktır.
< div class="boxgrid captionfull">
< img src="jareck.jpg"/>
< div class="cover boxcaption">
< h3>Jarek Kubicki< /h3>
< p>Artis< br/>< a href="#" target="_BLANK">Daha Fazlası< /a>< /p>
< /div>
< /div>
< div class="boxgrid caption">
< img src="kamil.jpg"/>
< div class="cover boxcaption">
< h3>Kamil Smala< /h3>
< p>Artis< br/>< a href="#" target="_BLANK">Daha fazlası< /a>< /p>
< /div>
< /div>
< div class="boxgrid slideright">
< img class="cover" src="martin.jpg"/>
< h3>Martin Stranka< /h3>
< p>Fotoğrafçı< br/> < a href="#" target="_BLANK">Daha fazlası< /a>< /p>
< /div>
< div class="boxgrid thecombo">
< img class="cover" src="florian.jpg"/>
< h3>Florian Nicolle< /h3>
< p>Grafik Tasarımcı< br/>< a href="#" target="_BLANK">Daha fazlası< /a>< /p>
< /div>
< div class="boxgrid slidedown">
< img class="cover" src="nonsense.jpg"/>
< h3>The Nonsense Society< /h3>
< p>Resim, Muzik, Kelime< br/>< a href="#" target="_BLANK">Websitesi< /a>< /p>
< /div>
< div class="boxgrid peek">
< a href="#" target="_BLANK">< img src="birss.jpg"/>
< a href="#" target="_BLANK">< img class="cover" src="buildinternet.jpg"/>< /a>
< /div>
