Cara Membuat Kekaburan Gambar Ketika Kursor Tidak Ada di Tumblr

Anda boleh membuat kesan foto dalam tema Tumblr anda yang memaparkan gambar dengan jelas ketika tetikus melayang di atas gambar, tetapi ketika tetikus tidak berlegar di atas gambar, gambar kelihatan kabur. Pertama, sediakan gambar yang akan anda gunakan untuk kesannya. Kemudian masukkan dua coretan kod dalam tema Tumblr anda. Perhatikan bahawa kod tersebut tidak disokong dalam catatan Tumblr, hanya dalam tema blog.

Sediakan Imej

Untuk menyelesaikan tugas imej kabur, anda memerlukan dua gambar yang hampir sama:satu salinan gambar jelas yang asli dan satu salinan gambar yang sama, hanya kabur. Gunakan kesan Blur di GIMP atau Photoshop untuk membuat penampilan foto kedua yang kabur. Pastikan gambar mempunyai ukuran yang sama persis.

Kod JavaScript

Coretan kod JavaScript dimasukkan di antara tag dan blog Tumblr anda. Kod JavaScript merangkumi acara MouseRollover dan MouseOut. Acara MouseRollover mengarahkan gambar yang jelas untuk ditampilkan ketika tetikus melayang di atas gambar. Acara MouseOut menentukan gambar yang akan ditampilkan ketika tetikus tidak melayang di atas gambar.

Coretan kod JavaScript yang akan digunakan untuk kesan ini adalah:

Tukar rujukan "Picture1.jpg" ke URL untuk gambar asal yang jelas. Ubah rujukan "Picture2.jpg" ke URL untuk gambar yang kabur.

Kod HTML

Kod HTML untuk menyertakan potongan Javascript menentukan ukurannya, lokasi dan susun atur gambar. Masukkan kod HTML dalam tema Tumblr di mana anda mahu paparan foto muncul. Kod HTML untuk menyertakan potongan Javascript di atas adalah:

Ganti "Picture2.jpg" dengan URL ke foto yang kabur, yang akan dipaparkan secara lalai. Ubah pemboleh ubah "lebar" dan "tinggi" ke ukuran gambar yang anda berikan yang diinginkan.

Pasang Kod

Untuk memasang kod dalam tema Tumblr anda, buka papan pemuka Tumblr anda, kemudian klik tab "Sesuaikan" di papan pemuka agar blog dapat diubah suai. Klik pilihan "Edit HTML" untuk membuka editor tema. Pilih coretan kod Javascript untuk menyerlahkan kod tersebut, kemudian tekan "Ctrl-C" untuk menyalin kod. Klik ruang di hadapan tag "" dalam kod tema anda, kemudian tekan "Ctrl-V" untuk menampal kodnya.

Salin kod HTML, kemudian kembali ke editor tema Tumblr. Cari lokasi dalam kod di mana anda mahu kesan foto dibuat. Klik di lokasi, kemudian tekan "Ctrl-V" untuk menampal potongan HTML. Klik "Kemas kini Pratonton" untuk menguji kesan di tetingkap Pratonton. Klik "Simpan" untuk menyimpan perubahan.