Cara membuat referensi picture-in-picture? Cara menyisipkan link ke gambar

Membuat spanduk dan peta situs, webmaster pemula dihadapkan dengan masalah seperti itu, bagaimana memasukkan link ke gambar, lakukan dengan itu menu cerah dan lebih menarik. Tapi bagaimana untuk menerapkannya? Tidak ada yang lebih mudah jika Anda tahu bahasa HTML.

Mari kita cari tahu bagaimana kita bisa membuat realitas ide ini. Pada artikel ini, kami akan menawarkan dua pilihan untuk memecahkan masalah. Satu jarang digunakan karena fakta bahwa dibutuhkan banyak waktu dan usaha, sedangkan yang kedua dianggap terkenal. Kami menganalisis dengan Anda berdua.

Mana gambar-link digunakan

Sebelum kita berbicara tentang bagaimana untuk membuat referensi picture-in-picture, kita akan memahami di mana dan mengapa mereka digunakan. Setelah semua, itu akan lebih mudah untuk memahami apa yang kita inginkan dari gambar.

Gambar link biasanya digunakan sebagai spanduk, iklan tout gambar. Contoh ini adalah gambar-gambar semua dalam "VKontakte" yang sama. Ingat berapa kali Anda klik pada foto yang alamat tertentu telah dibangun? Selain itu, cukup sering mereka digunakan dalam bentuk kelompok menu dan masyarakat, terutama jika mereka berisi entri khusus. Banyak gambar tersebut ditemukan di situs lain.

Paste link ke dalam gambar

Hal paling sederhana - gambar-link. Itu saja, kita berbicara untuk memulai. Ilustrasi ini adalah referensi siap. Yaitu mengklik ikon ini, Anda akan diarahkan ke halaman baru.

Jika Anda tahu bagaimana itu didefinisikan oleh link umum dengan bantuan HTML-markup, masalah yang Anda harus muncul. Satu-satunya perbedaan adalah bahwa alih-alih link teks ditentukan gambar.

Jadi, untuk melaksanakan rencananya, Anda perlu gambar itu sendiri, upload ke internet atau disimpan di komputer Anda (tergantung pada apakah Anda bekerja dalam modus online, sebenarnya di situs, atau zadeystvuete editor).

Kami mencari alamat gambar, menulis, tidak lupa. Juga memperbaiki link yang harus membuka gambar ini.

Berikutnya, menulis berikut: situs href="http:// - kode khusus . Gambar-link didefinisikan dengan bantuan.

Jadi, kita meresepkan link yang ditampilkan dalam bentuk ilustrasi. Cukup mudah. Tapi pendekatan ini hanya jika Anda yakin bahwa harus ada hanya satu link. Tapi bagaimana jika harus ada beberapa? Kemudian kita beralih ke pilihan lain.

Membuat menu gambar

Metode pertama dikembangkan secara independen dalam studi halaman web bahasa markup. Penciptaan menu tersebut mungkin mengambil beberapa jam.

Metode ini cocok untuk mereka yang suka bermain-main dengan berbagai editor, karena cukup memakan waktu dan mengambil sedikit lebih lama dari penciptaan kartu menu atau metode kedua. itu terletak pada kenyataan bahwa gambar diambil, yang dipotong menjadi beberapa strip atau kotak. Setiap gambar ditandatangani, dan dasar untuk link, seperti dijelaskan di atas. Berikutnya, tag halaman kode yang ditulis dalam urutan yang benar. Itu semua pertanyaan tentang bagaimana untuk membuat picture-in-picture referensi, hampir dipecahkan. Tapi jangan lupa tentang opsi kedua.

Dia adalah membuat menu dengan hanya satu gambar, meminta untuk setiap zona menggambarkan link-nya. Jangan khawatir, ada ini sangat kompleks dalam hal ini. Sekarang, hal pertama yang pertama.

Cara membuat

Mari kita memeriksa sedikit lebih cara pertama.

Untuk mulai dengan, Anda akan membutuhkan pengetahuan tentang editor grafis, dan HTML. Cara membuat gambar referensi, ia memberitahu jenis halaman markup.

Jadi, jika Anda memutuskan untuk pergi dengan cara ini, Anda akan perlu gambar dan editor grafis sederhana yang memungkinkan Anda untuk memotong gambar dan menempatkan pada label mereka, serta tempat di mana Anda akan dapat mengisi mereka.

Jika ini adalah situs web Anda sendiri - cocok konvensional galeri atau perpustakaan file, "VKontakte" mungkin album kelompok atau masyarakat (lebih bebas).

