Konten Pemasaran

Cara Membuat Daerah Tag Jangkar Di Atas Gambar Latar Belakang Menggunakan CSS

Di zaman Web 1.0, kumpulan tautan seperti ini dapat dibuat dengan menggabungkan gambar Anda dengan tautan di setiap grafik, lalu mencoba menjahit semuanya kembali dengan sebuah tabel. Bisa juga dilakukan dengan menggunakan an peta gambar tapi itu biasanya membutuhkan alat untuk membangun sistem koordinat.

Memanfaatkan Cascading Style Sheets (CSS) membuat ini jauh lebih mudahโ€ฆ tidak ada gambar penyambungan dan tidak perlu mencari alat untuk membangun sistem koordinat Anda! Anda cukup menambahkan gambar latar belakang ke div dan kemudian menggunakan pemosisian absolut untuk menentukan lebar dan tinggi setiap wilayah yang ingin Anda tautkan.

  1. Bangun gambar yang ingin Anda gunakan. Anda dapat menggunakan grafik di bawah ini (klik kanan dan simpan sebagai untuk mengunduh)
Pilihan

  1. Unggah gambar Anda ke direktori yang berhubungan dengan CSS Anda. Di WordPress, ini dapat dilakukan paling mudah dengan menempatkannya di folder gambar di direktori tema Anda.
  2. Tambahkan HTML Anda. Sangat bagus dan sederhanaโ€ฆ div dengan tiga tautan di dalamnya:
<div id="subscribe">
    <a id="rss" href="[your feed link]" title="Subscribe with RSS"><span class="hide">RSS</span></a>
    <a id="email" href="[your email subscribe link]" title="Subscribe with Email"><span class="hide">Email</span></a>
    <a id="mobile" href="[your mobile link]" title="View Mobile Version"><span class="hide">Mobile</span></a>
</div>
  1. Edit Lembar Gaya Cascading Anda (CSS). Anda akan menambahkan 6 gaya berbeda. 1 gaya untuk keseluruhan div, 1 untuk tag jangkar sehingga tidak menampilkan dekorasi teks apa pun, 1 gaya untuk menyembunyikan teks (digunakan untuk aksesibilitas), dan 1 spesifikasi gaya untuk setiap tautan:
#subscribe { /* background image block */
    display: block;
    width: 215px;
    height: 60px;
    background: url(https://martech.zone/wp-content/uploads/2007/10/options.png) no-repeat; 
    margin-top: 0px; }
#subscribe a { text-decoration:none; } 
.hide { visibility:hidden; } 
#rss { /* RSS Link */ 
    float: left;
    position:absolute; 
    width: 50px; 
    height: 50px; 
    margin-left: 20px;
    margin-top: 5px; } 
#email { /* Email Link */ 
    float: left; 
    position:absolute; 
    width: 50px; 
    height: 50px; 
    margin-left: 80px; 
    margin-top: 5px; } 
#mobile {  /* Mobile Link */ 
    float: left; 
    position:absolute; 
    width : 50px; 
    height: 50px; 
    margin-left: 150px; 
    margin-top: 5px; }

Posisinya bagus dan sederhanaโ€ฆ tambahkan tinggi dan lebar, lalu atur margin kiri dari sisi kiri gambar, dan margin atas dari sisi atas gambar!

DIPERBARUI 10/3/2007 untuk aksesibilitas yang lebih baik dengan saran Phil!

Douglas Karr

Douglas Karr adalah CMO dari Buka WAWASAN dan pendiri dari Martech Zone. Douglas telah membantu lusinan startup MarTech yang sukses, membantu uji tuntas lebih dari $5 miliar dalam akuisisi dan investasi Martech, dan terus membantu perusahaan dalam menerapkan dan mengotomatiskan strategi penjualan dan pemasaran mereka. Douglas adalah pakar dan pembicara transformasi digital dan MarTech yang diakui secara internasional. Douglas juga merupakan penulis panduan Dummie dan buku kepemimpinan bisnis.

Artikel terkait

Kembali ke atas tombol
Penyelesaian

Adblock Terdeteksi

Martech Zone dapat memberi Anda konten ini tanpa biaya karena kami memonetisasi situs kami melalui pendapatan iklan, tautan afiliasi, dan sponsor. Kami akan sangat menghargai jika Anda menghapus pemblokir iklan saat Anda melihat situs kami.