Nội dung tiếp thị

Cách tạo vùng thẻ neo trên ảnh nền bằng CSS

Vào thời của Web 1.0, một tập hợp các liên kết như thế này có thể được xây dựng bằng cách ghép nối hình ảnh của bạn với các liên kết trên mỗi đồ họa, sau đó cố gắng ghép tất cả lại với nhau bằng một bảng. Nó cũng có thể được thực hiện bằng cách sử dụng một bản đồ hình ảnh nhưng điều đó thường yêu cầu một công cụ để xây dựng hệ tọa độ.

Sử dụng Cascading Style Sheets (CSS) khiến việc này trở nên dễ dàng hơn rất nhiều... không cần nối các hình ảnh và không phải cố gắng tìm một công cụ để xây dựng hệ tọa độ của bạn! Bạn chỉ cần thêm một hình nền vào div và sau đó sử dụng định vị tuyệt đối để chỉ định chiều rộng và chiều cao của từng vùng mà bạn muốn được liên kết.

  1. Xây dựng hình ảnh mà bạn muốn sử dụng. Bạn có thể sử dụng đồ họa này bên dưới (nhấp chuột phải và lưu dưới dạng để tải xuống)
lựa chọn

  1. Tải hình ảnh của bạn lên một thư mục có liên quan đến CSS của bạn. Trong WordPress, điều này có thể được thực hiện dễ dàng nhất bằng cách đặt nó vào thư mục hình ảnh trong thư mục chủ đề của bạn.
  2. Thêm HTML của bạn. Nó đẹp và đơn giản… một div với ba liên kết trong đó:
<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. Chỉnh sửa Cascading Style Sheet của bạn (CSS). Bạn sẽ thêm 6 phong cách khác nhau. 1 kiểu cho div tổng thể, 1 cho thẻ neo để nó không hiển thị bất kỳ trang trí văn bản nào, 1 kiểu để ẩn văn bản (được sử dụng cho khả năng truy cập) và 1 đặc tả kiểu cho mỗi liên kết:
#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; }

Vị trí rất đẹp và đơn giản… thêm chiều cao và chiều rộng rồi đặt lề trái từ phía bên trái của hình ảnh và lề trên cùng từ phía trên cùng của hình ảnh!

CẬP NHẬT 10/3/2007 để có khả năng tiếp cận tốt hơn với lời khuyên của Phil!

Douglas Karr

Douglas Karr là CMO của mởINSIGHTS và người sáng lập ra Martech Zone. Douglas đã giúp hàng chục công ty khởi nghiệp MarTech thành công, đã hỗ trợ thẩm định hơn 5 tỷ USD trong các thương vụ mua lại và đầu tư của Martech, đồng thời tiếp tục hỗ trợ các công ty triển khai và tự động hóa các chiến lược tiếp thị và bán hàng của họ. Douglas là một chuyên gia và diễn giả về chuyển đổi kỹ thuật số và MarTech được quốc tế công nhận. Douglas cũng là tác giả đã xuất bản sách hướng dẫn của Dummie và sách lãnh đạo doanh nghiệp.

Bài viết liên quan

Back to top
Đóng

Đã phát hiện ra khối quảng cáo

Martech Zone có thể cung cấp cho bạn nội dung này miễn phí vì chúng tôi kiếm tiền từ trang web của mình thông qua doanh thu quảng cáo, liên kết đơn vị liên kết và tài trợ. Chúng tôi sẽ đánh giá cao nếu bạn xóa trình chặn quảng cáo của mình khi bạn xem trang web của chúng tôi.