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.
- 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)
- 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.
- 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>
- 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!