Selanjutnya, gambar yang akan dipotong-potong, sehingga perlu untuk mengingat urutan bagian-bagian yang diterima. Dicap pada mereka prasasti dan isi server, menulis referensi pada setiap ilustrasi.

Ambil kode di atas, dan untuk mengganti data yang diinginkan. Kemudian isi gambar di situs dalam urutan di mana mereka harus pergi. Pada saat yang sama, jika Anda memotongnya menjadi strip, maka Anda perlu bertanya setiap link di baris baru, tetapi jika Anda telah berbagi foto ke dalam kotak, maka Anda perlu dimasukkan ke dalam berturut-turut sebagai link ternyata kotak.

Kami melakukan peta situs

Jadi, jika Anda tidak menyukai versi pertama, dan Anda ingin belajar bagaimana membuat referensi picture-in-picture dengan cara lain, kami dapat menawarkan Anda untuk mengembangkan referensi peta. Itu membuat lebih mudah, di sini hanya dapat terjadi dengan parameter tugas dari masalah. Mengapa akan lebih mengerti.

Pertama, kita harus ingat bahwa sitemap terhubung ke gambar menggunakan perintah usemap = "# map1, yang ditentukan dalam tag img Oleh karena itu, mengisi gambar di situs, pastikan untuk menambahkan tag di bagian kedua -. Usemap =" # nama peta".

gambar markup lebih jauh ke zona, yang melekat pada link dilakukan menggunakan tag berpasangan , yang dapat ditempatkan di tempat yang nyaman antara tag berpasangan .

Perhatikan bahwa ketika menggunakan jenis peta harus diminta tidak hanya link, tetapi juga bidang kegiatan dan koordinat mereka. Berikutnya, kita akan memeriksa parameter dasar yang memiliki tag.

pengaturan cara pintas

Jadi, di depan mata Anda, siap-referensi gambar. HTML memungkinkan Anda untuk secara signifikan meningkatkan fungsi gambar - untuk mengalokasikannya daerah tertentu untuk referensi. Semua ini diberikan oleh parameter tertentu, yang sekarang akan dibahas.

Mari kita bicara sedikit tentang parameter dasar dari tag berpasangan . Terutama nama ini, yang sama dengan nilai usemap. Jadi Anda menandakan bahwa kartu ditulis untuk gambar.

Selanjutnya dalam pasangan tag diresepkan tag lain - , yang menggambarkan wilayah referensi. Dia bukan orang itu dan, tentu saja, memiliki parameter sendiri.

Pertama - bentuk. Dengan bantuan webmaster menetapkan jenis lapangan. Hal ini dapat:

• lingkaran - lingkaran;
• persegi panjang - rect;
• Polygon - poli;
• gambar rest area - default.

Berikutnya - coords. Dengan bantuan dari koordinat area pixel. Asal usul dalam sistem koordinat - sudut kiri atas. Saat itu, dan masalah utama - tidak begitu mudah untuk menentukan koordinat oleh piksel, terutama jika tidak ada keakraban dengan grafis komputer.

Kami menyebutkan juga href cukup terkenal, yang menetapkan alamat link.

Dan opsi terakhir, yang akan disebutkan, - nohref. Hal ini menunjukkan bahwa wilayah ini bukan referensi.

Tentu saja, ini bukan daftar lengkap parameter yang dapat Anda mengatur gambar atau link-peta. Tapi pada saat yang sama, itu akan cukup untuk membuat link cerah dan berwarna-warni atau bahkan keseluruhan dari sistem mereka.

Tips

mana cara untuk penciptaan link, gambar yang Anda pilih, yang penting adalah bahwa gambar asli itu baik. Cobalah untuk memilih orang-orang desain yang tidak menangkap mata, tidak mengiritasi warna-warna cerah atau pola. Hal ini sangat penting untuk peta situs. Anda dapat membuat kolase dari beberapa foto, menggelapkan mereka, atau menghidupkan salah satu filter dalam program grafis.

Bila Anda membuat sitemap dianjurkan untuk memilih gambar dengan lembut, tidak menyebabkan iritasi pada pola mata. Percayalah, tidak selalu kunci keberhasilan - gambar-link yang cerah. "VKontakte", bagaimanapun, sering fokus hanya pada kecerahan dan showiness, untuk menarik pengunjung baru.

temuan

Untuk meringkas. Kami dengan Anda menemukan cara untuk membuat referensi picture-in-picture, dan melihat dua cara yang dapat Anda sama baiknya digunakan untuk membuat menu dari berbagai kesulitan. Selain itu, kami menemukan cara untuk mengatur gambar-link dan belajar tentang parameter utama yang memungkinkan Anda untuk membuat cukup peta berguna situs, kelompok atau masyarakat.