whycomputer.com >> Jaringan komputer >  >> Perangkat lunak

Cara Membuat Gambar Buram Saat Kursor Tidak Ada di Tumblr

Anda dapat membuat efek foto dalam tema Tumblr Anda yang menampilkan gambar dengan jelas saat mouse melayang di atas gambar, tetapi saat mouse tidak melayang di atas gambar, gambar tampak buram. Pertama, siapkan gambar yang akan Anda gunakan untuk efek. Lalu masukkan dua cuplikan kode di tema Tumblr Anda. Perhatikan bahwa kode tidak didukung dalam posting Tumblr, hanya dalam tema blog.

Siapkan Gambar

Untuk menyelesaikan tugas gambar yang kabur, Anda akan memerlukan dua gambar yang hampir identik : satu salinan gambar yang jelas asli dan salinan kedua dari gambar yang sama, hanya kabur. Gunakan efek Blur di GIMP atau Photoshop untuk membuat tampilan buram foto kedua. Pastikan gambarnya memiliki dimensi yang sama persis.

Kode JavaScript

Potongan kode JavaScript disisipkan di antara tag dan dari Anda Tumblr blog. Kode JavaScript mencakup peristiwa MouseRollover dan MouseOut. Acara MouseRollover menginstruksikan gambar yang jelas untuk ditampilkan ketika mouse melayang di atas gambar. Acara MouseOut menentukan gambar mana yang akan ditampilkan ketika mouse tidak melayang di atas gambar.

Cuplikan kode JavaScript yang digunakan untuk efek ini adalah:

fungsi MouseRollover (MyImage) {MyImage.src \u003d "Picture1.jpg"; } function MouseOut (MyImage) {MyImage.src \u003d "Picture2.jpg"; }

Ubah referensi "Picture1.jpg" ke URL untuk gambar asli yang jelas. Ubah referensi "Picture2.jpg" ke URL untuk gambar buram.

Kode HTML

Kode HTML untuk menyertai cuplikan Javascript menentukan ukuran, lokasi, dan tata letak gambar. Masukkan kode HTML dalam tema Tumblr tempat Anda ingin tampilan foto muncul. Kode HTML yang menyertai cuplikan Javascript di atas adalah:


Ganti "Picture2.jpg" dengan URL menjadi buram foto, yang akan ditampilkan secara default. Ubah variabel "lebar" dan "tinggi" ke ukuran yang diinginkan dari gambar yang Anda render.

Instal Kode

Untuk menginstal kode dalam tema Tumblr Anda, buka Tumblr dashboard, lalu klik tab "Customize" di dashboard untuk dimodifikasi blog. Klik opsi "Edit HTML" untuk membuka editor tema. Pilih potongan kode Javascript untuk menyorot kode, lalu tekan "Ctrl-C" untuk menyalin kode. Klik spasi di depan tag "" di kode tema Anda, lalu tekan "Ctrl-V" untuk menempelkan kode.

Salin kode HTML, lalu kembali ke editor tema Tumblr. Temukan lokasi dalam kode tempat Anda ingin membuat efek foto. Klik di lokasi, lalu tekan "Ctrl-V" untuk menempelkan cuplikan HTML. Klik "Perbarui Pratinjau" untuk menguji efek di jendela Pratinjau. Klik "Simpan" untuk menyimpan perubahan.

URL:https://komputer.whycomputer.com/Perangkat-lunak/101318951.html

Perangkat lunak
  • Cara Membuat 3D Stereogram

    Stereogram, juga dikenal sebagai autostereogram, adalah ilusi optik yang menggambarkan gambar di dalam gambar yang dapat dilihat saat menyilangkan mata. Saat menatap stereogram 2D, Anda dapat mendeteksi gambar tersembunyi yang akan muncul sebagai objek 3D. Meskipun stereogram yang dikerjakan dengan

  • Cara Membuat Oval Picture Frames

    Bingkai foto digunakan untuk mempercantik tampilan gambar. Dengan memilih bingkai yang cocok dengan latar belakang, skema warna dan gambar Anda, Anda dapat membuat foto lebih elegan, profesional atau menyenangkan. Anda tidak harus menggunakan bentuk persegi panjang tradisional untuk bingkai Anda — A

  • Cara Membuat Gambar di Monitor Lebih Tajam

    Anda dapat membuat gambar pada monitor lebih tajam dengan menyesuaikan resolusi layar komputer atau laptop Anda. Resolusi layar yang lebih rendah, seperti 800x600, akan menghasilkan gambar yang lebih besar yang tampak buram dan buram, sementara resolusi layar yang lebih tinggi, seperti 1680x1050

Jaringan komputer © https://komputer.whycomputer.com