Teknik # 1
Memuat gambar pada elemen biasa, hanya bergeser jauh dengan posisi latar belakang. Kemudian memindahkan posisi latar belakang untuk menampilkannya di hover.
#grass { background:url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }
Teknik # 2Jika elemen yang bersangkutan sudah memiliki background-image diterapkan, Anda hanya perlu mengubah citra tersebut, karena trik di atas tidak akan bekerja. Biasanya Anda akan dihadapkan pada sprite di sini (gambar latar belakang gabungan) dan hanya menggeser posisi latar belakang. Tetapi jika itu tidak mungkin, cobalah Terapkan gambar latar belakang untuk elemen halaman yang sudah digunakan, tetapi tidak memiliki gambar latar belakang.
#random-unsuspecting-element { background:url(images/grass.png)) no-repeat -9999px -9999px; }
#grass:hover { background:url(images/grass.png) no-repeat; }
intinya membuat elemen halaman baru yang akan digunakan untuk teknik ini preloading mungkin muncul di awal load gambar, seperti # preload-001, # preload-002, tapi itu agak bertentangan dengan semangat standar web. Oleh karena itu pergunakan elemen halaman yang sudah ada di halaman Anda.
Saya punya ide untuk mencoba dan menggunakan unsur yang sama, hanya menggunakan class psuedo kelas untuk memuat gambar, sehingga Anda tidak perlu bergantung pada gambar latar belakang untuk memuat gambar sebenarnya..
untuk lebih jelas saya akan memberi relasi tutorialnya.. tapi sayangnya masih dalam bahasa inggir.. saya lagi malas untuk menterjemahkannya.. hehehe... Ups !!! sory ...
silahkan check artikel ini untuk teknik dan javascript nya..
0 comments:
Post a Comment
Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.
terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.