Rabu, 26 Februari 2014

Make an Attractive Hover use jQuery

Mau memasang embed form action uploader edit and crop for image di situs kalian, cobalah www.croppic.net Menawarkan 3 opsi dalam tampilan upload, dan fitur² lainnya. AA Koben tidak akan membahas mengenai croppic, namun ada satu bagian pada footer web tersebut yang cukup fullstylish terlihat ;)) Pojok kanan bawah jika kalian sorot akan tampak sebuah gambar yg melejit dan tooltip sederhana dengan tujuan memberitahukan satu nama website. Itu yg akan AA share untuk sobat-sabit :P Cukup atraktif hover terjadi dalam sekali sorot! Syarat utama harus sudah ada script jQuery pada template.

Bahan-bahan:
Sediakan 3 buah gambar:

  1. Gambar tooltip dengan resolusi 60 x 40 pixels.
  2. Gambar logo dgn resolusi 65 x 12 pixels.
  3. Gambar logo melejit dgn resolusi 50 x 49 pixels.
  4. Size image by source web.
Tentukan terlebih dahulu gambar beserta resolusi yg diinginkan. Karena jika tidak, akan sedikit ribet nanti dalam menetapkan aturan dalam atribut CSS-nya.

Buka dan lakukan Save Page As .htm berikut.
Bukalah pada aplikasi kode (notepad) Koben buatkan 2 opsi pada id selector #bybbn label Sobat bisa pilih, mau memakai image tooltip atau warna saja! Sebenarnya kalau cuma edit & crop image, sobat bisa coba apps berikut github.com/blueimp/JavaScript-Load-Image :D

Happy coding \m/

Tidak ada komentar:

Posting Komentar