Membuat efeck pecah dan muncul gambar ke 2 ketika cursor melintasi with jquery
1. Log in blogger, Rancangan, edit html,
2. cari kode ]]></b:skin> dan simpan css berikut tepat diatasnya :
2. cari kode ]]></b:skin> dan simpan css berikut tepat diatasnya :
.box_container{
margin-left:80px;
position:relative;
width:420px
;height:350px;
overflow:hidden;
color:white;
}
.images_holder{
position:absolute;
}
.image_div {
position:relative;
overflow:hidden;
width:50%;
float:left;
}
.kiri{
}
.kanan img{
margin-left: -100%;
}
margin-left:80px;
position:relative;
width:420px
;height:350px;
overflow:hidden;
color:white;
}
.images_holder{
position:absolute;
}
.image_div {
position:relative;
overflow:hidden;
width:50%;
float:left;
}
.kiri{
}
.kanan img{
margin-left: -100%;
}
Selanjutnya cari kode </head> dan letakkan kode berikut tepat di atas kode tadi :
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/>
<script type=’text/javascript’>
$(document).ready(function(){$('.box_container').hover(function(){var
width = $(this).outerWidth() /
2;$(this).find('.kiri').animate({right:width},{queue:false,duration:1000});$(this).find('.kanan').animate({left:width
},{queue:false,duration:1000});},
function(){$(this).find('.kiri').animate({ right : 0
},{queue:false,duration:1000});$(this).find('.kanan').animate({
left : 0 },{queue:false,duration:1000});});});
</script>
<script type=’text/javascript’>
$(document).ready(function(){$('.box_container').hover(function(){var
width = $(this).outerWidth() /
2;$(this).find('.kiri').animate({right:width},{queue:false,duration:1000});$(this).find('.kanan').animate({left:width
},{queue:false,duration:1000});},
function(){$(this).find('.kiri').animate({ right : 0
},{queue:false,duration:1000});$(this).find('.kanan').animate({
left : 0 },{queue:false,duration:1000});});});
</script>
simpan template….
Cara pemanggilannya, misalkan pada Edit Html Posting :
<div class=”box_container”>
<div class=”images_holder”>
<div class=”image_div kiri”>
<img class=”box_image” src=”https://lh4.googleusercontent.com/-eyPx-3u1DpM/TX4gFnOzW4I/AAAAAAAAAVw/9Q6eETk8ujs/s1600/iwan+%252C+ranu.jpg” style=”width: 420px;” /></div>
<div class=”image_div kanan”>
<img class=”box_image” src=”https://lh4.googleusercontent.com/-eyPx-3u1DpM/TX4gFnOzW4I/AAAAAAAAAVw/9Q6eETk8ujs/s1600/iwan+%252C+ranu.jpg” style=”width: 420px;” /></div>
</div>
<img class=”box_image” src=”https://lh6.googleusercontent.com/-dRrjPJYJjqw/TX4gC0RQzNI/AAAAAAAAAVs/JH6dY5IBuqw/s1600/full+happy.jpg” style=”width: 420px;” /></div>
<div class=”images_holder”>
<div class=”image_div kiri”>
<img class=”box_image” src=”https://lh4.googleusercontent.com/-eyPx-3u1DpM/TX4gFnOzW4I/AAAAAAAAAVw/9Q6eETk8ujs/s1600/iwan+%252C+ranu.jpg” style=”width: 420px;” /></div>
<div class=”image_div kanan”>
<img class=”box_image” src=”https://lh4.googleusercontent.com/-eyPx-3u1DpM/TX4gFnOzW4I/AAAAAAAAAVw/9Q6eETk8ujs/s1600/iwan+%252C+ranu.jpg” style=”width: 420px;” /></div>
</div>
<img class=”box_image” src=”https://lh6.googleusercontent.com/-dRrjPJYJjqw/TX4gC0RQzNI/AAAAAAAAAVs/JH6dY5IBuqw/s1600/full+happy.jpg” style=”width: 420px;” /></div>
Simpan……….
Usahakan
ukuran gambar keduanya sama, dan bila diatas kode </head> sudah
ada java script jquery nya <script
src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’
type=’text/javascript’/>; tak perlu ditambahkan lagi.