Rabu, Agustus 27, 2008

Animasi Hover Gambar

Ini nih akibatnya kalo sering nglayap di mbah gugel, apaan akibatnya? ya tuambah ilmu kale Ho..ho.. ho.., waktu iseng - iseng nglayap di mbah gugel niatnya sih buat nyari scriptnya Tab View (buat menu nyang diatas itu lho), didamparin deh sama mbah gugel di javascript.com eh ternyata ketemu bnyak script laen bagus-bagus lagi scriptnya, ngga jadi deh ngunduh Tab Viewnya, ibaratnya sih mau nyari sebuah jarum eh malah dapet pabrik jarumnya (ojrit dah mbah gugel), banyak juga sih script-script nyang bagus buat moles Blog, ini slah satunya, script ini bisa buat moles tampilan link image Kita (yahut deh pokokna), langsung aja yuuuk..






<style type="text/css">
.hoper img{
border: 1px solid #ccc;
}
.hoper:hover img{
border: 1px solid navy;
}
.hoper:hover{
color: green;
}
</style>
<a href="http://bloggenre.blogspot.com" class="hoper"><img border="0" src="http://dc37.4shared.com/img/58057476/dee9ee91/SEOsBLOGs.gif" /></a>
Kamu bisa ganti text nyang warnanya merah untuk mengubah tebal tipisnya border, nyang hijau buat ngrubah warna border waktu blum dan sesudah hover, jangan lupa ganti juga Linkna ya bleh lah klo berbaik hati ngga ngeganti linknya (wkwkwk...).

Eh ini ada satu lagi style yang bisa Kamu pake, klo nyang ini ni bagus buat blog nyang ngga jelas kaya blog ini (Hua.. ha.. ha..), ini nih sciptnya :






<style type="text/css">

.opacityit img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 0.4;
}

.opacityit:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
}

</style>
<a href="http://bloggenre.blogspot.com" class="hoper"><img border="0" src="http://farm4.static.flickr.com/3103/3209923459_abe9875820_m.jpg" /></a>
Script nyang ini agak beda Kamu bisa ganti text nyang berwarna merah buat nyesuaiin transparant imagenya (semakin kecil nilainnya semakin ngga transparant), klo script nyang berwarna hijau buat kondisi image waktu di hover (1 berarti sperti tampilan gambar aslinya), ok deh gitu aja scriptnya guampang praktis and hiegienis khan, Boleh dicoba..!


Silahkan share artikel ini jika menurut Sobat bermanfaat :)

12 komentar :

  1. wah sip kang, ada pelajaran baru nih, pertamaxxxx plus. hehehehe
    sekedar informasi ya mas blognya masih belum do follow tuh, coba dibaca lagi di blog kang firdaus, gus-semarang review, blogger addicter, riasmaja, hakimtea, atau blog-blog yang ngejelasin bagaimana car merubah no follow menjadi do follow, untuk pengertian do follow itu sendiri silahkan dicek dulu di blog kang firdaus tentang kenali dulu ilmunya sebelum bicara

    BalasHapus
  2. wah ilmu baru nih, thanks ya, sekedar nambahin blognya belum do follow bro, silahkan baca lagi artikel do follow di blog kang firdaus, blog blogger addicter, blog riasmaja, blog hakimtea, blog gus, blog mbak tyas yng bahasa inggris, atau blog lainnya.

    BalasHapus
  3. @oeoes

    Waduuh aku jadi malu, yah mas tadi aku dah baca artikelnya, tak kirain cuma taruh meta tag follow di blog udah jadi dofollow, tapi udah tak rubah ko mas, bleh dong skarang ngikut :-p

    BalasHapus
  4. Ok nnti saya coba dech...thx

    BalasHapus
  5. trima ksih sdh memberi infonya spt ne

    BalasHapus
  6. Thanks infonya, salam kenal.
    Frelia si Anak SD yang mukanya jelek kayak kepiting rebus.Please visit me back^^

    BalasHapus
  7. Mantap infonya gan, keep posting N sharing :)
    jangan lupa mampir sini gan
    Blogger

    Nusantara Blogpreneur Indonesia

    BalasHapus
  8. sangat bermanfaat bagi saya blogger newbie..

    BalasHapus