0 Cara Membuat Efek Hover Image Yang Keren Seri 2

Cara Membuat Efek Hover Image Yang Keren Seri 2:
Tumpang tindih script di setiap DIV pada halaman
Anda amat sempurna dengan kotak overlay ketika
mouse terarah pada gambarnya. Dengan efek
pergeseran menimbulkan gambar atau teks yang lain
dibalik gambar yang pertama. Ditambah lagi dengan
adanya efek slide dari arah kiri ke arah kanan.

Contohnya dapat Anda lihat seperti di bawah ini :

Syamsudinnamaku
Syamsudinpunya
Syamsudinnamaku
Syamsudinpunya

Syamsudinpunya
Syamsudinnamaku
Syamsudinpunya
Syamsudinnamaku

Syamsudinnamaku
Syamsudinpunya
Syamsudinnamaku
Syamsudinpunya

Dan berikut adalah cara untuk membuatnya :

1. Rancangan -> Tambah
Gadget ->
HTML/JavScript.

2. Masukkan ke dalam
kontennya
kode berikut ini
kemudian simpan.

<div class="imagecontainers" data-overlayid="springinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://www.javascriptkit.com/script/script2/spring.jpg" />
</div>

<div class="imagecontainers" data-overlayid="summerinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://www.javascriptkit.com/script/script2/summer.jpg" />
</div>

<div class="imagecontainers" data-overlayid="winterinfo" style="display:block-inline;width:200px;height:150px">
<img src="http://www.javascriptkit.com/script/script2/winter.jpg" />
</div>

<div id="springinfo">
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
</div>


<div id="summerinfo">
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
</div>


<div id="winterinfo">
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
<a href="http://www.syamsudinnamaku.blogspot.com" target="_blank">Syamsudinnamaku</a><br />
<a href="http://www.syamsudinpunya.blogspot.com" target="_blank">Syamsudinpunya</a><br />
</div>

KETERANGAN :

Ganti semua link yang ada pada kode di atas

dengan link apa saja yang Anda inginkan.

Ganti juga URL gambarnya dengan URL

gambar yang Anda kehendaki.

Sesuaikan pula ukurannya.

3. Kemudian masuk ke Edit HTML

4. Carilah tag </head>

5. Copy kode berikut dan letakkan
di atas tag </head> ini.
Pratinjau lalu simpan template Anda.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script src="http://www.javascriptkit.com/script/script2/overlaybox.js">

/***********************************************
* DIV Content Overlay script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* User http://syamsudinnamaku.blogspot.com/
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>

<script>

jQuery(function($){ //on document.ready

$('#info').overlaycontent({ //initialize overlay on single DIV with id="info"
 speed:500, //duration of animation in milliseconds
 dir:'up' //supports 'up', 'down', 'left', or 'right'
})

$('div.imagecontainers').overlaycontent({ //initialize overlay on DIVs with class="imagecontainers"
 speed:300,
 dir:'right',
 opacity:0.8 //opacity: 0 to 1
})

})

</script>

<style type="text/css">

div#springinfo, div#summerinfo, div#winterinfo{
background:white;
padding:5px;
}

</style>

Selamat mencoba dan tetap good luck!

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara Membuat Efek Hover Image Yang Keren Seri 2. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://kans-sas.blogspot.com/2012/01/cara-membuat-efek-hover-image-yang.html" target="_blank">Cara Membuat Efek Hover Image Yang Keren Seri 2</a>

:: Get this widget ! ::

Artikel Terkait :